Menyimpan aset dalam cache dengan pekerja layanan dapat mempercepat kunjungan berulang dan memberikan dukungan offline. Workbox memudahkan proses ini dan disertakan dalam Create React App secara default.
Workbox
terintegrasi dalam
Membuat Aplikasi React (CRA) dengan konfigurasi default yang melakukan pra-cache semua
aset statis di aplikasi Anda pada setiap build.
![Permintaan/respons dengan pekerja layanan](https://web.developers.google.cn/static/articles/precache-with-workbox-react/image/requestsresponses-servi-008f1f41abc53.png?authuser=7&hl=id)
Mengapa hal ini bermanfaat?
Pekerja layanan memungkinkan Anda menyimpan resource penting dalam cache-nya (precache) sehingga saat pengguna memuat halaman web untuk kedua kalinya, browser dapat mengambilnya dari pekerja layanan alih-alih membuat permintaan untuk jaringan. Hal ini menghasilkan pemuatan halaman yang lebih cepat pada kunjungan berulang serta pada yang dapat memunculkan konten saat pengguna sedang offline.
Kotak kerja di CRA
Workbox adalah kumpulan alat yang memungkinkan Anda membuat dan mengelola layanan
pekerja. Di CRA, atribut
workbox-webpack-plugin
sudah disertakan ke dalam build produksi dan hanya perlu diaktifkan di
file src/index.js
agar dapat mendaftarkan pekerja layanan baru dengan setiap
bangun:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
serviceWorker.register();
Berikut adalah contoh aplikasi React yang di-build dengan CRA dan memiliki pekerja layanan yang diaktifkan melalui file ini:
Untuk melihat aset mana yang di-cache:
- Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Lalu tekan
Layar penuh
.
- Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
- Klik tab Jaringan.
- Muat ulang aplikasi.
Anda akan melihat bahwa kolom Size
menunjukkan bahwa bukannya
menampilkan ukuran payload
pesan (from ServiceWorker)
untuk menunjukkan bahwa resource ini telah diambil
dari pekerja layanan.
Karena pekerja layanan menyimpan semua aset statis ke dalam cache, cobalah untuk menggunakan aplikasi saat offline:
- Di tab Jaringan di DevTools, aktifkan kotak centang Offline untuk melakukan simulasi pengalaman offline.
- Muat ulang aplikasi.
Aplikasi ini bekerja dengan cara yang sama persis, bahkan tanpa jaringan koneksi!
Mengubah strategi penyimpanan dalam cache
Strategi pra-cache default yang digunakan oleh Workbox di CRA adalah cache-first, dengan semua aset statis diambil dari cache pekerja layanan, dan jika gagal (misalnya jika resource tidak di-cache), permintaan jaringan akan dibuat. Ini adalah bagaimana konten masih dapat ditayangkan kepada pengguna bahkan saat mereka berada status offline.
Meskipun Workbox memberikan dukungan untuk menentukan strategi dan pendekatan yang berbeda
untuk meng-cache sumber daya statis dan dinamis, konfigurasi default di CRA tidak bisa
dimodifikasi atau ditimpa kecuali jika
Anda mengeluarkan sepenuhnya. Namun, ada
proposal terbuka
guna mempelajari cara menambahkan dukungan untuk file workbox.config.js
eksternal. Ini
akan memungkinkan pengembang untuk mengganti
pengaturan {i>default<i} hanya dengan membuat
file workbox.config.js
tunggal.
Menangani strategi yang mendahulukan cache
Mengandalkan cache pekerja layanan terlebih dahulu, kemudian beralih kembali ke jaringan adalah cara terbaik untuk membuat situs yang dimuat lebih cepat pada kunjungan berikutnya dan bekerja secara {i>offline<i} sampai batas tertentu. Namun, ada beberapa hal yang perlu dipertimbangkan:
- Bagaimana perilaku caching oleh pekerja layanan dapat diuji?
- Haruskah ada pesan untuk pengguna agar mereka tahu bahwa mereka sedang melihat konten dalam cache?
CRA dokumentasi menjelaskan poin-poin ini, dan banyak lagi, secara rinci.
Kesimpulan
Gunakan pekerja layanan untuk melakukan precache resource penting di aplikasi Anda untuk memberikan pengalaman yang lebih cepat bagi pengguna Anda serta dukungan offline.
- Jika Anda menggunakan CRA, aktifkan pekerja layanan yang telah dikonfigurasi sebelumnya di
src/index.js
. - Jika Anda tidak menggunakan CRA untuk mem-build aplikasi React, sertakan salah satu
banyak library yang disediakan Workbox, seperti
workbox-webpack-plugin
, ke dalam proses build project. - Memantau kapan CRA akan mendukung file pengganti
workbox.config.js
dalam Masalah GitHub.