ng-japan 2016 で使用したスライド http://ngjapan.org/

37. if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('sw.js')
.then(function(registration) {
console.log('Service Worker 登録できた！');
});
}
if ('serviceWorker' in navigator) {
var options = {scope: 'sw/'};
navigator.serviceWorker.register('sw.js', options)
.then(function(registration) {
console.log('sw/ 配下の URL に登録できた！');
});
}

38. var CACHE_NAME = 'my-site-cache-v1';
var urlsToCache = [ '/', '/style.css', '/script.js'];
self.addEventListener('install', function(event) {
// Perform install steps
event.waitUntil(
caches.open(CACHE_NAME)
.then(function(cache) {
console.log('Opened cache');
return cache.addAll(urlsToCache);
})
);
});

42. var urlsToCache = [ '/', '/style.css', '/script.js'];
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request)
.then(function(response) {
// Cache hit - return response
if (response) {
return response;
}
return fetch(event.request);
}
)
);
});

48. {
"short_name": "れっさーもふもふ",
"name": "レッサーパンダのもふもふ素敵アプリ！",
"icons": [
{
"src": "launcher-icon-3x.png",
"sizes": "144x144",
"type": "image/png"
}
],
"start_url": "index.html",
"display": "standalone"
}

52. async function registerForPush() {
// Service Worker を登録、
let registration = await navigator.serviceWorker.register('sw.js')
// プッシュ通知を購読済みか確認、
let subscription = await registration.pushManager.getSubscription()
// 未購読であれば購読リクエスト
if (!subscription) {
subscription = await registration.pushManager.subscribe()
}
// サーバ側にも記録
await fetch('/save-push-endpoint', {
method: 'post', headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(subscription)
})
// あとは必要時に subscription.endpoint に POST でプッシュ通知！
}

58. HTML5
CSS3
WebGL
ECMA6
DOM4
HTTP/2
IndexedDB
Service
Workers
WAI-ARIA
WebRTC
Presentation
TCP
asm.js
SVG
Audio
Push
Manifest
WebVR
DNT