Instalasi Service Worker pada PWA – PT Proweb Indonesia

Pada artikel sebelumnya kita telah membahas mengenai source code Service Worker pada PWA. Pada artikel kali ini kita akan menjelaskan salah satu bagian yaitu instalasi PWA.

Proses instalasi Service Worker Progressive Web App adalah seperti penjelasan berikut ini:

Pada app.js:

  // TODO add service worker code here
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker
             .register('./service-worker.js')
             .then(function() { console.log('Service Worker Registered'); });
  }

Di sini kita akan memasukkan script untuk service-worker.js .

Pada service worker.js:

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.

Instalasi Service Worker pada PWA