Intead of cache the root floder, we want to cache skeleton instead.
self.addEventListener('install', function (event) { event.waitUntil( caches.open(staticCacheName).then(function (cache) { return cache.addAll([ '/skeleton', 'js/main.js', 'css/main.css', 'imgs/icon.png', 'https://fonts.gstatic.com/s/roboto/v15/2UX7WLTfW3W8TclTUvlFyQ.woff', 'https://fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff' ]); }) ); });
Respond to requests for the root page with thepage skeleton from the cache:
self.addEventListener('fetch', function (event) { // use the page skeleton from the cache let requestUrl = new URL(event.request.url); if(requestUrl.origin === location.origin){ if(requestUrl.pathname === '/'){ event.respondWith( caches.match('/skeleton') ); return; } } event.respondWith( caches.match(event.request).then(function (response) { return response || fetch(event.request); }) ); });