Progressive Web App: Bekerja dengan Workbox

1. Selamat Datang

Dalam lab ini, Anda akan mengambil situs dengan pekerja layanan yang ada dan mengonversinya agar menggunakan Workbox. Codelab ini adalah kedua dalam serangkaian codelab pendamping untuk workshop Progressive Web App. Codelab sebelumnya adalah Going Offline. Ada enam codelab lagi dalam seri ini.

Yang akan Anda pelajari

  • Mengonversi Pekerja Layanan yang ada untuk menggunakan Workbox
  • Menambahkan penggantian offline ke PWA

Yang perlu Anda ketahui

  • HTML dan JavaScript dasar

Yang akan Anda butuhkan

2. Memulai Persiapan

Mulai dengan meng-clone atau mendownload kode awal yang diperlukan untuk menyelesaikan codelab ini:

Jika Anda meng-clone repo, pastikan Anda berada di cabang pwa03--workbox. File ZIP juga berisi kode untuk cabang tersebut.

Basis kode ini memerlukan Node.js 14 atau yang lebih baru. Setelah kode tersedia, jalankan npm ci dari command line di folder kode untuk menginstal semua dependensi yang Anda perlukan. Kemudian, jalankan npm start untuk memulai server pengembangan codelab.

File README.md kode sumber memberikan penjelasan untuk semua file yang didistribusikan. Selain itu, berikut adalah file utama yang sudah ada dan akan Anda gunakan selama codelab ini:

File Utama

  • service-worker.js - File pekerja layanan aplikasi
  • offline.html - HTML offline yang akan digunakan saat halaman tidak tersedia

3. Bermigrasi ke Workbox

Dengan melihat pekerja layanan yang ada, pra-pengambilan cache tampaknya dapat dibagi menjadi dua langkah:

  • Menyimpan file yang relevan dalam cache selama penginstalan Pekerja Layanan
  • Sajikan file tersebut lagi dengan strategi Hanya Cache

File index.html dan rute / masih masuk akal untuk di-pra-cache, karena HTML aplikasi web ini tidak akan banyak berubah, tetapi file lain, seperti CSS dan JavaScript, dapat berubah dan kita tidak benar-benar ingin melalui seluruh siklus proses Service Worker setiap kali file tersebut berubah. Selain itu, service worker saat ini hanya memperhitungkan sebagian kecil CSS dan JavaScript kita, kita ingin semuanya tercakup. Meng-cache item ini dengan strategi Stale While Revalidate lebih masuk akal; respons cepat yang dapat diperbarui di latar belakang sesuai kebutuhan.

Meninjau kembali pra-penyimpanan dalam cache

Saat bermigrasi ke Workbox, kita tidak perlu menyimpan kode yang ada, jadi hapus semua yang ada di service-worker.js. Di lab sebelumnya, kita telah menyiapkan Service Worker ini untuk dikompilasi, sehingga kita dapat menggunakan Impor ESModule di sini untuk memanggil Workbox dari modul NPM-nya. Mari kita mulai dengan meninjau kembali pra-penyimpanan dalam cache. Di service-worker.js, tambahkan kode berikut:

import { warmStrategyCache } from 'workbox-recipes';
import { CacheFirst } from 'workbox-strategies';
import { registerRoute } from 'workbox-routing';
import { CacheableResponsePlugin } from 'workbox-cacheable-response';
import { ExpirationPlugin } from 'workbox-expiration';

// Set up page cache
const pageCache = new CacheFirst({
  cacheName: 'page-cache',
  plugins: [
    new CacheableResponsePlugin({
      statuses: [0, 200],
    }),
    new ExpirationPlugin({
      maxAgeSeconds: 30 * 24 * 60 * 60,
    }),
  ],
});

warmStrategyCache({
  urls: ['/index.html', '/'],
  strategy: pageCache,
});

registerRoute(({ request }) => request.mode === 'navigate', pageCache);

Penjelasan

Untuk menyiapkan pra-penyimpanan cache untuk /index.html dan /, ada lima modul yang dapat diambil. Meskipun mungkin terlihat banyak, kode ini jauh lebih canggih daripada kode yang ditulis sebelumnya.

