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.

Progressive Mobile Web Apps

3,135 views

Published on

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

Published in: Technology
  • Be the first to comment

Progressive Mobile Web Apps

  1. 1. 
 

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

  5. 5. 
 
 

  6. 6.
  7. 7. 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 に登録できた!'); }); }
  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. 
 
 
 

  12. 12. 
 
 

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

×