Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Progressive Mobile Web Apps

3.290 visualizaciones

Publicado el

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

Publicado en: Tecnología
  • Sé el primero en comentar

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

×