Jeff Posnick jeffposnick
jeffposnick
/ service-worker.js
Created
September 20, 2019 00:56
Example of InjectManifest in Workbox v5
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
| // Add any other logic here as needed. | |
| import { CacheableResponsePlugin } from 'workbox-cacheable-response/CacheableResponsePlugin'; | |
| import { CacheFirst } from 'workbox-strategies/CacheFirst'; | |
| import { createHandlerForURL } from 'workbox-precaching/createHandlerForURL'; | |
| import { ExpirationPlugin } from 'workbox-expiration/ExpirationPlugin'; | |
| import { NavigationRoute } from 'workbox-routing/NavigationRoute'; | |
| import { precacheAndRoute } from 'workbox-precaching/precacheAndRoute'; | |
| import { registerRoute } from 'workbox-routing/registerRoute'; |
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
| <html> | |
| <head> | |
| <title>Test</title> | |
| <link rel="manifest" href="manifest.json"> | |
| </head> | |
| <body> | |
| <p> | |
| If the <code>beforeinstallprompt</code> event fires, there will be a button displayed allowing | |
| you to use <code>prompt()</code> on the deferred event. | |
| </p> |
jeffposnick
/ index.html
Last active
December 25, 2022 19:15
Code for http://stackoverflow.com/questions/33978993/serviceworker-no-fetchevent-for-javascript-triggered-request
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
| <html> | |
| <body> | |
| <p><button onclick="fetch('a');">fetch a</button></p> | |
| <p><a href="b">go to b</a></p> | |
| <script> | |
| navigator.serviceWorker.register('sw.js'); | |
| </script> | |
| </body> | |
| </html> |
jeffposnick
/ custom-wb-code.js
Created
September 27, 2019 13:53
Example of using importScriptsViaChunks
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
| import {registerRoute} from 'workbox-routing/registerRoute'; | |
| registerRoute('/path', yourHandlerCode); |
jeffposnick
/ register-sw.js
Last active
September 13, 2021 11:53
A modern-ish SW registration script, detecting various state 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
| if ('serviceWorker' in navigator) { | |
| window.addEventListener('load', async function() { | |
| const registration = await navigator.serviceWorker.register('/service-worker.js'); | |
| if (registration.waiting && registration.active) { | |
| // The page has been loaded when there's already a waiting and active SW. | |
| // This would happen if skipWaiting isn't being called, and there are | |
| // still old tabs open. | |
| console.log('Please close all tabs to get updates.'); | |
| } else { | |
| // updatefound is also fired for the very first install. ¯\_(ツ)_/¯ |
jeffposnick
/ sw.js
Created
April 5, 2019 19:33
https://paul.kinlan.me/offline-fallback-page-with-service-worker/, with navigation preload
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
| addEventListener('install', (event) => ; { | |
| event.waitUntil(async function() { | |
| const cache = await caches.open('static-v1'); | |
| await cache.addAll(['offline.html', 'styles.css']); | |
| }()); | |
| }); | |
| // See https://developers.google.com/web/updates/2017/02/navigation-preload#activating_navigation_preload | |
| addEventListener('activate', event => { | |
| event.waitUntil(async function() { |
jeffposnick
/ index.html
Created
October 17, 2018 20:48
Example of precaching video content, and using it with a Workbox-powered SW.
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
| <!doctype html> | |
| <html> | |
| <head> | |
| <title>Video Test</title> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| </head> | |
| <body> | |
| <p> | |
| Here's a small local video. (Copy from http://techslides.com/demos/sample-videos/small.mp4) |
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
| { | |
| "name": "demo", | |
| "version": "1.0.0", | |
| "description": "", | |
| "main": "index.js", | |
| "scripts": { | |
| "build": "webpack" | |
| }, | |
| "keywords": [], | |
| "author": "", |
jeffposnick
/ fallback-on-error-plugin.js
Last active
January 4, 2021 12:13
Example Workbox plugin that fallsback to a cached HTML page when there's a non-200 OK navigation response.
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
| export class FallbackOnErrorPlugin { | |
| constructor(fallbackURL) { | |
| this.fallbackURL = fallbackURL; | |
| } | |
| // This is called whenever there's a network response, | |
| // but we want special behavior for non-2xx statuses. | |
| fetchDidSucceed({response}) { | |
| if (response.ok) { | |
| // If it's a 2xx, it can be used as-is. |
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
| /* | |
| 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 |
NewerOlder