Kenapa Workbox ?

Artikel ini saya tulis untuk yang sudah pernah membuat aplikasi dengan serviceWorker. Biasanya saya menggunakan sw-precache dan sw-toolbox untuk strategi caching pada aplikasi PWA saya. karna saya kesulitan dalam hal membuat caching untuk dynamic content, management revision setiap file dan banyal hal lainnya. maka saya berpindah haluan untuk menggunakan workbox.

kenapa Workbox ?

Berdasarkan official docs nya, workbox merupakan best practices untuk penerapan serviceWorker seperti :
- Precaching
- Runtime caching
- Strategies
- Request routing
- Background sync
- Helpful debugging
- Greater flexibility and feature set than sw-precache and sw-toolbox

Contoh perbedaan syntax pada strategi cache Stale-while-revalidate.

Workbox ServiceWorker :

workbox.routing.registerRoute(
  new RegExp('/images/'),
  workbox.strategies.staleWhileRevalidate()
);

ServiceWorker :

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.open('images').then(function(cache) {
      return cache.match(event.request).then(function(response) {
        var fetchPromise =  fetch(event.request).then(function(networkResponse) {
          cache.put(event.request, networkResponse.clone());
          return networkResponse;
        })
        return response || fetchPromise;
      })
    })
  );
});

Dapat kita lihat perbedaan code diatas. dalam workbox kita juga bisa menambahkan option untuk strategi cache nya, seperti.

workbox.strategies.staleWhileRevalidate({
 cacheName: 'images',
 cacheExpiration: {maxAgeInSeconds: 60*60}
});

berikut contoh perkenalan sedikit tentang workbox, dan masih banyak lagi. seperti background sync, strategi caching dan lain-lain yang membuat penerapan serviceWorker lebih mudah dan lebih readable.

Rasanya kurang pas jika kita tidak praktek dengan menggunakan workbox.

MEMBUAT APLIKASI PERTAMA DENGAN WORKBOX

Untuk sample project bisa didownload disini KLIK DISINI.

Jika project sudah didownload, install workbox-cli dengan perintah

npm install workbox-cli --global

jika sudah diinstall maka jalankan wizard untuk setup workbox kedalam project kamu.

workbox wizard --injectManifest

contoh bisa diliat disini.

Workbox wizard

Jika workbox wizard sudah dijalankan maka buka workbox-config.js

Workbox-config.js

GlobalDirectory : merupakan folder root project kita.

GlobalPatterns : informasi jenis file apa saja yang ingin kita cache. perhatikan **/*.{html, .. dst} yang berarti setiap file yang berekstensi file tersebut didalam folder akan dicache. kamu bisa mengubah config di workbix-config jika hanya ingin meng-cache file html atau js saja.

swDest : Letak file serviceworker setelah digenerate.

swSrc : Letak file development serviceWorker kita.

Nah, jika workbox-config.js sudah kita atur, maka selanjutnya kita buat file devSw.js sesuai dengan swSrc kita.

jika sudah dibuat, masukkan kode ini kedalam devSw.js kita.

importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.6.1/workbox-sw.js');
workbox.precaching.precacheAndRoute([]);

berikut contohnya.

jika sudah, maka jalankan perintah workbox injectManifest didalam command line kita.

workbox injectManifest

setelah dijalankan maka file sw.js akan digenerate sesuai dengan swDest pada workbox-config.js yg kita buat. berikut hasil generatenya.

dapat kita lihat ada file baru yg digenerate yaitu sw.js. sw.js digenerate secara otomatis berdasarkan globpattern dan devSw.js yg kita buat. pada sw.js kita bisa melihat ada file revision yang bertujuan agar browser dapat mengenali file mana yang kita ubah. mari kita bahas jika kita tidak menggunakan file revision.

berikut contoh dasar apabila kita tidak menggunakan file revision pada serviceWorker kita. dapat kita lihat apabila tidak ada file revision pada file kita browser tidak akan mengenali/mengupdate file tersebut. nah apabila kita menggunakan file revision setiap ada perubahan pada file yang ingin kita cache maka revision code nya akan berubah. berikut contohnya.

Sebelum mengubah file 404.html

Setelah diubah file 404.html

perhatikan file 404.html dan revision pada sw.js, setiap ada perubahan maka revision codenya juga akan berubah, dengan demikian maka browser tau kapan harus mengupdate file yang kita cache. HOREEEE !!!

nah jika kita sudah mengerti maksud dari revision tadi, mari kita coba jalankan aplikasi kita.

KESIMPULAN

Semoga dengan adanya artikel ini, kita dapat memahami cara kerja browser mengcache file kita. Terima Kasih :D.

Sumber : https://developers.google.com/web/tools/workbox/