Belajar Gatsby - Progressive Web App (PWA)

#Pendahuluan

Progressive Web App menggabungkan kemampuan native app dengan jangkauan web biasa. Situs yang memenuhi kriteria PWA dapat diinstal di layar utama, tetap berfungsi saat offline, dan menerima update konten dengan cepat.

Episode 17 membahas fitur PWA di Gatsby, service worker dan strategi caching, web app manifest dan installability, serta pendekatan offline-first untuk situs statis.

#Memahami PWA dan Komponennya

#Tiga Pilar PWA

PWA berdiri di atas tiga pilar: HTTPS, web app manifest, dan service worker. HTTPS wajib agar service worker bisa berjalan, manifest membuat situs bisa diinstal, dan service worker menangani caching serta kontrol jaringan. Gatsby mendukung ketiganya lewat plugin resmi.

#Kenapa Situs Statis Cocok

Output Gatsby yang sudah statis dan ber-hash membuat precaching menjadi mudah: setiap aset memiliki versi unik sehingga service worker bisa menyimpan konten lama tanpa takut bentrok dengan versi baru.

#Service Worker dengan gatsby-plugin-offline

#Instalasi dan Konfigurasi

gatsby-plugin-offline membungkus Workbox dengan strategi precache yang dirancang khusus untuk Gatsby. Plugin ini harus diletakkan setelah gatsby-plugin-manifest di daftar plugin.

npm install gatsby-plugin-offline gatsby-plugin-manifest

Tambahkan keduanya ke gatsby-config:

Konfigurasi manifest dan offline

module.exports = {
  plugins: [
    {
      resolve: "gatsby-plugin-manifest",
      options: {
        name: "Situs Gatsby",
        short_name: "Gatsby",
        start_url: "/",
        background_color: "#ffffff",
        theme_color: "#663399",
        display: "standalone",
        icon: "src/images/icon.png",
      },
    },
    "gatsby-plugin-offline",
  ],
}

Urutan plugin menentukan perilaku service worker: gatsby-plugin-manifest membuat manifest dan ikon yang dibutuhkan sebelum gatsby-plugin-offline menyusun precache berdasarkan aset hasil build.

#Strategi Caching Workbox

gatsby-plugin-offline menyediakan dua strategi utama: precache untuk aset yang dipindai saat build, dan runtime caching untuk permintaan yang terjadi setelah halaman dimuat. Gambar, font, dan halaman hasil build masuk ke precache, sementara permintaan eksternal yang butuh kesegaran diatur dengan strategi stale-while-revalidate.

#Web App Manifest dan Installability

#Konfigurasi Manifest

Manifest mendeskripsikan nama, ikon, dan perilaku aplikasi saat dibuka penuh. Konfigurasi pada gatsby-plugin-manifest di atas menghasilkan file manifest.webmanifest yang ditautkan otomatis di head. Ikon harus disediakan minimal dalam ukuran 512x512 untuk memenuhi kriteria installability.

#Memenuhi Kriteria Installable

Browser menampilkan prompt install bila situs memiliki manifest yang valid, service worker yang aktif, ikon dengan ukuran memadai, dan koneksi HTTPS. Setelah kriteria terpenuhi, pengguna Android dan Chrome dapat menginstal situs ke layar utama dengan tampilan standalone.

#Offline-First Design

#Prinsip App Shell

Pendekatan offline-first menyusun struktur UI yang dapat dirender tanpa jaringan, lalu mengisi data dinamis setelah koneksi tersedia. Gatsby mengeluarkan HTML statis yang sudah lengkap, sehingga shell halaman tetap tampil meskipun pengguna sedang offline.

#Cache Data dengan IndexedDB

Untuk data yang berubah, gunakan IndexedDB agar data tetap bisa diakses offline:

Menulis cache IndexedDB

import { openDB } from "idb"
 
const db = await openDB("gatsby-cache", 1, {
  upgrade(db) {
    db.createObjectStore("posts")
  },
})
 
await db.put("posts", data, "latest")

openDB dari library idb memberikan Promise-based API untuk IndexedDB. Service worker dan IndexedDB bekerja sama: service worker menangani aset, IndexedDB menangani data aplikasi.

#Menguji dengan Lighthouse

Jalankan kategori PWA di Lighthouse untuk memverifikasi kriteria installability dan offline experience. Pastikan service worker terdaftar, halaman merespons saat offline, dan semua aset awal ter-precache.

#Penutup

Inti yang harus dibawa pulang:

• PWA membutuhkan HTTPS, manifest, dan service worker.
• gatsby-plugin-offline menyediakan precache berbasis Workbox.
• gatsby-plugin-manifest harus didaftarkan sebelum plugin offline.
• Ikon 512x512 dan display standalone mendukung installability.
• IndexedDB melengkapi cache data di sisi client.
• Lighthouse kategori PWA memverifikasi seluruh kriteria.

Di episode 18 selanjutnya kita akan membahas architecture dan design patterns — struktur project yang scalable, component-driven design, serta pola shared components, hooks, dan utility agar situs mudah dipelihara.