Skip to content

Instantly share code, notes, and snippets.

@kaezarrex

kaezarrex/blastoise.png

Last active December 21, 2015 18:31
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kaezarrex/d96ca857c9b24ed65ce8 to your computer and use it in GitHub Desktop.
Save kaezarrex/d96ca857c9b24ed65ce8 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
fallback.html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="/style.css">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<ul class="nav">
<li><a href="./">home</a></li>
<li><a href="./photos.html">photos</a></li>
</ul>
<div class="content">
<h1>Fallback!</h1>
</div>
</body>
</html>
Raw
index.html
<html>
<head>
<title>Service Worker Experiment</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="rgb(33,150,243)">
<link rel="manifest" href="./manifest.json">
<link rel="icon" type="image/png" href="icon32x32.png" sizes="32x32">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.blue-pink.min.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">Home <span id="version"></span></span>
<div class="mdl-layout-spacer"></div>
<nav class="mdl-navigation mdl-layout--large-screen-only">
<a class="mdl-navigation__link" href="./">Home</a>
<a class="mdl-navigation__link" href="./photos.html">Photos</a>
</nav>
</div>
</header>
<div class="mdl-layout__drawer">
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="./">Home</a>
<a class="mdl-navigation__link" href="./photos.html">Photos</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--3-col-desktop mdl-cell--1-col-tablet mdl-cell--hide-phone"></div>
<div class="mdl-cell mdl-cell--6-col-desktop mdl-cell--6-col-tablet">
<div class="demo-card-wide mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Welcome</h2>
</div>
<div class="mdl-card__supporting-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris sagittis pellentesque lacus eleifend lacinia...
</div>
<div class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Get Started
</a>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">share</i>
</button>
</div>
</div>
</div>
<div class="mdl-cell mdl-cell--3-col-desktop mdl-cell--1-col-tablet mdl-cell--hide-phone"></div>
<div class="mdl-cell mdl-cell--3-col-desktop mdl-cell--1-col-tablet mdl-cell--hide-phone"></div>
<div class="mdl-cell mdl-cell--6-col-desktop mdl-cell--6-col-tablet">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
fermentum a metus in rutrum. Sed sit amet ante nisi. Proin et
orci purus. Nam sit amet sodales erat. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Nullam quis semper magna. Suspendisse et ligula vel libero
laoreet feugiat. Morbi tortor turpis, consectetur eu est
dignissim, faucibus lacinia diam. Sed et orci at lectus aliquam
molestie. Morbi non turpis pellentesque tortor sollicitudin
suscipit quis quis est. Etiam ex odio, mollis ac malesuada eget,
hendrerit quis ligula. Curabitur a est vel arcu iaculis pretium.
Curabitur hendrerit ut justo vitae faucibus. Duis mattis eleifend
pharetra.
</p>
</div>
</div>
</div>
</main>
</div>
<script src="./main.js" type="text/javascript"></script>
</body>
</html>
Raw
main.js
if ('serviceWorker' in navigator) {
navigator.serviceWorker.addEventListener('message', function(event) {
switch (event.data.command) {
case 'activate':
window.location.href = window.location.href;
break;
default:
console.log('Unknown command: ' + event.data.command);
}
});
navigator.serviceWorker.register('sw.js').then(function(sw) {
console.log('registration worked! scope:', sw.scope);
sendMessage({command: 'version'}).then(function(data) {
document.getElementById('version').innerHTML = data.version;
}).catch(function(err) {
console.log(err);
});
}).then(navigator.serviceWorker.ready)
.catch(function(err) {
console.log('registration failed :(', err);
});
} else {
console.log('no serviceWorker API');
}
function sendMessage(message) {
return new Promise(function(resolve, reject) {
var messageChannel = new MessageChannel();
messageChannel.port1.onmessage = function(event) {
if (event.data.error) {
reject(event.data.error);
} else {
resolve(event.data);
}
};
navigator.serviceWorker.controller.postMessage(message,
[messageChannel.port2]);
});
}
Raw
manifest.json
{
"short_name": "SW Experiment",
"name": "Service Worker Experiment",
"background_color": "white",
"icons": [
{
"src": "icon36x36.png",
"sizes": "36x36",
"type": "image/png"
}, {
"src": "icon48x48.png",
"sizes": "48x48",
"type": "image/png"
}, {
"src": "icon72x72.png",
"sizes": "72x72",
"type": "image/png"
}, {
"src": "icon96x96.png",
"sizes": "96x96",
"type": "image/png"
}, {
"src": "icon144x144.png",
"sizes": "144x144",
"type": "image/png"
}, {
"src": "icon192x192.png",
"sizes": "192x192",
"type": "image/png"
}
],
"start_url": "./?utm_source=web_app_manifest",
"display": "standalone",
"orientation": "portrait"
}
Raw
photos.html
<html>
<head>
<title>Service Worker Experiment</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="rgb(33,150,243)">
<link rel="manifest" href="./manifest.json">
<link rel="icon" type="image/png" href="icon32x32.png" sizes="32x32">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.blue-pink.min.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">Photos <span id="version"></span></span>
<div class="mdl-layout-spacer"></div>
<nav class="mdl-navigation mdl-layout--large-screen-only">
<a class="mdl-navigation__link" href="./">Home</a>
<a class="mdl-navigation__link" href="./photos.html">Photos</a>
</nav>
</div>
</header>
<div class="mdl-layout__drawer">
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="./">Home</a>
<a class="mdl-navigation__link" href="./photos.html">Photos</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--2-col">
<div class="demo-card-image mdl-card mdl-shadow--2dp bulbasaur">
<div class="mdl-card__title mdl-card--expand"></div>
<div class="mdl-card__actions">
<span class="demo-card-image__filename">Bulbasaur</span>
</div>
</div>
</div>
<div class="mdl-cell mdl-cell--2-col">
<div class="demo-card-image mdl-card mdl-shadow--2dp ivysaur">
<div class="mdl-card__title mdl-card--expand"></div>
<div class="mdl-card__actions">
<span class="demo-card-image__filename">Ivysaur</span>
</div>
</div>
</div>
<div class="mdl-cell mdl-cell--2-col">
<div class="demo-card-image mdl-card mdl-shadow--2dp venusaur">
<div class="mdl-card__title mdl-card--expand"></div>
<div class="mdl-card__actions">
<span class="demo-card-image__filename">Venusaur</span>
</div>
</div>
</div>
<div class="mdl-cell mdl-cell--2-col">
<div class="demo-card-image mdl-card mdl-shadow--2dp charmander">
<div class="mdl-card__title mdl-card--expand"></div>
<div class="mdl-card__actions">
<span class="demo-card-image__filename">Charmander</span>
</div>
</div>
</div>
<div class="mdl-cell mdl-cell--2-col">
<div class="demo-card-image mdl-card mdl-shadow--2dp charmeleon">
<div class="mdl-card__title mdl-card--expand"></div>
<div class="mdl-card__actions">
<span class="demo-card-image__filename">Charmeleon</span>
</div>
</div>
</div>
<div class="mdl-cell mdl-cell--2-col">
<div class="demo-card-image mdl-card mdl-shadow--2dp charizard">
<div class="mdl-card__title mdl-card--expand"></div>
<div class="mdl-card__actions">
<span class="demo-card-image__filename">Charizard</span>
</div>
</div>
</div>
<div class="mdl-cell mdl-cell--2-col">
<div class="demo-card-image mdl-card mdl-shadow--2dp squirtle">
<div class="mdl-card__title mdl-card--expand"></div>
<div class="mdl-card__actions">
<span class="demo-card-image__filename">Squirtle</span>
</div>
</div>
</div>
<div class="mdl-cell mdl-cell--2-col">
<div class="demo-card-image mdl-card mdl-shadow--2dp wartortle">
<div class="mdl-card__title mdl-card--expand"></div>
<div class="mdl-card__actions">
<span class="demo-card-image__filename">Wartortle</span>
</div>
</div>
</div>
<div class="mdl-cell mdl-cell--2-col">
<div class="demo-card-image mdl-card mdl-shadow--2dp blastoise">
<div class="mdl-card__title mdl-card--expand"></div>
<div class="mdl-card__actions">
<span class="demo-card-image__filename">Blastoise</span>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<script src="./main.js" type="text/javascript"></script>
</body>
</html>
Raw
style.css
#version {
font-size: 0.6em;
}
#version:before {
content: '(';
}
#version:after {
content: ')';
}
.demo-card-image.mdl-card.bulbasaur {
background: url('bulbasaur.png') center / cover;
}
.demo-card-image.mdl-card.ivysaur {
background: url('ivysaur.png') center / cover;
}
.demo-card-image.mdl-card.venusaur {
background: url('venusaur.png') center / cover;
}
.demo-card-image.mdl-card.charmeleon {
background: url('charmeleon.png') center / cover;
}
.demo-card-image.mdl-card.charmander {
background: url('charmander.png') center / cover;
}
.demo-card-image.mdl-card.charizard {
background: url('charizard.png') center / cover;
}
.demo-card-image.mdl-card.squirtle {
background: url('squirtle.png') center / cover;
}
.demo-card-image.mdl-card.wartortle {
background: url('wartortle.png') center / cover;
}
.demo-card-image.mdl-card.blastoise {
background: url('blastoise.png') center / cover;
}
.demo-card-image.mdl-card {
width: 100%;
height: 200px;
margin: 0 auto;
text-align: center;
}
.demo-card-image > .mdl-card__actions {
height: 52px;
padding: 16px;
background: rgba(0, 0, 0, 0.2);
}
.demo-card-image__filename {
color: #fff;
font-size: 14px;
font-weight: 500;
}
.demo-card-wide.mdl-card {
width: 100%;
margin: 0 auto;
}
.demo-card-wide > .mdl-card__title {
color: #fff;
height: 176px;
background: url('welcome_card.jpg') center / cover;
}
.demo-card-wide > .mdl-card__menu {
color: #fff;
}
.mdl-layout__drawer-button>.material-icons {
padding-top: 0.4em;
}
Raw
sw.js
var cacheVersion = 'static-v84';
var cachedUrls = [
'./',
'./index.html',
'./photos.html',
'./fallback.html',
'./style.css',
'./manifest.json',
'./main.js',
'./welcome_card.jpg',
'./bulbasaur.png',
'./ivysaur.png',
'./venusaur.png',
'./charmeleon.png',
'./charmander.png',
'./charizard.png',
'./squirtle.png',
'./wartortle.png',
'./blastoise.png',
new Request('https://storage.googleapis.com/code.getmdl.io/1.0.6/material.blue-pink.min.css', {mode: 'no-cors'}),
new Request('https://fonts.googleapis.com/icon?family=Material+Icons', {mode: 'no-cors'}),
new Request('https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js', {mode: 'no-cors'}),
];
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).then(function(response) {
if (response) return response;
var fetchRequest = event.request.clone();
return fetch(fetchRequest).then(
function(response) {
// Check if we received a valid response
if(!response || response.status !== 200 || response.type !== 'basic') {
return response;
}
console.log('caching', response.url);
var responseToCache = response.clone();
caches.open(cacheVersion)
.then(function(cache) {
cache.put(event.request, responseToCache);
});
return response;
}
);
}).catch(function() {
console.log('page not found');
return caches.match('./fallback.html');
})
);
});
self.addEventListener('install', function(event) {
console.log('installing', cacheVersion);
event.waitUntil(
caches.open(cacheVersion).then(function(cache) {
console.log('opened cache');
return cache.addAll(cachedUrls);
})
);
});
self.addEventListener('activate', function(event) {
console.log('activating');
var cacheWhitelist = [cacheVersion];
event.waitUntil(
caches.keys().then(function(cacheNames) {
return Promise.all(
cacheNames.map(function(cacheName) {
if (cacheWhitelist.indexOf(cacheName) == -1) {
console.log('delete cache', cacheName);
return caches.delete(cacheName);
}
})
)
}).then(function() {
clients.matchAll({includeUncontrolled: true}).then(function(clients) {
clients.forEach(function(client) {
client.postMessage({command: 'activate'});
});
});
})
);
});
self.addEventListener('message', function(event) {
switch (event.data.command) {
case 'version':
event.ports[0].postMessage({
error: null,
version: cacheVersion
});
break;
default:
event.ports[0].postMessage({
error: 'Unknown command: ' + event.data.command
});
}
});
console.log('service worker loaded');
/**
* 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.
*
*/
if (!Cache.prototype.addAll) {
Cache.prototype.addAll = function addAll(requests) {
var cache = this;
// Since DOMExceptions are not constructable:
function NetworkError(message) {
this.name = 'NetworkError';
this.code = 19;
this.message = message;
}
NetworkError.prototype = Object.create(Error.prototype);
return Promise.resolve().then(function() {
if (arguments.length < 1) throw new TypeError();
// Simulate sequence<(Request or USVString)> binding:
var sequence = [];
requests = requests.map(function(request) {
if (request instanceof Request) {
return request;
}
else {
return String(request); // may throw TypeError
}
});
return Promise.all(
requests.map(function(request) {
if (typeof request === 'string') {
request = new Request(request);
}
var scheme = new URL(request.url).protocol;
if (scheme !== 'http:' && scheme !== 'https:') {
throw new NetworkError("Invalid scheme");
}
return fetch(request.clone());
})
);
}).then(function(responses) {
// TODO: check that requests don't overwrite one another
// (don't think this is possible to polyfill due to opaque responses)
return Promise.all(
responses.map(function(response, i) {
return cache.put(requests[i], response);
})
);
}).then(function() {
return undefined;
});
};
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment