https://www.apstudynotes.org/service-worker.js

1/* global self, Request, fetch, caches */
2
3'use strict'
4
5// Incrementing CACHE_VERSION will kick off the install event and force previously cached
6// resources to be cached again.
7const CACHE_VERSION = 1
8const CURRENT_CACHES = {
9  offline: 'offline-v' + CACHE_VERSION
10}
11const OFFLINE_URL = 'offline.html'
12
13function createCacheBustedRequest (url) {
14  const request = new Request(url, { cache: 'reload' })
15  // See https://fetch.spec.whatwg.org/#concept-request-mode
16  // This is not yet supported in Chrome as of M48, so we need to explicitly check to see
17  // if the cache: 'reload' option had any effect.
18  if ('cache' in request) {
19    return request
20  }
21
22  // If {cache: 'reload'} didn't have any effect, append a cache-busting URL parameter instead.
23  const bustedUrl = new URL(url, self.location.href)
24  bustedUrl.search += (bustedUrl.search ? '&' : '') + 'cachebust=' + Date.now()
25  return new Request(bustedUrl)
26}
27
28self.addEventListener('install', event => {
29  event.waitUntil(
30    // We can't use cache.add() here, since we want OFFLINE_URL to be the cache key, but
31    // the actual URL we end up requesting might include a cache-busting parameter.
32    fetch(createCacheBustedRequest(OFFLINE_URL)).then(function (response) {
33      return caches.open(CURRENT_CACHES.offline).then(function (cache) {
34        return cache.put(OFFLINE_URL, response)
35      })
36    })
37  )
38})
39
40self.addEventListener('activate', event => {
41  // Delete all caches that aren't named in CURRENT_CACHES.
42  // While there is only one cache in this example, the same logic will handle the case where
43  // there are multiple versioned caches.
44  const expectedCacheNames = Object.keys(CURRENT_CACHES).map(function (key) {
45    return CURRENT_CACHES[key]
46  })
47
48  event.waitUntil(
49    caches.keys().then(cacheNames => {
50      return Promise.all(
51        cacheNames.map(cacheName => {
52          if (expectedCacheNames.indexOf(cacheName) === -1) {
53            // If this cache name isn't present in the array of "expected" cache names,
54            // then delete it.
55            console.log('Deleting out of date cache:', cacheName)
56            return caches.delete(cacheName)
57          }
58          return null
59        })
60      )
61    })
62  )
63})
64
65self.addEventListener('fetch', event => {
66  // We only want to call event.respondWith() if this is a navigation request
67  // for an HTML page.
68  // request.mode of 'navigate' is unfortunately not supported in Chrome
69  // versions older than 49, so we need to include a less precise fallback,
70  // which checks for a GET request with an Accept: text/html header.
71  if (event.request.mode === 'navigate' ||
72      (event.request.method === 'GET' &&
73       event.request.headers.get('accept').includes('text/html'))) {
74    console.log('Handling fetch event for', event.request.url)
75    event.respondWith(
76      fetch(event.request).catch(error => {
77        // The catch is only triggered if fetch() throws an exception, which will most likely
78        // happen due to the server being unreachable.
79        // If fetch() returns a valid HTTP response with an response code in the 4xx or 5xx
80        // range, the catch() will NOT be called. If you need custom handling for 4xx or 5xx
81        // errors, see https://github.com/GoogleChrome/samples/tree/gh-pages/service-worker/fallback-response
82        console.log('Fetch failed; returning offline page instead.', error)
83        return caches.match(OFFLINE_URL)
84      })
85    )
86  }
87
88  // If our if() condition is false, then this fetch handler won't intercept the request.
89  // If there are any other fetch handlers registered, they will get a chance to call
90  // event.respondWith(). If no fetch handlers call event.respondWith(), the request will be
91  // handled by the browser as if there were no service worker involvement.
92})