Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Modern Mobile Web Apps

2,672 views

Published on

ABC 2016 Spring で使用したスライド

Published in: Technology

Modern Mobile Web Apps

  1. 1. 
 

  2. 2.
  3. 3.
  4. 4. 
 

  5. 5. 
 
 

  6. 6.
  7. 7. 
 

  8. 8. 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); }) ); });
  9. 9.
  10. 10. 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); } ) ); });
  11. 11. { "short_name": "れっさーもふもふ", "name": "レッサーパンダのもふもふ素敵アプリ!", "icons": [ { "src": "launcher-icon-3x.png", "sizes": "144x144", "type": "image/png" } ], "start_url": "index.html", "display": "standalone" }
  12. 12.
  13. 13. 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 でプッシュ通知! }
  14. 14.
  15. 15. HTML5 CSS3 WebGL ECMA6 DOM4 HTTP/2 IndexedDB Service
 Workers WAI-ARIA WebRTC Presentation TCP asm.js SVG Audio Push Manifest WebVR DNT

×