Skip to content

Instantly share code, notes, and snippets.

@FrancisVarga
Last active September 6, 2019 07:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save FrancisVarga/c190271c41be25e5bf3a73d31c3ffa1a to your computer and use it in GitHub Desktop.
Save FrancisVarga/c190271c41be25e5bf3a73d31c3ffa1a to your computer and use it in GitHub Desktop.
ServiceWorker Example
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<script data-ionic="inject">
(function(w){var i=w.Ionic=w.Ionic||{};i.version='3.6.0';i.angular='4.1.3';i.staticDir='build/';})(window);
</script>
<meta charset="UTF-8">
<title>W88</title>
</head>
<body>
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => {console.log('service worker installed')})
.catch(err => {console.error('Error', err)});
}
</script>
</body>
</html>
/**
* Check out https://googlechrome.github.io/sw-toolbox/ for
* more info on how to use sw-toolbox to custom configure your service worker.
*/
'use strict';
importScripts('./build/sw-toolbox.js');
const mainCache = 'app-cache';
const staticCache = 'app-static';
self.toolbox.options.cache = {
name: mainCache,
maxEntries: '64',
maxAgeSeconds: '36000',
ops: {
interval: 1000
},
reporters: {
console: [{
module: 'good-squeeze',
name: 'Squeeze',
args: [{
log: '*',
response: '*'
}]
}, {
module: 'good-console'
}, 'stdout']
}
};
// pre-cache our key assets
self.toolbox.precache(
[
'./',
'./manifest.json',
'./build/main.js',
'./build/vendor.js',
'./build/main.css',
'./build/polyfills.js',
'index.html',
'./index.html',
'./manifest.json',
'./assets/icon/favicon.ico',
'./assets/icon/tile.png'
]
);
// dynamically cache any other local assets
self.toolbox.router.any('/*', self.toolbox.cacheFirst);
self.toolbox.router.any('*/sites/default*', self.toolbox.cacheFirst);
// for any other requests go to the network, cache,
// and then only use that cached resource if your user goes offline
self.toolbox.router.default = self.toolbox.cacheFirst;
self.addEventListener('install', function (event) {
// only happens once for this version of the service worker
// wait until the install event has resolved
event.waitUntil(
// then create our named cached
fetchStuffAndInitDatabases()
);
});
function fetchStuffAndInitDatabases() {
caches.open(staticCache).then(function (cache) {
cache.addAll(
[
'./',
'./manifest.json',
'./build/main.js',
'./build/vendor.js',
'./build/main.css',
'./build/polyfills.js',
'index.html',
'./index.html',
'./manifest.json',
'./assets/icon/favicon.ico'
]
);
return cache.addAll(
[
'./assets/icon/tile.png'
]
);
});
}
self.addEventListener("fetch", function (event) {
// If the request in GET, let the network handle things,
if (event.request.method !== 'GET') {
return;
}
// here we block the request and handle it our selves
event.respondWith(
// Returns a promise of the cache entry that matches the request
caches
.match(event.request)
.then(function (response) {
// here we can hanlde the request how ever we want.
// We can reutrn the cache right away if it exisit,
// or go to network to fetch it.
// There are more intricate examples below.
// https://ponyfoo.com/articles/progressive-networking-serviceworker
if (response) {
// our responce is in the cache, let's return that instead
return response;
}
// if the responce is not in the cache, let's fetch it
return fetch(event.request)
.then(function (response) {
// we have a responce from the network
return response;
}).catch(function (error) {
// Something happened
console.error('Fetching failed:', error);
throw error;
});
})
);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment