135 lines
6.0 KiB
JavaScript
135 lines
6.0 KiB
JavaScript
/*
|
|
Copyright 2015, 2019, 2020 Google LLC. All Rights Reserved.
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
you may not use this file except in compliance with the License.
|
|
You may obtain a copy of the License at
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
Unless required by applicable law or agreed to in writing, software
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
See the License for the specific language governing permissions and
|
|
limitations under the License.
|
|
*/
|
|
|
|
// Incrementing OFFLINE_VERSION will kick off the install event and force
|
|
// previously cached resources to be updated from the network.
|
|
const OFFLINE_VERSION = 1;
|
|
const CACHE_NAME = "offline";
|
|
// Customize this with a different URL if needed.
|
|
const OFFLINE_URL = "/offline/";
|
|
|
|
self.addEventListener("install", (event) => {
|
|
event.waitUntil(
|
|
(async () => {
|
|
const cache = await caches.open(CACHE_NAME);
|
|
// Setting {cache: 'reload'} in the new request will ensure that the
|
|
// response isn't fulfilled from the HTTP cache; i.e., it will be from
|
|
// the network.
|
|
await cache.add(new Request(OFFLINE_URL, {cache: "reload"}));
|
|
})()
|
|
);
|
|
// Force the waiting service worker to become the active service worker.
|
|
self.skipWaiting();
|
|
});
|
|
|
|
self.addEventListener("activate", (event) => {
|
|
event.waitUntil(
|
|
(async () => {
|
|
// Enable navigation preload if it's supported.
|
|
// See https://developers.google.com/web/updates/2017/02/navigation-preload
|
|
if ("navigationPreload" in self.registration) {
|
|
await self.registration.navigationPreload.enable();
|
|
}
|
|
})()
|
|
);
|
|
|
|
// Tell the active service worker to take control of the page immediately.
|
|
self.clients.claim();
|
|
});
|
|
|
|
self.addEventListener("fetch", function (event) {
|
|
console.log('WORKER: fetch event in progress.');
|
|
|
|
/* We should only cache GET requests, and deal with the rest of method in the
|
|
client-side, by handling failed POST,PUT,PATCH,etc. requests.
|
|
*/
|
|
if (event.request.method !== 'GET') {
|
|
/* If we don't block the event as shown below, then the request will go to
|
|
the network as usual.
|
|
*/
|
|
console.log('WORKER: fetch event ignored.', event.request.method, event.request.url);
|
|
return;
|
|
}
|
|
/* Similar to event.waitUntil in that it blocks the fetch event on a promise.
|
|
Fulfillment result will be used as the response, and rejection will end in a
|
|
HTTP response indicating failure.
|
|
*/
|
|
event.respondWith(
|
|
caches
|
|
/* This method returns a promise that resolves to a cache entry matching
|
|
the request. Once the promise is settled, we can then provide a response
|
|
to the fetch request.
|
|
*/
|
|
.match(event.request)
|
|
.then(function (cached) {
|
|
/* Even if the response is in our cache, we go to the network as well.
|
|
This pattern is known for producing "eventually fresh" responses,
|
|
where we return cached responses immediately, and meanwhile pull
|
|
a network response and store that in the cache.
|
|
Read more:
|
|
https://ponyfoo.com/articles/progressive-networking-serviceworker
|
|
*/
|
|
var networked = fetch(event.request)
|
|
// We handle the network request with success and failure scenarios.
|
|
.then(fetchedFromNetwork, unableToResolve)
|
|
// We should catch errors on the fetchedFromNetwork handler as well.
|
|
.catch(unableToResolve);
|
|
|
|
/* We return the cached response immediately if there is one, and fall
|
|
back to waiting on the network as usual.
|
|
*/
|
|
console.log('WORKER: fetch event', cached ? '(cached)' : '(network)', event.request.url);
|
|
return cached || networked;
|
|
|
|
function fetchedFromNetwork(response) {
|
|
/* We copy the response before replying to the network request.
|
|
This is the response that will be stored on the ServiceWorker cache.
|
|
*/
|
|
var cacheCopy = response.clone();
|
|
|
|
console.log('WORKER: fetch response from network.', event.request.url);
|
|
|
|
caches
|
|
// We open a cache to store the response for this request.
|
|
.open('PAGE_CACHE')
|
|
.then(function add(cache) {
|
|
/* We store the response for this request. It'll later become
|
|
available to caches.match(event.request) calls, when looking
|
|
for cached responses.
|
|
*/
|
|
cache.put(event.request, cacheCopy);
|
|
})
|
|
.then(function () {
|
|
console.log('WORKER: fetch response stored in cache.', event.request.url);
|
|
});
|
|
|
|
// Return the response so that the promise is settled in fulfillment.
|
|
return response;
|
|
}
|
|
|
|
/* When this method is called, it means we were unable to produce a response
|
|
from either the cache or the network. This is our opportunity to produce
|
|
a meaningful response even when all else fails. It's the last chance, so
|
|
you probably want to display a "Service Unavailable" view or a generic
|
|
error response.
|
|
*/
|
|
function unableToResolve() {
|
|
|
|
console.log("Fetch failed; returning offline page instead." );
|
|
caches.open(CACHE_NAME).then(function (cache){
|
|
return cache.match(OFFLINE_URL);
|
|
});
|
|
}
|
|
})
|
|
);
|
|
}); |