Download pdf - Modern Mobile Web Apps

Transcript
Page 1: Modern Mobile Web Apps
Page 3: Modern Mobile Web Apps
Page 4: Modern Mobile Web Apps
Page 8: Modern Mobile Web Apps
Page 9: Modern Mobile Web Apps
Page 18: Modern Mobile Web Apps
Page 19: Modern Mobile Web Apps
Page 20: Modern Mobile Web Apps
Page 21: Modern Mobile Web Apps
Page 22: Modern Mobile Web Apps
Page 23: Modern Mobile Web Apps
Page 24: Modern Mobile Web Apps
Page 25: Modern Mobile Web Apps
Page 26: Modern Mobile Web Apps
Page 32: Modern Mobile Web Apps
Page 33: Modern Mobile Web Apps
Page 35: Modern Mobile Web Apps

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 37: Modern Mobile Web Apps
Page 39: Modern Mobile Web Apps

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 43: Modern Mobile Web Apps
Page 44: Modern Mobile Web Apps
Page 45: Modern Mobile Web Apps

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

Page 47: Modern Mobile Web Apps
Page 50: Modern Mobile Web Apps

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 51: Modern Mobile Web Apps
Page 53: Modern Mobile Web Apps
Page 54: Modern Mobile Web Apps
Page 55: Modern Mobile Web Apps
Page 56: Modern Mobile Web Apps

HTML5

CSS3

WebGLECMA6

DOM4 HTTP/2

IndexedDB

ServiceWorkers

WAI-ARIA

WebRTC

Presentation

TCP

asm.js

SVG

Audio

Push

ManifestWebVR

DNT

Page 57: Modern Mobile Web Apps
Page 58: Modern Mobile Web Apps

Recommended