https://schlagdasass.at/service-worker.js

1self.addEventListener('install', function (event) {
2    console.log('installing service worker...', event);
3});
4
5const isFont = request => request.destination === 'font' || request.url.match(/.*\.(woff|woff2|ttf|otf|eot)\??[^\/]*$/i);
6const isExternal = request => !request.url.startsWith(self.location.origin);
7const isDebugFile =  request => request.url.match(/\/static\/debug\//g);
8const isStyle = request => request.destination === 'style' || request.url.match(/.*\.css\??[^\/]*$/i);
9const isCacheBustedFile = request => request.url.match(/cache-buster-\d*\//);
10
11const CACHE_NAME = 'CACHE_NAME_V1';
12self.addEventListener('fetch', function (event) {
13    // console.log('requested', event.request.url);
14
15    if (
16        isDebugFile(event.request) ||
17        isExternal(event.request) ||
18        event.request.headers.get('range') //fix safari video loading bug https://philna.sh/blog/2018/10/23/service-workers-beware-safaris-range-request/
19    ) {
20        // don't handle those files -> use standard browser behavior
21        return;
22    }
23
24    if (isFont(event.request)) {
25        respondWithCacheAndNetworkFallback(event);
26        return;
27    }
28
29    // css caching:
30    // check if cache busted css
31    if (isStyle(event.request) && isCacheBustedFile(event.request)) {
32        // remove cache-buster-part
33        let unbustedName = event.request.url.replace(/cache-buster-\d*\//, '');
34
35        // respond with cache and update
36        // todo: this could be improved:
37        // -- check if the real file (same cache-buster-id) is already cached and then it doesn't need to be updated
38        //    -> this could save a unnecessary request
39        // -- delete old files (with other cache-buster-id than the real one)
40        respondWithCacheAndUpdate(event, unbustedName);
41
42        // set cookie to tell server that css is cached
43        event.waitUntil(async function() {
44            // Exit early if we don't have access to the client.
45            // Eg, if it's cross-origin.
46            if (!event.clientId) return;
47
48            // Get the client.
49            const client = await clients.get(event.clientId);
50            // Exit early if we don't get the client.
51            // Eg, if it closed.
52            if (!client) return;
53
54            // Send a message to the client.
55            client.postMessage({
56                eventName: 'setCookie',
57                data: {name: 'inlinecss-loaded', value: 'true'}
58            });
59
60        }());
61
62        return;
63    }
64});
65
66//function cacheWithNetworkFallback(event) {
67function respondWithCacheAndNetworkFallback(event) {
68    event.respondWith(
69        caches.match(event.request)
70            .then(function (response) {
71                // Cache hit - return response
72                if (response) {
73                    // console.log('found in cache', event.request.url);
74                    return response;
75                }
76
77                return fetchAndUpdateCache(event);
78            })
79    );
80}
81
82// cacheName is the name which is looked for in the cache
83function respondWithCacheAndUpdate(event, cacheName) {
84    event.respondWith(
85        caches.match(cacheName || event.request)
86            .then(function (response) {
87                // Cache hit - return response
88                if (response) {
89                    fetchAndUpdateCache(event, cacheName);
90
91                    // console.log('found in cache', event.request.url);
92                    return response;
93                } else {
94                    return fetchAndUpdateCache(event, cacheName);
95                }
96            })
97    );
98}
99
100// cacheName is the name to be used for the file being put into the cache
101function fetchAndUpdateCache(event, cacheName) {
102    // IMPORTANT: Clone the request. A request is a stream and
103    // can only be consumed once. Since we are consuming this
104    // once by cache and once by the browser for fetch, we need
105    // to clone the response.
106    let fetchRequest = event.request.clone();
107
108    // console.log('fetch from network ', fetchRequest.url);
109    return fetch(fetchRequest).then(
110        function (response) {
111            // Check if we received a valid response
112            if (!response || response.status !== 200 || response.type !== 'basic') {
113                return response;
114            }
115
116            // IMPORTANT: Clone the response. A response is a stream
117            // and because we want the browser to consume the response
118            // as well as the cache consuming the response, we need
119            // to clone it so we have two streams.
120            var responseToCache = response.clone();
121
122            caches.open(CACHE_NAME)
123                .then(function (cache) {
124                    // console.log('put in cache', event.request.url);
125                    cache.put(cacheName || event.request, responseToCache);
126                });
127
128            return response;
129        }
130    )
131}
132