Update

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.

Catatan: Web Push API adalah satu-satunya API yang memberi tahu pengguna dari latar belakang dan pesan push-nya dapat menyertakan data dalam jumlah kecil: API ini dapat membawa payload hingga sekitar 2 KB.

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.

Peringatan: Saat memeriksa update, pastikan Anda tidak mengganggu proses pemuatan dan memengaruhi performa aplikasi. Jangan menunggu pemeriksaan update sebelum merender aplikasi karena akan membahayakan pengalaman pengguna dan merefleksikan data web inti Anda. Jika Anda perlu sering mengupdate bagian aplikasi Anda, gunakan strategi penyimpanan dalam cache yang sudah tidak berlaku saat memvalidasi ulang.

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.

Perhatian: Jika Anda menghapus atau mengganti nama file pekerja layanan, browser tidak akan menghapus pekerja layanan yang sebelumnya terdaftar dari kliennya. Untuk sepenuhnya menghapus pekerja layanan, Anda harus menggunakan metode getRegistrations() dan unregister().

Catatan: Menginstal versi pekerja layanan baru tidak secara otomatis menghapus aset yang di-cache sebelumnya. Anda harus secara eksplisit menghapus aset yang tidak lagi diperlukan.

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.

Perhatian: skipWaiting() berarti pekerja layanan baru Anda mungkin mengontrol halaman yang dimuat dengan versi lama. Ini berarti beberapa pengambilan halaman akan ditangani oleh pekerja layanan yang lama, tetapi pekerja layanan baru akan menangani pengambilan berikutnya. Jika hal ini dapat mencegah aplikasi Anda berfungsi, jangan gunakan skipWaiting(). Peringatan ini berasal dari siklus proses pekerja layanan. Baca artikel untuk mendapatkan saran praktik terbaik lainnya.

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.

Properti id mengidentifikasi PWA Anda secara unik; mengubah id berarti PWA Anda akan dianggap sebagai PWA yang benar-benar baru. Untuk menghindari perilaku yang tidak diharapkan, sebelum Anda menetapkan atau mengubah properti id, baca Mengidentifikasi PWA secara unik dengan properti ID manifes aplikasi web.

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.

Catatan: Jika Anda memodifikasi start_url, browser dapat menginstal aplikasi sebagai aplikasi yang benar-benar baru. Namun, sudah menjadi praktik umum untuk menambahkan ID versi manual dalam properti start_url, seperti /?version=3 untuk mengidentifikasi versi. Mulai Chrome 96, Anda dapat menambahkan id ke dalam manifes untuk mengidentifikasi aplikasi.

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();

Catatan: Badging API bekerja dengan mekanisme upaya terbaik; browser akan melakukan yang terbaik untuk mencocokkan permintaan Anda, tetapi terkadang browser akan kembali ke pendekatan yang berbeda. Misalnya, nomor badge tidak tersedia di beberapa perangkat Android, sehingga badge titik akan digunakan, berapa pun angka yang Anda tentukan.

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