Progressive Web App: Sertakan Service Worker

1. Selamat Datang

Dalam lab ini, Anda akan mengambil aplikasi web yang ada dan menambahkan respons rute streaming untuk meningkatkan performa. Codelab ini adalah codelab ketujuh dalam serangkaian codelab pendamping untuk workshop Progressive Web App. Codelab sebelumnya adalah Memberdayakan PWA Anda. Ada satu codelab lagi dalam seri ini.

Yang akan Anda pelajari

• Menambahkan respons streaming ke pekerja layanan

Yang perlu Anda ketahui

• JavaScript

Yang akan Anda butuhkan

• Browser yang mendukung Pekerja Layanan dan Streaming

2. Memulai Persiapan

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

Meng-clone Repo

Download ZIP

Jika Anda meng-clone repo, pastikan Anda berada di cabang pwa06--service-worker-includes. 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

• js/preview.js - Pratinjau file JavaScript halaman
• service-worker.js - file pekerja layanan PWA

3. Pratinjau Streaming

Halaman pratinjau dapat dibagi menjadi tiga bagian yang jelas: head, body yang dikompilasi, dan footer. Saat ini, isi yang dikompilasi dirender di sisi klien, tetapi tidak ada alasan untuk itu. Mari kita pindahkan ke Service Worker.

Untuk menyusun isi, ada pencarian konten asinkron. Karena pekerjaan asinkron dalam respons navigasi mahal, ini adalah peluang bagus untuk melakukan streaming konten yang diketahui ke browser terlebih dahulu.

Untuk melakukannya, hapus terlebih dahulu konten di js/preview.js untuk memastikan bahwa konten tersebut tidak lagi melakukan kompilasi. Kemudian, di service-worker.js, lakukan hal berikut:

• Impor ekspor bernama strategy dari workbox-streams sebagai streamsStrategy
• Impor ekspor bernama openDB dari idb dan impor ekspor bernama marked dari marked
• Sebelum pendaftaran rute untuk navigasi, tambahkan pendaftaran rute baru
  • Harus memeriksa apakah pathname URL adalah /preview
  • Harus menggunakan strategi streaming yang
    1. Memberikan respons dengan konten preview/index.html melalui area konten tag main
    2. Respons dengan fungsi yang membuka IndexedDB settings-store, mendapatkan konten dari penyimpanan objek settings, dan menampilkan versi konten yang dirender markdown.
    3. Berikan respons dengan tag penutup main, body, dan html.

Pastikan untuk menempatkan pendaftaran rute streaming sebelum pendaftaran navigasi reguler. Pendaftaran rute dieksekusi sesuai urutan penyertaannya dalam pekerja layanan, jadi jika Anda melakukannya secara terbalik, rute streaming tidak akan pernah dieksekusi karena permintaan akan sudah ditangani.

Setelah respons streaming diterapkan, kembali dan buka pratinjau situs di browser Anda. Anda akan melihat bahwa konten halaman kini dirender langsung dari pekerja layanan, tanpa memerlukan kode sisi klien.

Jika Anda tidak melihat perubahan, pastikan service worker baru Anda digunakan oleh halaman Anda dengan memeriksa service worker aktif di tab Service Workers pada panel Applications di Chrome DevTools.

4. Selamat!

Anda telah mempelajari cara membuat aplikasi web Anda tersedia secara offline menggunakan pekerja layanan dan Cache Storage API.

Codelab berikutnya dalam seri ini adalah Bekerja dengan Pekerja