Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A basic Service Worker, for use on, say, a blog.
'use strict';
// Licensed under a CC0 1.0 Universal (CC0 1.0) Public Domain Dedication
// http://creativecommons.org/publicdomain/zero/1.0/
(function() {
// Update 'version' if you need to refresh the cache
var staticCacheName = 'static';
var version = 'v1::';
// Store core files in a cache (including a page to display when offline)
function updateStaticCache() {
return caches.open(version + staticCacheName)
.then(function (cache) {
return cache.addAll([
'/path/to/javascript.js',
'/path/to/stylesheet.css',
'/path/to/someimage.png',
'/path/to/someotherimage.png',
'/',
'/offline.html'
]);
});
};
self.addEventListener('install', function (event) {
event.waitUntil(updateStaticCache());
});
self.addEventListener('activate', function (event) {
event.waitUntil(
caches.keys()
.then(function (keys) {
// Remove caches whose name is no longer valid
return Promise.all(keys
.filter(function (key) {
return key.indexOf(version) !== 0;
})
.map(function (key) {
return caches.delete(key);
})
);
})
);
});
self.addEventListener('fetch', function (event) {
var request = event.request;
// Always fetch non-GET requests from the network
if (request.method !== 'GET') {
event.respondWith(
fetch(request)
.catch(function () {
return caches.match('/offline.html');
})
);
return;
}
// For HTML requests, try the network first, fall back to the cache, finally the offline page
if (request.headers.get('Accept').indexOf('text/html') !== -1) {
// Fix for Chrome bug: https://code.google.com/p/chromium/issues/detail?id=573937
if (request.mode != 'navigate') {
request = new Request(request.url, {
method: 'GET',
headers: request.headers,
mode: request.mode,
credentials: request.credentials,
redirect: request.redirect
});
}
event.respondWith(
fetch(request)
.then(function (response) {
// Stash a copy of this page in the cache
var copy = response.clone();
caches.open(version + staticCacheName)
.then(function (cache) {
cache.put(request, copy);
});
return response;
})
.catch(function () {
return caches.match(request)
.then(function (response) {
return response || caches.match('/offline.html');
})
})
);
return;
}
// For non-HTML requests, look in the cache first, fall back to the network
event.respondWith(
caches.match(request)
.then(function (response) {
return response || fetch(request)
.catch(function () {
// If the request is for an image, show an offline placeholder
if (request.headers.get('Accept').indexOf('image') !== -1) {
return new Response('<svg width="400" height="300" role="img" aria-labelledby="offline-title" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg"><title id="offline-title">Offline</title><g fill="none" fill-rule="evenodd"><path fill="#D8D8D8" d="M0 0h400v300H0z"/><text fill="#9B9B9B" font-family="Helvetica Neue,Arial,Helvetica,sans-serif" font-size="72" font-weight="bold"><tspan x="93" y="172">offline</tspan></text></g></svg>', { headers: { 'Content-Type': 'image/svg+xml' }});
}
});
})
);
});
})();
@cherrypj

This comment has been minimized.

Copy link

cherrypj commented Nov 18, 2015

@Tenchu

This comment has been minimized.

Copy link

Tenchu commented Jul 7, 2016

i am so lost, i made everything like the sample, but it does not work http://mobilmedia.tk/INGLES

@dr34mc0d3r

This comment has been minimized.

Copy link

dr34mc0d3r commented Jul 27, 2016

You’ll also need to serve your code via HTTPS — Service Workers are restricted to running across HTTPS for security reasons.
http://mobilmedia.tk/INGLES/serviceworker.js
https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers

@canadaduane

This comment has been minimized.

Copy link

canadaduane commented Jun 9, 2017

Where does self come from?

@nhoizey

This comment has been minimized.

Copy link

nhoizey commented Jan 10, 2018

Be careful, request.headers.get('Accept').indexOf('image') doesn't work anymore in Firefox.

Discovered in @SebastianEberlein 's post ending side note: https://hackernoon.com/service-worker-one-fallback-offline-image-for-any-aspect-ratio-b427c0f897fb#aaab

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.