Last active
December 21, 2015 18:31
-
-
Save kaezarrex/d96ca857c9b24ed65ce8 to your computer and use it in GitHub Desktop.
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> | |
<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> |
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>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> |
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) { | |
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]); | |
}); | |
} |
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
{ | |
"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" | |
} |
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>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> |
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
#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; | |
} |
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
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