Some nice places to visit: +
+ You can confirm the service worker's behavior using the + Application panel + of Chrome's DevTools. +
+CACHES.PRECACHE name to pick up
+ new versions after updating anything!
+
+ cache.addAll() call may be fulfilled with responses from
+ the HTTP cache, depending on the HTTP caching headers you use. If you
+ are using
+ HTTP caching
+ and unversioned resources, it can be safer to
+ cache-bust
+ your precaching requests.
+
+ sw-toolbox
+ which provides
+ cache-expiration
+ is recommended.
+
+ + The following demo illustrates the service worker's runtime caching by loading + images in response to clicking the button below. +
++ The first time a given image is requested, the service worker will be load it + from the network, but each subsequent time, it will be retrieved from the cache. +
+ + + + + +{% include js_snippet.html filename='demo.js' %} +{% include js_snippet.html filename='service-worker.js' displayonly=true title="Service Worker's JavaScript" %} diff --git a/service-worker/basic/readme.md b/service-worker/basic/readme.md deleted file mode 100644 index 178660a0a2..0000000000 --- a/service-worker/basic/readme.md +++ /dev/null @@ -1,14 +0,0 @@ -Service Worker Sample -=== - -See https://googlechrome.github.io/samples/service-worker/basic/index.html for a live demo. - - -#### Directions: - -* Install Chrome, or another browser that supports Service Workers. -* Open the demo at https://googlechrome.github.io/samples/service-worker/basic/index.html [(source)](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/basic/index.html) -* Open the Developer Tools. Things are logged there later on. -* Try visiting Cleveland and get a 404. Go back. -* Click the 'Register' button, watch the Inspector console, then try visiting Cleveland again... oooh. -* Go to `chrome://inspect#service-workers` and click on `Inspect` to open the Inspector and debug your Service Worker [(source)](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/basic/service-worker.js) diff --git a/service-worker/basic/service-worker.js b/service-worker/basic/service-worker.js index 85b4b1850b..9cc7410d04 100644 --- a/service-worker/basic/service-worker.js +++ b/service-worker/basic/service-worker.js @@ -1,12 +1,76 @@ -self.addEventListener('fetch', function(event) { - console.log('got a request'); +/* + 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. +*/ - var salutation = 'Hello, '; - var whom = decodeURIComponent(event.request.url.match(/\/([^/]*)$/)[1]); - var energyLevel = (whom === 'Cleveland') ? '!!!' : '!'; - var version = '\n\n(Version 1)'; +// Names of the two caches used in this version of the service worker. +// Change to v2, etc. when you update any of the local resources, which will +// in turn trigger the install event again. +const PRECACHE = 'precache-v1'; +const RUNTIME = 'runtime'; - var body = new Blob([salutation, whom, energyLevel, version]); +// A list of local resources we always want to be cached. +const PRECACHE_URLS = [ + 'index.html', + './', // Alias for index.html + 'styles.css', + '../../styles/main.css', + 'demo.js' +]; - event.respondWith(new Response(body)); +// The install handler takes care of precaching the resources we always need. +self.addEventListener('install', event => { + event.waitUntil( + caches.open(PRECACHE) + .then(cache => cache.addAll(PRECACHE_URLS)) + .then(self.skipWaiting()) + ); }); + +// The activate handler takes care of cleaning up old caches. +self.addEventListener('activate', event => { + const currentCaches = [PRECACHE, RUNTIME]; + event.waitUntil( + caches.keys().then(cacheNames => { + return cacheNames.filter(cacheName => !currentCaches.includes(cacheName)); + }).then(cachesToDelete => { + return Promise.all(cachesToDelete.map(cacheToDelete => { + return caches.delete(cacheToDelete); + })); + }).then(() => self.clients.claim()) + ); +}); + +// The fetch handler serves responses for same-origin resources from a cache. +// If no response is found, it populates the runtime cache with the response +// from the network before returning it to the page. +self.addEventListener('fetch', event => { + // Skip cross-origin requests, like those for Google Analytics. + if (event.request.url.startsWith(self.location.origin)) { + event.respondWith( + caches.match(event.request).then(cachedResponse => { + if (cachedResponse) { + return cachedResponse; + } + + return caches.open(RUNTIME).then(cache => { + return fetch(event.request).then(response => { + // Put a copy of the response in the runtime cache. + return cache.put(event.request, response.clone()).then(() => { + return response; + }); + }); + }); + }) + ); + } +}); + diff --git a/service-worker/basic/styles.css b/service-worker/basic/styles.css new file mode 100644 index 0000000000..73a9e2b62a --- /dev/null +++ b/service-worker/basic/styles.css @@ -0,0 +1,10 @@ +#container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-around; +} + +li { + margin-bottom: 1em; +}