PWA: Dasar Progressive Web App, Service Worker dan Manifest

Apa itu Progressive Web App

Progressive Web App (PWA) — adalah pendekatan pengembangan aplikasi web yang menggabungkan kualitas terbaik web dan aplikasi native. Istilah ini diperkenalkan oleh Francesco Berriman pada tahun 2015, dan Google secara aktif mempromosikan PWA sebagai pengganti aplikasi mobile sederhana. Ide dasarnya: situs web secara bertahap ditingkatkan tergantung pada kemampuan browser dan perangkat. Jika browser mendukung Service Worker — mode offline diaktifkan. Jika mendukung manifest — tombol «Pasang» muncul. Jika ada API pemberitahuan — aplikasi dapat mengirim push. Pengguna di perangkat lemah dengan internet lambat akan mendapatkan versi dasar situs, dan di smartphone modern — aplikasi lengkap dengan ikon di desktop.

PWA tidak perlu dipasang melalui toko aplikasi. Cukup tautan. Ini memecahkan masalah utama aplikasi mobile — hambatan masuk yang tinggi. Pengguna tidak pergi ke Google Play atau App Store, tidak menunggu unduhan 100 MB, tidak memberikan puluhan izin. Dia cukup membuka situs, dan browser menawarkan untuk memasang aplikasi. Jika pengguna menolak — dia tetap menggunakan situs. Dan jika setuju — ikon muncul di layar utama, dan aplikasi terbuka seperti native: tanpa bilah alamat browser, dengan mode layar penuh dan startup cepat.

Secara teknis, PWA harus memenuhi tiga kriteria: bekerja melalui HTTPS (koneksi aman), memiliki Service Worker (skrip pemrosesan latar belakang) dan mengandung manifest (Web App Manifest). Ketiga komponen ini mengubah situs biasa menjadi aplikasi yang dapat dipasang.

Service Worker: Jantung PWA

Service Worker — adalah skrip JavaScript yang dijalankan browser di thread terpisah, independen dari halaman web. Ia tidak memiliki akses ke DOM, tidak dapat berinteraksi langsung dengan antarmuka, tetapi dapat mencegat dan memodifikasi permintaan jaringan, mengelola cache, memproses pemberitahuan push dan melakukan sinkronisasi latar belakang. Service Worker bekerja seperti server proxy antara browser dan jaringan: setiap permintaan dari halaman melewati Service Worker, yang memutuskan — mengembalikan data dari cache, meminta dari server atau melakukan keduanya.

Service Worker hidup sesuai dengan siklus hidupnya sendiri, tidak terikat pada halaman yang terbuka. Ia dipasang, diaktifkan dan bekerja di latar belakang bahkan setelah semua tab situs ditutup. Ini memungkinkan PWA menerima pemberitahuan push dan memperbarui cache di latar belakang, tanpa partisipasi pengguna.

Siklus Hidup Service Worker

Service Worker melewati empat tahap: pendaftaran, instalasi, aktivasi dan diam/selesai.

Pendaftaran. Browser menerima tautan ke file JS Service Worker dan mulai mengunduh. Pendaftaran dilakukan dari JavaScript biasa di halaman:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(registration => {
      console.log('SW terdaftar:', registration.scope);
    })
    .catch(error => {
      console.log('Pendaftaran SW gagal:', error);
    });
}

Instalasi. Setelah berhasil diunduh, browser memicu peristiwa install. Pada tahap ini, biasanya menyimpan sumber daya utama (kerangka HTML, CSS, gambar utama) ke dalam cache agar aplikasi dapat bekerja offline. Jika instalasi berhasil, Service Worker melanjutkan ke tahap berikutnya. Jika skrip menghasilkan kesalahan — instalasi dibatalkan dan Service Worker lama terus bekerja.

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('pwa-cache-v1').then(cache => {
      return cache.addAll([
        '/',
        '/index.html',
        '/styles/main.css',
        '/scripts/app.js',
        '/images/logo.png'
      ]);
    })
  );
});

Aktivasi. Ketika semua tab situs ditutup, Service Worker lama berakhir dan yang baru diaktifkan. Peristiwa activate digunakan untuk membersihkan cache lama dan migrasi data:

