https://dcit-web.web.app/sw.js

1//Minimal Precaching & Runtime Caching ServiceWorker
2
3//https://developers.google.com/web/ilt/pwa/caching-files-with-service-worker
4//https://developers.google.com/web/ilt/pwa/lab-caching-files-with-service-worker
5//https://developer.mozilla.org/en-US/docs/Web/API/FetchEvent/respondWith
6//https://developer.mozilla.org/en-US/docs/Web/API/ExtendableEvent/waitUntil
7
8const filesToCache = [
9          'robots.txt',
10          '/style.css',
11          '/script.js',
12          '/manifest.json',
13          '/icon_512.png',
14          '/maskable_ion.png',
15          '/index.html',
16          '/offline.html',
17          '/404.html',
18          '/router.js',
19          '/route-config.js',
20          '/gallery.html',
21          '/search.html',
22          '/materialize.min.js',
23          '/dataService.js',
24          '/favicon.ico',
25          '/gallery.js',
26          '/search.js'
27        ];
28
29const staticCacheName = 'store-cache-v91';
30
31importScripts('./route-config.js');
32
33//Setting up precaching
34self.addEventListener('install', async event => {
35  // console.log('Attempting to install service worker and cache static assets');
36  
37  self.skipWaiting();
38
39  //create preCache
40  const precache = async()=>{
41    const cache = await caches.open(staticCacheName);
42    return cache.addAll(filesToCache);
43  }
44  
45  //do not finish install until precaching is complete
46  event.waitUntil(precache());
47});
48
49
50self.addEventListener('activate', event => {
51
52  const clearCaches = async ()=>{
53    const keys = await caches.keys();
54    const oldKeys = keys.filter(key => key !== staticCacheName);
55    const promises = oldKeys.map(key=>caches.delete(key));
56    return Promise.all(promises);
57  }
58
59  event.waitUntil(clearCaches());
60
61});
62
63//returns a cached response or undefined
64async function checkCache(request){
65  return caches.match(request);
66}
67
68//stores a response in cache
69async function cacheResponse(url, response){
70  const cache = await caches.open(staticCacheName);
71  cache.put(url, response);
72}
73
74function getPathName(url){
75  const res = url.split('/');
76  const [first, second, third, ...path] = res;
77  return `/${path}`;
78}
79
80//makes a fetch request but checks the cache first
81async function cacheFirstRequest(request){
82
83  try{
84      //requesting a page that is cached or app is online
85    const cachedResponse = await checkCache(request);
86    // const pathname = getPathName(request.url);
87    // const routes = routeConfig.routes.map(route=>route.url);
88    // console.log(routes, pathname, routes.includes(pathname));
89    
90    if(cachedResponse){
91      // console.log('Returning cached response');
92      return cachedResponse;
93    }else{
94      const newResponse = await fetch(request);      
95      if(newResponse.status === 404){
96        // console.log('Returning index')
97        return caches.match(`index.html`);
98      }else{
99        const clone = await newResponse.clone();
100        cacheResponse(request.url, clone);
101        // console.log('Returning new response');
102        return newResponse;
103      }
104    }
105
106  }catch(e){
107    console.error(e);
108    //requesting a page offline and is not cached
109    return caches.match('/offline.html');
110  }
111
112}
113
114//Setting up runtime caching, resources not precached would be cached when requested
115self.addEventListener('fetch', event => {
116  // console.log('Fetch event for ', event.request.url);
117  // Prevent the default, and handle the request ourselves.
118  //console.log(event.request.url);
119  event.respondWith(cacheFirstRequest(event.request));
120});