Anda telah memublikasikan PWA: beberapa pengguna menggunakannya dari browser, yang lain menginstalnya di perangkat mereka. Saat Anda mengupdate aplikasi, penting untuk menerapkan praktik terbaik guna menghindari kesalahan.
Anda dapat memperbarui:
- Data aplikasi.
- Aset sudah di-cache di perangkat.
- File pekerja layanan, atau dependensinya.
- Metadata manifes.
Mari kita lihat praktik terbaik untuk setiap elemen ini.
Mengupdate data
Untuk memperbarui data, seperti yang disimpan di IndexedDB, Anda dapat menggunakan alat seperti Fetch, WebRTC, atau WebSockets API. Jika aplikasi Anda mendukung fitur offline, ingatlah untuk selalu memperbarui data yang mendukung fitur tersebut.
Di browser yang kompatibel, ada opsi untuk menyinkronkan data, tidak hanya saat pengguna membuka PWA tetapi juga di latar belakang. Opsi tersebut adalah:
- Sinkronisasi latar belakang: menyimpan permintaan yang gagal dan mencoba lagi menggunakan sinkronisasi dari pekerja layanan.
- Sinkronisasi latar belakang berkala web: menyinkronkan data secara berkala di latar belakang, pada waktu tertentu, memungkinkan aplikasi memberikan data yang telah diperbarui meskipun pengguna belum membuka aplikasi.
- Pengambilan Latar Belakang: mendownload file berukuran besar, meskipun saat PWA ditutup.
- Web push: mengirim pesan dari server yang mengaktifkan pekerja layanan dan memberi tahu pengguna. Ini biasa disebut 'notifikasi push'. API ini memerlukan izin pengguna.
Semua API ini dijalankan dari konteks pekerja layanan. Fitur tersebut saat ini hanya tersedia di browser berbasis Chromium, di Android, dan sistem operasi desktop. Bila menggunakan salah satu API ini, Anda bisa menjalankan kode di thread service worker; misalnya, untuk mengunduh data dari server dan memperbarui data IndexedDB.
Memperbarui aset
Memperbarui aset mencakup semua perubahan pada file yang Anda gunakan untuk merender antarmuka aplikasi, seperti HTML, CSS, JavaScript, dan gambar. Misalnya, perubahan pada logika aplikasi, gambar yang merupakan bagian dari antarmuka, atau stylesheet CSS.
Memperbarui pola
Berikut adalah beberapa pola umum untuk menangani update aplikasi, tetapi Anda selalu dapat menyesuaikan prosesnya dengan kebutuhan Anda sendiri:
- Pembaruan penuh: setiap perubahan, bahkan perubahan kecil, memicu penggantian seluruh konten cache. Pola ini meniru cara aplikasi khusus perangkat menangani update, dan akan menggunakan lebih banyak bandwidth serta memerlukan waktu lebih lama.
- Pembaruan aset yang diubah: hanya aset yang telah berubah sejak pembaruan terakhir yang akan diganti di cache. Hal ini sering diimplementasikan menggunakan library seperti Workbox. Langkah ini termasuk membuat daftar file yang di-cache, representasi hash file, dan stempel waktu. Dengan informasi ini, pekerja layanan akan membandingkan daftar ini dengan aset yang di-cache dan memutuskan aset mana yang akan diperbarui.
- Setiap aset diperbarui: setiap aset diperbarui satu per satu saat berubah. Strategi tidak berlaku saat memvalidasi ulang yang dijelaskan dalam bab Penayangan adalah contoh pembaruan aset satu per satu.
Waktu pembaruan
Praktik baik lainnya adalah mencari waktu yang tepat untuk memeriksa update dan menerapkannya. Berikut adalah beberapa opsinya:
- Saat pekerja layanan aktif. Tidak ada peristiwa untuk memproses momen ini, tetapi browser akan mengeksekusi kode apa pun dalam cakupan global pekerja layanan saat browser aktif.
- Dalam konteks jendela utama PWA Anda, setelah browser memuat halaman, untuk menghindari pemuatan aplikasi menjadi lebih lambat.
- Saat peristiwa latar belakang dipicu, seperti saat PWA menerima notifikasi push atau sinkronisasi latar belakang diaktifkan. Kemudian, Anda dapat memperbarui cache dan pengguna akan memiliki versi baru aset saat mereka membuka aplikasi lagi.
Info terbaru langsung
Anda juga dapat memilih apakah akan menerapkan update saat aplikasi terbuka (aktif) atau ditutup. Dengan pendekatan tertutup aplikasi, meskipun aplikasi telah mendownload aset baru, aplikasi tidak akan membuat perubahan dan akan menggunakan versi baru pada pemuatan berikutnya.
Update langsung berarti segera setelah aset diperbarui di cache, PWA Anda akan menggantikan aset di pemuatan saat ini. Ini adalah tugas kompleks yang tidak dibahas dalam materi ini. Beberapa alat yang membantu menerapkan pembaruan ini adalah livereload-js dan pembaruan aset CSS CSSStyleSheet.replace() API.
Mengupdate pekerja layanan
Browser memicu algoritma update saat pekerja layanan atau dependensinya berubah. Browser mendeteksi pembaruan menggunakan perbandingan byte-demi-byte antara file yang di-cache dan resource yang berasal dari jaringan.
Kemudian, browser akan mencoba menginstal versi baru dari pekerja layanan, dan pekerja layanan baru akan berada dalam status waiting, seperti yang dijelaskan dalam bab Service worker. Penginstalan baru akan menjalankan peristiwa install
untuk pekerja layanan baru. Jika Anda menyimpan aset dalam cache dalam pengendali peristiwa tersebut, aset juga akan disimpan dalam cache ulang.
Mendeteksi perubahan pekerja layanan
Untuk mendeteksi bahwa pekerja layanan baru sudah siap dan diinstal, kita menggunakan peristiwa updatefound
dari pendaftaran pekerja layanan. Peristiwa ini diaktifkan saat pekerja layanan baru mulai diinstal. Kita harus menunggu statusnya berubah menjadi installed
dengan peristiwa statechange
; lihat hal berikut:
async function detectSWUpdate() {
const registration = await navigator.serviceWorker.ready;
registration.addEventListener("updatefound", event => {
const newSW = registration.installing;
newSW.addEventListener("statechange", event => {
if (newSW.state == "installed") {
// New service worker is installed, but waiting activation
}
});
})
}
Penggantian paksa
Pekerja layanan baru akan diinstal, tetapi menunggu aktivasi secara default. Proses ini mencegah pekerja layanan baru mengambil alih klien lama yang mungkin tidak kompatibel dengan versi baru.
Meskipun tidak direkomendasikan, pekerja layanan baru dapat melewati periode tunggu tersebut dan segera memulai aktivasi.
self.addEventListener("install", event => {
// forces a service worker to activate immediately
self.skipWaiting();
});
self.addEventListener("activate", event => {
// when this SW becomes activated, we claim all the opened clients
// they can be standalone PWA windows or browser tabs
event.waitUntil(clients.claim());
});
Peristiwa controllerchange
aktif saat pekerja layanan yang mengontrol halaman saat ini berubah. Misalnya, pekerja baru telah melewati waktu tunggu dan menjadi pekerja aktif baru.
navigator.serviceWorker.addEventListener("controllerchange", event => {
// The service worker controller has changed
});
Memperbarui metadata
Anda juga dapat memperbarui metadata aplikasi, yang sebagian besar ditetapkan dalam manifes aplikasi web. Misalnya, perbarui ikon, nama, atau URL awalnya, atau Anda dapat menambahkan fitur baru seperti pintasan aplikasi. Namun, apa yang terjadi pada semua pengguna yang telah menginstal aplikasi dengan ikon lama di perangkat mereka? Bagaimana dan kapan mereka mendapatkan versi terbaru?
Jawabannya tergantung pada platform. Mari kita bahas opsi yang tersedia.
Safari di browser iOS, iPadOS, dan Android
Pada platform ini, satu-satunya cara untuk mendapatkan metadata manifes baru adalah dengan menginstal ulang aplikasi dari browser.
Google Chrome di Android dengan WebAPK
Saat pengguna menginstal PWA Anda di Android menggunakan Google Chrome dengan WebAPK yang telah diaktifkan (sebagian besar penginstalan PWA Chrome), update akan terdeteksi dan diterapkan berdasarkan algoritme. Lihat detailnya dalam artikel pembaruan manifes ini.
Beberapa catatan tambahan tentang proses ini:
Jika pengguna tidak membuka PWA Anda, WebAPK-nya tidak akan diupdate. Jika server tidak merespons dengan file manifes (ada error 404), Chrome tidak akan memeriksa update selama minimal 30 hari, meskipun pengguna membuka PWA.
Buka about:webapks
di Chrome pada Android untuk melihat status tanda "perlu update", dan meminta update. Di bab Alat dan debug, Anda dapat membaca alat proses debug ini lebih lanjut.
Samsung Internet di Android dengan WebAPK
Proses ini mirip dengan versi Chrome. Dalam hal ini, jika manifes PWA memerlukan update, dalam 24 jam ke depan WebAPK akan diupdate di Wi-Fi setelah membuat WebAPK yang diupdate.
Google Chrome dan Microsoft Edge di desktop
Di perangkat desktop, saat PWA diluncurkan, browser menentukan kapan terakhir kali memeriksa perubahan di manifes lokal. Jika manifes belum ditinjau sejak browser terakhir dimulai atau belum diperiksa dalam 24 jam terakhir, browser akan membuat permintaan jaringan untuk manifes tersebut, lalu membandingkannya dengan salinan lokal.
Saat properti yang dipilih diperbarui, pembaruan akan dipicu setelah semua jendela ditutup.
Memberi tahu pengguna
Beberapa strategi pembaruan memerlukan pemuatan ulang atau navigasi baru dari klien. Anda perlu memberi tahu pengguna bahwa ada pembaruan yang menunggu, tetapi beri mereka kesempatan untuk memperbarui halaman pada waktu yang terbaik.
Untuk memberi tahu pengguna, ada opsi berikut:
- Gunakan DOM atau kanvas API untuk merender pemberitahuan di layar.
- Gunakan Web Notifications API. API ini adalah bagian dari izin push untuk menghasilkan notifikasi di sistem operasi. Anda harus meminta izin web push untuk menggunakannya, meskipun jika Anda tidak menggunakan protokol pesan push dari server. Ini adalah satu-satunya opsi yang kami miliki jika PWA tidak dibuka.
- Gunakan Badging API untuk menunjukkan bahwa update tersedia di ikon yang diinstal di PWA
.
Selengkapnya tentang Badging API
Badging API memungkinkan Anda menandai ikon PWA dengan nomor badge, atau titik badge di browser yang kompatibel. Titik badge adalah tanda kecil di dalam ikon terinstal yang mengekspresikan sesuatu yang menunggu di dalam aplikasi.
Anda harus memanggil setAppBadge(count)
pada objek navigator
untuk menetapkan nomor badge. Anda bisa melakukan ini dari jendela atau konteks service worker ketika mengetahui ada pembaruan untuk memberi tahu pengguna.
let unreadCount = 125;
navigator.setAppBadge(unreadCount);
Untuk menghapus badge, panggil clearAppBadge()
pada objek yang sama:
navigator.clearAppBadge();
Referensi
- Siklus Proses Service Worker
- Cara Chrome menangani update untuk manifes aplikasi web
- Menyinkronkan dan memperbarui PWA di Latar Belakang
- Pengalaman offline yang lebih kaya dengan Periodic Background Sync API
- API Push
- Ringkasan notifikasi push
- Pemberian badge untuk ikon aplikasi
- Workbox 4: Menerapkan alur refresh-ke-update-versi menggunakan modul workbox-window