Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Progressive Mobile Web Apps

3.286 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

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

×