Cache storage pada PWA

Pada artikel kali ini kita akan membahas mengenai cache storage pada Progressive Web App. Saya akan memperlihatkan hasil caching di browser Chrome pada menu More Tools – Developer Tools seperti gambar di bawah ini.

Dari pemilihan menu di atas kita mendapatkan informasi seperti berikut ini:

Cache ini merupakan implementasi dari Instalasi Service Worker seperti yang telah kita bahas sebelumnya.
Source dari service worker terkait di atas adalah:

var dataCacheName = 'weatherData-v1';
var cacheName = 'weatherPWA-final-1';
var filesToCache = [
  '/',
  '/index.html',
  '/scripts/app.js',
  '/styles/inline.css',
  '/images/clear.png',
  '/images/cloudy-scattered-showers.png',
  '/images/cloudy.png',
  '/images/fog.png',
  '/images/ic_add_white_24px.svg',
  '/images/ic_refresh_white_24px.svg',
  '/images/partly-cloudy.png',
  '/images/rain.png',
  '/images/scattered-showers.png',
  '/images/sleet.png',
  '/images/snow.png',
  '/images/thunderstorm.png',
  '/images/wind.png'
];

self.addEventListener('install', function(e) {
  console.log('[ServiceWorker] Install');
  e.waitUntil(
    caches.open(cacheName).then(function(cache) {
      console.log('[ServiceWorker] Caching app shell');
      return cache.addAll(filesToCache);
    })
  );
});

Di sini kita
a. menentukan nama cache
b. menentukan file-file yang akan dicache
c. membuka object caches dan mengcache file-file tersebut

Informasi lebih lanjut silahkan mengunjungi
1. https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/
2. https://developers.google.com/web/progressive-web-apps/ .
3. Progressive Web Apps Training di https://developers.google.com/web/ilt/pwa/ .
4. https://developers.google.com/web/fundamentals/primers/service-workers/ .

Kunjungi www.proweb.co.id untuk menambah wawasan anda.