servicework.js

if ('serviceWorker' in navigator) { navigator.serviceWorker.register('worker.js'); } // link to a image file var iconUrl = 'https://www.seeklogo.net/wp-content/uploads/2014/10/Google-Chrome-logo-vector-download.png'; // create the <img> html element // on first load it will request the image // second time it will load it from cache directly thanks to the service worker var imgElement = document.createElement('img'); imgElement.src = iconUrl; 

worker.js

var PRECACHE = 'precache-v1'; var RUNTIME = 'runtime'; // list the files you want cached by the service worker PRECACHE_URLS = [   'index.html',   './', 'style.css',   'main.js' ]; // the rest below handles the installing and caching self.addEventListener('install', event => {   event.waitUntil(   caches.open(PRECACHE).then(cache => cache.addAll(PRECACHE_URLS)).then(self.skipWaiting())   ); }); self.addEventListener('activate', event => { const currentCaches = [PRECACHE, RUNTIME]; event.waitUntil( caches.keys().then(cacheNames => { return cacheNames.filter(cacheName => !currentCaches.includes(cacheName)); }).then(cachesToDelete => { return Promise.all(cachesToDelete.map(cacheToDelete => { return caches.delete(cacheToDelete); })); }).then(() => self.clients.claim()) ); }); self.addEventListener('fetch', event => { if (event.request.url.startsWith(self.location.origin)) { event.respondWith( caches.match(event.request).then(cachedResponse => { if (cachedResponse) { return cachedResponse; } return caches.open(RUNTIME).then(cache => { return fetch(event.request).then(response => { // Put a copy of the response in the runtime cache. return cache.put(event.request, response.clone()).then(() => { return response; }); }); }); }) ); } });