Service Worker Template

Service worker adalah sebuah mesin yang kita bangun didalam browser kita, berikut adalah script dari service worker lengkap dengan script untuk tombol install.
Sebelumnya didalam head file index kita, mesti ada link rel yang mengarah ke manifest.json, isi manifest.json bisa anda lihat di bagian paling bawah post ini, berikut contoh link rel dari manifest pada head :

<link rel="manifest" href="manifest.json">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

code template paling sederhana dari sw.js adalah sebagai berikut

if ('serviceWorker' in navigator){
    navigator.serviceWorker.register('/sw.js', {scope: './'})
    .then(function(reg){
      console.log('ServiceWorker registration successful with scope: '+ reg.scope);
    })
    .catch(function(err){
      console.log('ServiceWorker registrasi gagal: '+ err);
    });
  }

untuk bentuk yang cukup kompleks dengan fasilitas tombol yang kita buat sendiri untuk menginstal sebagai berikut :
isi dari script.js :

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/sw.js').then(function(registration) {
      console.log('ServiceWorker registration successful with scope: '+ registration.scope);
    }).catch(function(err) {
      console.log('ServiceWorker registrasi gagal: '+ err);
    });
  });
}

let deferredPrompt;
const addBtn = document.querySelector('.add-button');
addBtn.style.display = 'none';
window.addEventListener('beforeinstallprompt', (e) => {
  e.preventDefault();
  deferredPrompt = e;
  addBtn.style.display = 'block';
  addBtn.addEventListener('click', (e) => {
    addBtn.style.display = 'none';
    deferredPrompt.prompt();
    deferredPrompt.userChoice.then((choiceResult) => {
        if (choiceResult.outcome === 'accepted') {
          console.log('User accepted the A2HS prompt');
        } else {
          console.log('User dismissed the A2HS prompt');
        }
        deferredPrompt = null;
      });
  });
});

template code paling sederhana untuk sw.js adalah sebagai berikut :

var cache_name = 'v1';
var urlsToCache = [
  '/index.html',
  '/'
];

self.addEventListener('install', function(ev){
  ev.waitUntil(
    caches.open(cache_name)
      .then(function(cache){
        return cache.addAll(urlsToCache);
      })
  );
});

self.addEventListener('fetch', function(e) {
  e.respondWith(
    caches.match(e.request)
      .then(function(res){
          return res || fetch(e.request);
        })
);
});

untuk bentuk kompleksnya dengan fasilitas update otomatis jika menggunakan website dan website kita update maka aplikasi yang telah dipasang pengguna juga akan berubah. Berikut templatenya :
isi dari sw.js :

var cache_name = 'v1';
var urlsToCache = [
  '/index.html'
];

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(cache_name)
      .then(function(cache) {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Cache hit - return response
        if (response) {
          return response;
        }

        var fetchRequest = event.request.clone();

        return fetch(fetchRequest).then(
          function(response) {
            if(!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }

            var responseToCache = response.clone();

            caches.open(cache_name)
              .then(function(cache) {
                cache.put(event.request, responseToCache);
              });

            return response;
          }
        );
      })
    );
});

self.addEventListener('activate', function(event) {

  var cacheKeeplist = ['v2'];

  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.map(function(cacheName) {
          if (cacheKeeplist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

Untuk membuat menifest dengan mudah, anda bisa mengunjungi app-manifest, atau untuk website manifest generator yang semi manual bisa anda coba di link web app manisfet
berikut adalah contoh file manifest.json yang pernah saya buat untuk pengaturan icon, splash screen dll :

{
  "name": "Absen ONline",
  "short_name": "AbsenOL",
  "theme_color": "#2196f3",
  "background_color": "#2196f3",
  "display": "standalone",
  "Scope": "/",
  "start_url": "/index.html",
  "icons": [
    {
      "src": "images/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "splash_pages": null
}

Salahsatu blog berbahasa Indonesia yang dibahas oleh abang Rahmat Subekti tentang service worker dapat kita lirik pada link Mengenal Service Worker
Atau untuk penjelasan service worker berbahasa Inggris, kita dapat langsung menuju ke website developer milik Mozilla pada links berikut :
Developer Mozilla about service worker
Developer Google about service worker
Cookbook service worker