[PWA] 11. Serve skeleton cache for root

Posted 2020-07-07 Answer1215

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);
        })
    );
});