progressive mobile web apps
TRANSCRIPT
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 に登録できた！'); }); }
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); }) ); });
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); } ) ); });
{ "short_name": "れっさーもふもふ", "name": "レッサーパンダのもふもふ素敵アプリ！", "icons": [ { "src": "launcher-icon-3x.png", "sizes": "144x144", "type": "image/png" } ], "start_url": "index.html", "display": "standalone" }
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 でプッシュ通知！ }
HTML5
CSS3
WebGLECMA6
DOM4 HTTP/2
IndexedDB
ServiceWorkers
WAI-ARIA
WebRTC
Presentation
TCP
asm.js
SVG
Audio
Push
ManifestWebVR
DNT