self.addEventListener('activate', event => {
  const cacheWhitelist = ['pwa-cache-v2'];
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (!cacheWhitelist.includes(cacheName)) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

Diam. Service Worker yang diaktifkan mencegat permintaan dan memproses peristiwa. Dapat dihentikan oleh browser untuk menghemat sumber daya dan dihidupkan ulang pada permintaan berikutnya. Service Worker digerakkan oleh peristiwa: ia hidup hanya selama memproses peristiwa.

Strategi Caching

Service Worker mendukung beberapa strategi caching. Pilihan tergantung pada jenis sumber daya dan persyaratan aktualitas data.

Cache First (cache dulu). Cache diperiksa terlebih dahulu. Jika sumber daya ditemukan — dikembalikan dari cache. Jika tidak — permintaan pergi ke server, respons disimpan dalam cache. Strategi ini cocok untuk sumber daya statis: gambar, font, CSS, JS. Memberikan kecepatan maksimum dan pekerjaan offline penuh.

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request).then(fetchResponse => {
        return caches.open('pwa-cache-v1').then(cache => {
          cache.put(event.request, fetchResponse.clone());
          return fetchResponse;
        });
      });
    })
  );
});

Network First (jaringan dulu). Permintaan pertama pergi ke server. Jika server merespons — data dikembalikan ke pengguna dan disimpan dalam cache. Jika server tidak tersedia — salinan cache dikembalikan. Strategi ini cocok untuk permintaan API, berita, konten yang harus aktual tetapi juga dapat bekerja offline.

self.addEventListener('fetch', event => {
  event.respondWith(
    fetch(event.request).then(response => {
      return caches.open('pwa-dynamic-v1').then(cache => {
        cache.put(event.request, response.clone());
        return response;
      });
    }).catch(() => {
      return caches.match(event.request);
    })
  );
});

Stale While Revalidate (usang dengan pembaruan). Respons segera dikembalikan dari cache, sementara di latar belakang permintaan dikirim ke server untuk memperbarui cache. Pengguna melihat konten seketika, dan permintaan berikutnya akan menerima data segar. Ideal untuk konten yang berubah, tetapi tidak kritis jika pengguna melihat versi yang beberapa menit lebih lama.

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(cached => {
      const fetchPromise = fetch(event.request).then(response => {
        return caches.open('pwa-dynamic-v1').then(cache => {
          cache.put(event.request, response.clone());
          return response;
        });
      });
      return cached || fetchPromise;
    })
  );
});

Web App Manifest: Bagaimana Aplikasi Terlihat di Perangkat

Manifest — adalah file JSON, biasanya manifest.json, yang dihubungkan melalui tag <link> di head halaman HTML. Ia memberi tahu browser bagaimana aplikasi harus ditampilkan saat dipasang di perangkat: nama, ikon berbagai ukuran, warna latar belakang, warna tema, orientasi dan mode tampilan (browser, UI minimal, layar penuh).

{
  "name": "PWA Demo App",
  "short_name": "PWA Demo",
  "description": "Aplikasi demo PWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#3f51b5",
  "orientation": "portrait",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ]
}

Parameter display menentukan bagaimana aplikasi akan terlihat setelah instalasi. standalone menyembunyikan bilah alamat browser dan panel navigasi — aplikasi terlihat seperti native. fullscreen menggunakan seluruh layar tanpa elemen browser. minimal-ui menyisakan elemen browser minimal (tombol kembali dan muat ulang).

Ikon harus disiapkan setidaknya dalam dua ukuran: 192x192 dan 512x512 piksel. Format PNG dengan dukungan parameter purpose (misalnya, maskable) memungkinkan browser menyesuaikan ikon dengan bentuk casing perangkat — di Android ikon dapat dipotong menjadi persegi bulat. Setelah menghubungkan manifest, browser Chrome di Android mulai menampilkan spanduk «Tambahkan ke layar utama» ketika kondisi terpenuhi: HTTPS, Service Worker terdaftar, manifest benar dan setidaknya dua kunjungan dengan interval 5 menit.

Pemberitahuan Push di PWA

PWA dapat mengirim pemberitahuan push seperti aplikasi native. Untuk ini digunakan dua API: Push API (pengiriman server) dan Notification API (tampilan di perangkat). Service Worker menerima peristiwa push bahkan jika aplikasi tidak terbuka, dan dapat menampilkan pemberitahuan dengan judul, teks dan ikon.

Untuk menerima pemberitahuan push, pengguna harus memberikan izin:

Notification.requestPermission().then(permission => {
  if (permission === 'granted') {
    console.log('Push diizinkan');
  }
});

Service Worker berlangganan peristiwa push dan menampilkan pemberitahuan:

self.addEventListener('push', event => {
  const data = event.data.json();
  self.registration.showNotification(data.title, {
    body: data.body,
    icon: '/icons/icon-192x192.png',
    badge: '/icons/badge-72x72.png',
    actions: [
      { action: 'open', title: 'Buka' },
      { action: 'close', title: 'Tutup' }
    ]
  });
});

self.addEventListener('notificationclick', event => {
  event.notification.close();
  if (event.action === 'open') {
    clients.openWindow('/');
  }
});

Untuk mengirim push dari server, digunakan protokol Web Push (VAPID). Server mengenkripsi pesan dan mengirimkannya melalui layanan push browser (Firebase Cloud Messaging untuk Chrome, Mozilla Autopush untuk Firefox). Langganan pengguna (objek PushSubscription) harus disimpan di server saat pendaftaran.

Kinerja dan Lighthouse

PWA harus cepat. Google Lighthouse — alat audit yang memeriksa PWA berdasarkan daftar periksa: pendaftaran Service Worker, respons 200 saat akses offline, manifest benar, HTTPS, ukuran ikon yang benar, pemuatan cepat di jaringan lambat. Skor kelulusan minimum untuk PWA — 80 dari 100 pada skala Lighthouse. Aplikasi dengan skor di bawah 80 tidak mendapatkan spanduk instalasi di Chrome.

Metrik kinerja utama untuk PWA — First Contentful Paint (FCP) hingga 1,8 detik, Largest Contentful Paint (LCP) hingga 2,5 detik, Time to Interactive (TTI) hingga 3,5 detik. Service Worker dapat meningkatkan FCP dan LCP secara signifikan jika menyimpan cache HTML dan CSS kritis saat instalasi. Strategi Cache First untuk statika dan Stale While Revalidate untuk API memberikan pengalaman pengguna terbaik.

Akses Offline dan Sinkronisasi Latar Belakang

Salah satu kemampuan utama PWA — bekerja tanpa internet. Service Worker mencegat permintaan dan mengembalikan versi halaman yang di-cache. Jika pengguna mencoba membuka halaman yang tidak ada dalam cache, halaman cadangan kustom dapat ditampilkan:

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request);
    }).catch(() => {
      return caches.match('/offline.html');
    })
  );
});

Sinkronisasi latar belakang (Background Sync) memungkinkan menunda pengiriman data ke server jika perangkat offline. Service Worker menyimpan permintaan dan secara otomatis mengirimkannya saat koneksi dipulihkan:

self.addEventListener('sync', event => {
  if (event.tag === 'sync-messages') {
    event.waitUntil(sendMessages());
  }
});

function sendMessages() {
  return caches.open('pwa-pending-v1').then(cache => {
    return cache.keys().then(requests => {
      return Promise.all(requests.map(request => {
        return fetch(request).then(() => cache.delete(request));
      }));
    });
  });
}

Alat untuk Pengembangan PWA

Chrome DevTools menyediakan panel Application, di mana Anda dapat men-debug Service Worker (pendaftaran, status, cache, push), memeriksa manifest, membersihkan cache dan membuat pemberitahuan push sendiri untuk pengujian. Tab Network dengan emulasi mode offline membantu memeriksa kerja cache. Lighthouse di panel Audits memberikan audit PWA lengkap dengan rekomendasi.

Workbox — pustaka dari Google yang menyederhanakan pembuatan Service Worker. Alih-alih menulis strategi caching secara manual, Workbox menawarkan modul siap pakai:

import { precacheAndRoute } from 'workbox-precaching';
import { registerRoute } from 'workbox-routing';
import { StaleWhileRevalidate } from 'workbox-strategies';

precacheAndRoute(self.__WB_MANIFEST);

registerRoute(
  /\.(?:png|jpg|jpeg|svg|gif)$/,
  new StaleWhileRevalidate()
);

Workbox terintegrasi dengan bundler (Webpack, Vite) dan secara otomatis menghasilkan manifest precache. PWA Builder (pwabuilder.com) dari Microsoft menghasilkan semua file PWA secara online: Service Worker, manifest, ikon, template HTML.