Menyimpan aset dalam cache dengan pekerja layanan dapat mempercepat kunjungan berulang dan memberikan dukungan offline. Workbox memudahkan hal ini dan disertakan dalam Create React App secara default.
Workbox di-build ke dalam
Create React App (CRA) dengan konfigurasi default yang melakukan pracache terhadap semua
aset statis di aplikasi Anda pada setiap build.
Mengapa hal ini bermanfaat?
Pekerja layanan memungkinkan Anda menyimpan resource penting dalam cache-nya (precaching) sehingga ketika pengguna memuat halaman web untuk kedua kalinya, browser dapat mengambilnya dari pekerja layanan, bukan membuat permintaan ke jaringan. Hal ini menghasilkan pemuatan halaman yang lebih cepat pada kunjungan berulang serta kemampuan untuk menampilkan konten saat pengguna sedang offline.
Workbox di CRA
Workbox adalah kumpulan alat yang memungkinkan Anda membuat dan mengelola pekerja
layanan. Dalam CRA, workbox-webpack-plugin sudah disertakan ke dalam build produksi dan hanya perlu diaktifkan dalam file src/index.js untuk mendaftarkan pekerja layanan baru di setiap build:
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 dibuat dengan CRA yang mengaktifkan pekerja layanan 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 Network
- Muat ulang aplikasi.
Anda akan melihat bahwa kolom Size menampilkan
pesan (from ServiceWorker), bukan menampilkan ukuran payload, yang menunjukkan bahwa resource ini diambil
dari pekerja layanan.
Karena pekerja layanan menyimpan semua aset statis ke dalam cache, coba gunakan aplikasi tersebut saat offline:
- Pada tab Jaringan di DevTools, aktifkan kotak centang Offline untuk menyimulasikan pengalaman offline.
- Muat ulang aplikasi.
Aplikasi ini berfungsi dengan cara yang sama persis, bahkan tanpa koneksi jaringan.
Memodifikasi 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. Inilah cara konten tetap dapat ditayangkan kepada pengguna bahkan saat mereka sepenuhnya offline.
Meskipun Workbox menyediakan dukungan untuk menentukan strategi dan pendekatan yang berbeda
untuk menyimpan resource statis dan dinamis ke cache, konfigurasi default dalam CRA tidak dapat
diubah atau ditimpa kecuali jika Anda mengeluarkannya sepenuhnya. Namun, ada
proposal terbuka
untuk mempelajari cara menambahkan dukungan bagi file workbox.config.js eksternal. Hal
ini memungkinkan developer mengganti setelan default hanya dengan membuat
satu file workbox.config.js.
Menangani strategi cache-first
Mengandalkan cache pekerja layanan terlebih dahulu, lalu kembali ke jaringan adalah cara terbaik untuk membuat situs yang dapat dimuat lebih cepat pada kunjungan berikutnya dan bekerja secara offline hingga batas tertentu. Namun, ada beberapa hal yang perlu dipertimbangkan:
- Bagaimana perilaku caching oleh pekerja layanan dapat diuji?
- Haruskah ada pesan bagi pengguna untuk memberi tahu bahwa mereka sedang melihat konten yang disimpan dalam cache?
Dokumentasi CRA menjelaskan poin-poin ini, dan lain-lain, secara mendetail.
Kesimpulan
Gunakan pekerja layanan untuk melakukan precache resource penting dalam aplikasi Anda guna memberikan pengalaman yang lebih cepat bagi pengguna 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 dari
banyak library yang disediakan Workbox, seperti
workbox-webpack-plugin, ke dalam proses build Anda. - Perhatikan kapan CRA akan mendukung file pengganti
workbox.config.jsdalam masalah GitHub ini.