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.

Web Tech & Architecture

1,853 views

Published on

OSC 2016 Tokyo/Spring で使用したスライド
https://www.ospn.jp/osc2016-spring/modules/eguide/event.php?eid=82

Published in: Technology
  • Be the first to comment

Web Tech & Architecture

  1. 1. 
 

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

  5. 5. 
 
 

  6. 6.
  7. 7.
  8. 8. 
 
 

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

×