Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
























var CACHE_NAME = 'my-site-cache-v1';
var urlsToCache = [ '/', '/style.css', '/script.js'];
self.addEventListener('install'...


var urlsToCache = [ '/', '/style.css', '/script.js'];

self.addEventListener('fetch', function(event) {
event.respondWith(...
{
"short_name": "れっさーもふもふ",
"name": "レッサーパンダのもふもふ素敵アプリ!",
"icons": [
{
"src": "launcher-icon-3x.png",
"sizes": "144x144",
...


async function registerForPush() {
// Service Worker を登録、
let registration = await navigator.serviceWorker.register('sw.js...


HTML5
CSS3
WebGL
ECMA6
DOM4
HTTP/2
IndexedDB
Service

Workers
WAI-ARIA
WebRTC
Presentation
TCP
asm.js
SVG
Audio
Push
Manif...
Modern Mobile Web Apps
Modern Mobile Web Apps
Modern Mobile Web Apps
Modern Mobile Web Apps
Modern Mobile Web Apps
Modern Mobile Web Apps
Modern Mobile Web Apps
Modern Mobile Web Apps
Modern Mobile Web Apps
Modern Mobile Web Apps
Modern Mobile Web Apps
Modern Mobile Web Apps
Modern Mobile Web Apps
Modern Mobile Web Apps
Modern Mobile Web Apps
Modern Mobile Web Apps
Modern Mobile Web Apps
Modern Mobile Web Apps
Modern Mobile Web Apps
Modern Mobile Web Apps
Modern Mobile Web Apps
Modern Mobile Web Apps
Modern Mobile Web Apps
Modern Mobile Web Apps
Modern Mobile Web Apps
Modern Mobile Web Apps
Modern Mobile Web Apps
Modern Mobile Web Apps
Modern Mobile Web Apps
Modern Mobile Web Apps
Modern Mobile Web Apps
Modern Mobile Web Apps
Modern Mobile Web Apps
Modern Mobile Web Apps
Modern Mobile Web Apps
Modern Mobile Web Apps
Modern Mobile Web Apps
Modern Mobile Web Apps
Modern Mobile Web Apps
Modern Mobile Web Apps
Modern Mobile Web Apps
Modern Mobile Web Apps
Modern Mobile Web Apps
Prochain SlideShare
Chargement dans…5
×

Modern Mobile Web Apps

2 680 vues

Publié le

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

Publié dans : Technologie
  • Soyez le premier à commenter

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

×