progressive mobile web apps
TRANSCRIPT
![Page 1: Progressive Mobile Web Apps](https://reader030.vdocuments.us/reader030/viewer/2022021502/586e8be01a28aba0038b8229/html5/thumbnails/1.jpg)
![Page 2: Progressive Mobile Web Apps](https://reader030.vdocuments.us/reader030/viewer/2022021502/586e8be01a28aba0038b8229/html5/thumbnails/2.jpg)
![Page 3: Progressive Mobile Web Apps](https://reader030.vdocuments.us/reader030/viewer/2022021502/586e8be01a28aba0038b8229/html5/thumbnails/3.jpg)
![Page 4: Progressive Mobile Web Apps](https://reader030.vdocuments.us/reader030/viewer/2022021502/586e8be01a28aba0038b8229/html5/thumbnails/4.jpg)
![Page 6: Progressive Mobile Web Apps](https://reader030.vdocuments.us/reader030/viewer/2022021502/586e8be01a28aba0038b8229/html5/thumbnails/6.jpg)
![Page 7: Progressive Mobile Web Apps](https://reader030.vdocuments.us/reader030/viewer/2022021502/586e8be01a28aba0038b8229/html5/thumbnails/7.jpg)
![Page 8: Progressive Mobile Web Apps](https://reader030.vdocuments.us/reader030/viewer/2022021502/586e8be01a28aba0038b8229/html5/thumbnails/8.jpg)
![Page 9: Progressive Mobile Web Apps](https://reader030.vdocuments.us/reader030/viewer/2022021502/586e8be01a28aba0038b8229/html5/thumbnails/9.jpg)
![Page 17: Progressive Mobile Web Apps](https://reader030.vdocuments.us/reader030/viewer/2022021502/586e8be01a28aba0038b8229/html5/thumbnails/17.jpg)
![Page 19: Progressive Mobile Web Apps](https://reader030.vdocuments.us/reader030/viewer/2022021502/586e8be01a28aba0038b8229/html5/thumbnails/19.jpg)
![Page 20: Progressive Mobile Web Apps](https://reader030.vdocuments.us/reader030/viewer/2022021502/586e8be01a28aba0038b8229/html5/thumbnails/20.jpg)
![Page 21: Progressive Mobile Web Apps](https://reader030.vdocuments.us/reader030/viewer/2022021502/586e8be01a28aba0038b8229/html5/thumbnails/21.jpg)
![Page 22: Progressive Mobile Web Apps](https://reader030.vdocuments.us/reader030/viewer/2022021502/586e8be01a28aba0038b8229/html5/thumbnails/22.jpg)
![Page 23: Progressive Mobile Web Apps](https://reader030.vdocuments.us/reader030/viewer/2022021502/586e8be01a28aba0038b8229/html5/thumbnails/23.jpg)
![Page 24: Progressive Mobile Web Apps](https://reader030.vdocuments.us/reader030/viewer/2022021502/586e8be01a28aba0038b8229/html5/thumbnails/24.jpg)
![Page 25: Progressive Mobile Web Apps](https://reader030.vdocuments.us/reader030/viewer/2022021502/586e8be01a28aba0038b8229/html5/thumbnails/25.jpg)
![Page 26: Progressive Mobile Web Apps](https://reader030.vdocuments.us/reader030/viewer/2022021502/586e8be01a28aba0038b8229/html5/thumbnails/26.jpg)
![Page 27: Progressive Mobile Web Apps](https://reader030.vdocuments.us/reader030/viewer/2022021502/586e8be01a28aba0038b8229/html5/thumbnails/27.jpg)
![Page 30: Progressive Mobile Web Apps](https://reader030.vdocuments.us/reader030/viewer/2022021502/586e8be01a28aba0038b8229/html5/thumbnails/30.jpg)
![Page 34: Progressive Mobile Web Apps](https://reader030.vdocuments.us/reader030/viewer/2022021502/586e8be01a28aba0038b8229/html5/thumbnails/34.jpg)
![Page 35: Progressive Mobile Web Apps](https://reader030.vdocuments.us/reader030/viewer/2022021502/586e8be01a28aba0038b8229/html5/thumbnails/35.jpg)
![Page 37: Progressive Mobile Web Apps](https://reader030.vdocuments.us/reader030/viewer/2022021502/586e8be01a28aba0038b8229/html5/thumbnails/37.jpg)
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 に登録できた!'); }); }
![Page 38: Progressive Mobile Web Apps](https://reader030.vdocuments.us/reader030/viewer/2022021502/586e8be01a28aba0038b8229/html5/thumbnails/38.jpg)
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); }) ); });
![Page 40: Progressive Mobile Web Apps](https://reader030.vdocuments.us/reader030/viewer/2022021502/586e8be01a28aba0038b8229/html5/thumbnails/40.jpg)
![Page 42: Progressive Mobile Web Apps](https://reader030.vdocuments.us/reader030/viewer/2022021502/586e8be01a28aba0038b8229/html5/thumbnails/42.jpg)
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); } ) ); });
![Page 46: Progressive Mobile Web Apps](https://reader030.vdocuments.us/reader030/viewer/2022021502/586e8be01a28aba0038b8229/html5/thumbnails/46.jpg)
![Page 47: Progressive Mobile Web Apps](https://reader030.vdocuments.us/reader030/viewer/2022021502/586e8be01a28aba0038b8229/html5/thumbnails/47.jpg)
![Page 48: Progressive Mobile Web Apps](https://reader030.vdocuments.us/reader030/viewer/2022021502/586e8be01a28aba0038b8229/html5/thumbnails/48.jpg)
{ "short_name": "れっさーもふもふ", "name": "レッサーパンダのもふもふ素敵アプリ!", "icons": [ { "src": "launcher-icon-3x.png", "sizes": "144x144", "type": "image/png" } ], "start_url": "index.html", "display": "standalone" }
![Page 50: Progressive Mobile Web Apps](https://reader030.vdocuments.us/reader030/viewer/2022021502/586e8be01a28aba0038b8229/html5/thumbnails/50.jpg)
![Page 52: Progressive Mobile Web Apps](https://reader030.vdocuments.us/reader030/viewer/2022021502/586e8be01a28aba0038b8229/html5/thumbnails/52.jpg)
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 でプッシュ通知! }
![Page 53: Progressive Mobile Web Apps](https://reader030.vdocuments.us/reader030/viewer/2022021502/586e8be01a28aba0038b8229/html5/thumbnails/53.jpg)
![Page 55: Progressive Mobile Web Apps](https://reader030.vdocuments.us/reader030/viewer/2022021502/586e8be01a28aba0038b8229/html5/thumbnails/55.jpg)
![Page 56: Progressive Mobile Web Apps](https://reader030.vdocuments.us/reader030/viewer/2022021502/586e8be01a28aba0038b8229/html5/thumbnails/56.jpg)
![Page 57: Progressive Mobile Web Apps](https://reader030.vdocuments.us/reader030/viewer/2022021502/586e8be01a28aba0038b8229/html5/thumbnails/57.jpg)
![Page 58: Progressive Mobile Web Apps](https://reader030.vdocuments.us/reader030/viewer/2022021502/586e8be01a28aba0038b8229/html5/thumbnails/58.jpg)
HTML5
CSS3
WebGLECMA6
DOM4 HTTP/2
IndexedDB
ServiceWorkers
WAI-ARIA
WebRTC
Presentation
TCP
asm.js
SVG
Audio
Push
ManifestWebVR
DNT
![Page 59: Progressive Mobile Web Apps](https://reader030.vdocuments.us/reader030/viewer/2022021502/586e8be01a28aba0038b8229/html5/thumbnails/59.jpg)
![Page 60: Progressive Mobile Web Apps](https://reader030.vdocuments.us/reader030/viewer/2022021502/586e8be01a28aba0038b8229/html5/thumbnails/60.jpg)