Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Adding Service Worker offline support
- Loading branch information
Mathieu Perreault
committed
Apr 18, 2017
1 parent
e834f75
commit 25383d4
Showing
18 changed files
with
393 additions
and
35 deletions.
There are no files selected for viewing
File renamed without changes.
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
File renamed without changes
File renamed without changes
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| /** | ||
| * Copyright 2015 Google Inc. 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. | ||
| */ | ||
|
|
||
| /* eslint-env browser */ | ||
| 'use strict'; | ||
|
|
||
| if ('serviceWorker' in navigator) { | ||
| // Delay registration until after the page has loaded, to ensure that our | ||
| // precaching requests don't degrade the first visit experience. | ||
| // See https://developers.google.com/web/fundamentals/instant-and-offline/service-worker/registration | ||
| window.addEventListener('load', function() { | ||
| // Your service-worker.js *must* be located at the top-level directory relative to your site. | ||
| // It won't be able to control pages unless it's located at the same level or higher than them. | ||
| // *Don't* register service worker file in, e.g., a scripts/ sub-directory! | ||
| // See https://github.com/slightlyoff/ServiceWorker/issues/468 | ||
| navigator.serviceWorker.register('service-worker.js').then(function(reg) { | ||
| // updatefound is fired if service-worker.js changes. | ||
| reg.onupdatefound = function() { | ||
| // The updatefound event implies that reg.installing is set; see | ||
| // https://slightlyoff.github.io/ServiceWorker/spec/service_worker/index.html#service-worker-container-updatefound-event | ||
| var installingWorker = reg.installing; | ||
|
|
||
| installingWorker.onstatechange = function() { | ||
| switch (installingWorker.state) { | ||
| case 'installed': | ||
| if (navigator.serviceWorker.controller) { | ||
| // At this point, the old content will have been purged and the fresh content will | ||
| // have been added to the cache. | ||
| // It's the perfect time to display a "New content is available; please refresh." | ||
| // message in the page's interface. | ||
| console.log('New or updated content is available.'); | ||
| } else { | ||
| // At this point, everything has been precached. | ||
| // It's the perfect time to display a "Content is cached for offline use." message. | ||
| console.log('Content is now available offline!'); | ||
| } | ||
| break; | ||
|
|
||
| case 'redundant': | ||
| console.error('The installing service worker became redundant.'); | ||
| break; | ||
| } | ||
| }; | ||
| }; | ||
| }).catch(function(e) { | ||
| console.error('Error during service worker registration:', e); | ||
| }); | ||
| }); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,266 @@ | ||
| /** | ||
| * Copyright 2016 Google Inc. 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. | ||
| */ | ||
|
|
||
| // DO NOT EDIT THIS GENERATED OUTPUT DIRECTLY! | ||
| // This file should be overwritten as part of your build process. | ||
| // If you need to extend the behavior of the generated service worker, the best approach is to write | ||
| // additional code and include it using the importScripts option: | ||
| // https://github.com/GoogleChrome/sw-precache#importscripts-arraystring | ||
| // | ||
| // Alternatively, it's possible to make changes to the underlying template file and then use that as the | ||
| // new base for generating output, via the templateFilePath option: | ||
| // https://github.com/GoogleChrome/sw-precache#templatefilepath-string | ||
| // | ||
| // If you go that route, make sure that whenever you update your sw-precache dependency, you reconcile any | ||
| // changes made to this original template file with your modified copy. | ||
|
|
||
| // This generated service worker JavaScript will precache your site's resources. | ||
| // The code needs to be saved in a .js file at the top-level of your site, and registered | ||
| // from your pages in order to be used. See | ||
| // https://github.com/googlechrome/sw-precache/blob/master/demo/app/js/service-worker-registration.js | ||
| // for an example of how you can register this script and handle various service worker events. | ||
|
|
||
| /* eslint-env worker, serviceworker */ | ||
| /* eslint-disable indent, no-unused-vars, no-multiple-empty-lines, max-nested-callbacks, space-before-function-paren, quotes, comma-spacing */ | ||
| 'use strict'; | ||
|
|
||
| var precacheConfig = [["/demo/demo.css","7a515aaf3c344269d84c801ed80311c9"],["/demo/demo.js","56edc523a0f97ce378f23cadafa77797"],["/demo/index.html","9e54d330be72d82479dc73835585fef1"],["/demo/shipping-name-generator.js","1366cf79731d50362927fa1e1584c690"],["/images/payment_icon_144px.png","a655eccde0011236477da997e09812e0"],["/index.html","466a9d2029b84e85d1712975e4ada0d3"],["/js/material.min.js","240538c21d8b76e56153cae9d66b4524"],["/service-worker-registration.js","0b4c35226075896152de214f8860b76e"],["/styles/main.css","d4fb4619d67f4bdbb9a9e4d775ecec2a"],["/styles/material.indigo-pink.min.css","5c74be021c1cc26962b0f7f3326125c8"]]; | ||
| var cacheName = 'sw-precache-v3--' + (self.registration ? self.registration.scope : ''); | ||
|
|
||
|
|
||
| var ignoreUrlParametersMatching = [/^utm_/]; | ||
|
|
||
|
|
||
|
|
||
| var addDirectoryIndex = function (originalUrl, index) { | ||
| var url = new URL(originalUrl); | ||
| if (url.pathname.slice(-1) === '/') { | ||
| url.pathname += index; | ||
| } | ||
| return url.toString(); | ||
| }; | ||
|
|
||
| var cleanResponse = function (originalResponse) { | ||
| // If this is not a redirected response, then we don't have to do anything. | ||
| if (!originalResponse.redirected) { | ||
| return Promise.resolve(originalResponse); | ||
| } | ||
|
|
||
| // Firefox 50 and below doesn't support the Response.body stream, so we may | ||
| // need to read the entire body to memory as a Blob. | ||
| var bodyPromise = 'body' in originalResponse ? | ||
| Promise.resolve(originalResponse.body) : | ||
| originalResponse.blob(); | ||
|
|
||
| return bodyPromise.then(function(body) { | ||
| // new Response() is happy when passed either a stream or a Blob. | ||
| return new Response(body, { | ||
| headers: originalResponse.headers, | ||
| status: originalResponse.status, | ||
| statusText: originalResponse.statusText | ||
| }); | ||
| }); | ||
| }; | ||
|
|
||
| var createCacheKey = function (originalUrl, paramName, paramValue, | ||
| dontCacheBustUrlsMatching) { | ||
| // Create a new URL object to avoid modifying originalUrl. | ||
| var url = new URL(originalUrl); | ||
|
|
||
| // If dontCacheBustUrlsMatching is not set, or if we don't have a match, | ||
| // then add in the extra cache-busting URL parameter. | ||
| if (!dontCacheBustUrlsMatching || | ||
| !(url.pathname.match(dontCacheBustUrlsMatching))) { | ||
| url.search += (url.search ? '&' : '') + | ||
| encodeURIComponent(paramName) + '=' + encodeURIComponent(paramValue); | ||
| } | ||
|
|
||
| return url.toString(); | ||
| }; | ||
|
|
||
| var isPathWhitelisted = function (whitelist, absoluteUrlString) { | ||
| // If the whitelist is empty, then consider all URLs to be whitelisted. | ||
| if (whitelist.length === 0) { | ||
| return true; | ||
| } | ||
|
|
||
| // Otherwise compare each path regex to the path of the URL passed in. | ||
| var path = (new URL(absoluteUrlString)).pathname; | ||
| return whitelist.some(function(whitelistedPathRegex) { | ||
| return path.match(whitelistedPathRegex); | ||
| }); | ||
| }; | ||
|
|
||
| var stripIgnoredUrlParameters = function (originalUrl, | ||
| ignoreUrlParametersMatching) { | ||
| var url = new URL(originalUrl); | ||
|
|
||
| url.search = url.search.slice(1) // Exclude initial '?' | ||
| .split('&') // Split into an array of 'key=value' strings | ||
| .map(function(kv) { | ||
| return kv.split('='); // Split each 'key=value' string into a [key, value] array | ||
| }) | ||
| .filter(function(kv) { | ||
| return ignoreUrlParametersMatching.every(function(ignoredRegex) { | ||
| return !ignoredRegex.test(kv[0]); // Return true iff the key doesn't match any of the regexes. | ||
| }); | ||
| }) | ||
| .map(function(kv) { | ||
| return kv.join('='); // Join each [key, value] array into a 'key=value' string | ||
| }) | ||
| .join('&'); // Join the array of 'key=value' strings into a string with '&' in between each | ||
|
|
||
| return url.toString(); | ||
| }; | ||
|
|
||
|
|
||
| var hashParamName = '_sw-precache'; | ||
| var urlsToCacheKeys = new Map( | ||
| precacheConfig.map(function(item) { | ||
| var relativeUrl = item[0]; | ||
| var hash = item[1]; | ||
| var absoluteUrl = new URL(relativeUrl, self.location); | ||
| var cacheKey = createCacheKey(absoluteUrl, hashParamName, hash, false); | ||
| return [absoluteUrl.toString(), cacheKey]; | ||
| }) | ||
| ); | ||
|
|
||
| function setOfCachedUrls(cache) { | ||
| return cache.keys().then(function(requests) { | ||
| return requests.map(function(request) { | ||
| return request.url; | ||
| }); | ||
| }).then(function(urls) { | ||
| return new Set(urls); | ||
| }); | ||
| } | ||
|
|
||
| self.addEventListener('install', function(event) { | ||
| event.waitUntil( | ||
| caches.open(cacheName).then(function(cache) { | ||
| return setOfCachedUrls(cache).then(function(cachedUrls) { | ||
| return Promise.all( | ||
| Array.from(urlsToCacheKeys.values()).map(function(cacheKey) { | ||
| // If we don't have a key matching url in the cache already, add it. | ||
| if (!cachedUrls.has(cacheKey)) { | ||
| var request = new Request(cacheKey, {credentials: 'same-origin'}); | ||
| return fetch(request).then(function(response) { | ||
| // Bail out of installation unless we get back a 200 OK for | ||
| // every request. | ||
| if (!response.ok) { | ||
| throw new Error('Request for ' + cacheKey + ' returned a ' + | ||
| 'response with status ' + response.status); | ||
| } | ||
|
|
||
| return cleanResponse(response).then(function(responseToCache) { | ||
| return cache.put(cacheKey, responseToCache); | ||
| }); | ||
| }); | ||
| } | ||
| }) | ||
| ); | ||
| }); | ||
| }).then(function() { | ||
|
|
||
| // Force the SW to transition from installing -> active state | ||
| return self.skipWaiting(); | ||
|
|
||
| }) | ||
| ); | ||
| }); | ||
|
|
||
| self.addEventListener('activate', function(event) { | ||
| var setOfExpectedUrls = new Set(urlsToCacheKeys.values()); | ||
|
|
||
| event.waitUntil( | ||
| caches.open(cacheName).then(function(cache) { | ||
| return cache.keys().then(function(existingRequests) { | ||
| return Promise.all( | ||
| existingRequests.map(function(existingRequest) { | ||
| if (!setOfExpectedUrls.has(existingRequest.url)) { | ||
| return cache.delete(existingRequest); | ||
| } | ||
| }) | ||
| ); | ||
| }); | ||
| }).then(function() { | ||
|
|
||
| return self.clients.claim(); | ||
|
|
||
| }) | ||
| ); | ||
| }); | ||
|
|
||
|
|
||
| self.addEventListener('fetch', function(event) { | ||
| if (event.request.method === 'GET') { | ||
| // Should we call event.respondWith() inside this fetch event handler? | ||
| // This needs to be determined synchronously, which will give other fetch | ||
| // handlers a chance to handle the request if need be. | ||
| var shouldRespond; | ||
|
|
||
| // First, remove all the ignored parameter and see if we have that URL | ||
| // in our cache. If so, great! shouldRespond will be true. | ||
| var url = stripIgnoredUrlParameters(event.request.url, ignoreUrlParametersMatching); | ||
| shouldRespond = urlsToCacheKeys.has(url); | ||
|
|
||
| // If shouldRespond is false, check again, this time with 'index.html' | ||
| // (or whatever the directoryIndex option is set to) at the end. | ||
| var directoryIndex = 'index.html'; | ||
| if (!shouldRespond && directoryIndex) { | ||
| url = addDirectoryIndex(url, directoryIndex); | ||
| shouldRespond = urlsToCacheKeys.has(url); | ||
| } | ||
|
|
||
| // If shouldRespond is still false, check to see if this is a navigation | ||
| // request, and if so, whether the URL matches navigateFallbackWhitelist. | ||
| var navigateFallback = ''; | ||
| if (!shouldRespond && | ||
| navigateFallback && | ||
| (event.request.mode === 'navigate') && | ||
| isPathWhitelisted([], event.request.url)) { | ||
| url = new URL(navigateFallback, self.location).toString(); | ||
| shouldRespond = urlsToCacheKeys.has(url); | ||
| } | ||
|
|
||
| // If shouldRespond was set to true at any point, then call | ||
| // event.respondWith(), using the appropriate cache key. | ||
| if (shouldRespond) { | ||
| event.respondWith( | ||
| caches.open(cacheName).then(function(cache) { | ||
| return cache.match(urlsToCacheKeys.get(url)).then(function(response) { | ||
| if (response) { | ||
| return response; | ||
| } | ||
| throw Error('The cached response that was expected is missing.'); | ||
| }); | ||
| }).catch(function(e) { | ||
| // Fall back to just fetch()ing the request if some unexpected error | ||
| // prevented the cached response from being valid. | ||
| console.warn('Couldn\'t serve response for "%s" from cache: %O', event.request.url, e); | ||
| return fetch(event.request); | ||
| }) | ||
| ); | ||
| } | ||
| } | ||
| }); | ||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
File renamed without changes.
Oops, something went wrong.