Proses ini dimulai dengan menyiapkan strategi caching Cache First baru, yang dipilih sebagai pengganti strategi Cache Only agar halaman lain dapat ditambahkan ke cache sesuai kebutuhan. Nama diberikan untuknya, page-cache. Strategi Workbox dapat menggunakan sejumlah plugin yang dapat memengaruhi siklus proses penyimpanan dan pengambilan konten dari cache. Di sini, dua plugin, yaitu plugin Cacheable Response dan plugin Expiration, digunakan untuk memastikan hanya respons server yang baik yang di-cache, dan setiap item dalam cache akan dihapus setelah 30 hari.

Selanjutnya, cache strategi akan diisi dengan /index.html dan / menggunakan resep Workbox untuk mengisi cache strategi. Tindakan ini akan menambahkan item tersebut ke cache ini selama peristiwa penginstalan pekerja layanan.

Terakhir, rute baru didaftarkan. Setiap permintaan yang merupakan navigasi halaman akan dikelola oleh strategi Cache First ini, baik dengan mengambil dari cache atau jaringan, lalu meng-cache respons.

Aset dalam cache

Setelah pra-pengambilan rute diurutkan, saatnya menerapkan kembali penyimpanan dalam cache untuk aset situs; yaitu CSS dan JavaScript. Untuk melakukannya, tambahkan StaleWhileRevalidate ke impor workbox-strategies Anda terlebih dahulu, lalu tambahkan kode berikut ke bagian bawah Service Worker Anda:

// Set up asset cache
registerRoute(
  ({ request }) => ['style', 'script', 'worker'].includes(request.destination),
  new StaleWhileRevalidate({
    cacheName: 'asset-cache',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
    ],
  }),
);

Penjelasan

Rute ini dimulai dengan menentukan apakah jenis permintaan adalah gaya, skrip, atau pekerja, yang sesuai dengan CSS, JavaScript, atau Web Workers. Jika ya, strategi Stale While Revalidate akan digunakan, yang mencoba menayangkan dari cache terlebih dahulu, lalu kembali ke jaringan jika tidak tersedia, sambil mencoba mengupdate versi dalam cache dari jaringan jika memungkinkan. Seperti strategi halaman, strategi ini hanya akan menyimpan respons yang baik dalam cache.

4. Menambahkan penggantian offline

Dengan pekerja layanan asli yang dimigrasikan ke Workbox, ada satu hal lagi yang perlu dilakukan untuk mencegah PWA mengalami error saat offline; menambahkan penggantian offline.

Penggantian offline dapat ditetapkan untuk apa pun yang mungkin tidak tersedia saat offline: halaman, font, CSS, JavaScript, gambar, dll.... Setidaknya, penggantian halaman harus ditetapkan untuk semua PWA sehingga jika pengguna membuka halaman yang tidak ada dalam cache, mereka akan tetap berada dalam konteks aplikasi Anda.

Resep Workbox menyediakan resep penggantian offline yang dapat digunakan untuk melakukan hal ini. Untuk menggunakannya, pertama-tama tambahkan offlineFallback ke impor workbox-recipes Anda, lalu tambahkan kode berikut ke bagian bawah Service Worker Anda:

// Set up offline fallback
offlineFallback({
  pageFallback: '/offline.html',
});

Penjelasan

Resep penggantian offline menyiapkan strategi Hanya Cache yang di-warm-up dengan penggantian yang disediakan. Kemudian, kode ini menyiapkan handler error default Workbox, menangkap semua permintaan perutean yang gagal (jika tidak ada apa pun dalam cache dan sesuatu tidak dapat dijangkau di jaringan), menarik konten file yang relevan dari cache dan menampilkannya sebagai konten selama permintaan terus gagal.

5. Selamat!

Anda telah mempelajari cara menggunakan Workbox untuk menyiapkan strategi caching untuk rute dan menyediakan penggantian offline untuk PWA Anda.

Codelab berikutnya dalam seri ini adalah IndexedDB