Submit Search
Upload
Modern Mobile Web Apps
•
13 likes
•
3,281 views
dynamis
Follow
ABC 2016 Spring で使用したスライド
Read less
Read more
Technology
Report
Share
Report
Share
1 of 58
Download now
Download to read offline
Recommended
Progressive Mobile Web Apps
Progressive Mobile Web Apps
dynamis
Java script.trend(spec)
Java script.trend(spec)
dynamis
Discover ServiceWorker
Discover ServiceWorker
Sandro Paganotti
Rubyslava2102
Rubyslava2102
Marius Sajgalik
JavaScript Assíncrono
JavaScript Assíncrono
Natã Barbosa
Dart und JavaScript
Dart und JavaScript
Christian Grobmeier
Dart != JavaScript
Dart != JavaScript
Christian Grobmeier
Node.JS
Node.JS
eibaan
Recommended
Progressive Mobile Web Apps
Progressive Mobile Web Apps
dynamis
Java script.trend(spec)
Java script.trend(spec)
dynamis
Discover ServiceWorker
Discover ServiceWorker
Sandro Paganotti
Rubyslava2102
Rubyslava2102
Marius Sajgalik
JavaScript Assíncrono
JavaScript Assíncrono
Natã Barbosa
Dart und JavaScript
Dart und JavaScript
Christian Grobmeier
Dart != JavaScript
Dart != JavaScript
Christian Grobmeier
Node.JS
Node.JS
eibaan
jQuery for designers
jQuery for designers
Johan Ronsse
Фатальный недостаток Node.js
Фатальный недостаток Node.js
Oleksii Okhrymenko
Using Node.js for everything or what it is to write a book about it
Using Node.js for everything or what it is to write a book about it
Krasimir Tsonev
Introduction to Service Worker
Introduction to Service Worker
Shogo Sensui
Invoke y como poner en marcha un entorno de trabajo
Invoke y como poner en marcha un entorno de trabajo
NaN-tic
Node.js をさりげなく取り入れた 最近のフロントエンド事情について
Node.js をさりげなく取り入れた 最近のフロントエンド事情について
kamiyam .
OpenResty/Lua 70+ Advanced Programming Skills and Optimization tips
OpenResty/Lua 70+ Advanced Programming Skills and Optimization tips
Ho Kim
Node.js and Web.js
Node.js and Web.js
Will Gunn
SSP - The Simple Singleton Pattern
SSP - The Simple Singleton Pattern
Rodolfo Dias
HTML5を使ったウェブアプリケーションの高速化
HTML5を使ったウェブアプリケーションの高速化
hagino 3000
Where to start refactoring?
Where to start refactoring?
thiagoalessio
Slay
Slay
635893635893
Java Script - Object-Oriented Programming
Java Script - Object-Oriented Programming
intive
Working With Ajax Frameworks
Working With Ajax Frameworks
Jonathan Snook
JS programowanie obiektowe
JS programowanie obiektowe
Piotr Czajkowski
Week 7 unit3 (chapter 10-11)
Week 7 unit3 (chapter 10-11)
aj.mapling
Nodejs party-socket demo
Nodejs party-socket demo
Sky Wang
How to stop writing spaghetti code - JSConf.eu 2010
How to stop writing spaghetti code - JSConf.eu 2010
Tom Croucher
PHP Profiling
PHP Profiling
Sungbum Hong
Angularjs 개인견해
Angularjs 개인견해
학섭 오
Firefox OS TV
Firefox OS TV
dynamis
OSC2016.Enterprise Lightnig Talk
OSC2016.Enterprise Lightnig Talk
dynamis
More Related Content
What's hot
jQuery for designers
jQuery for designers
Johan Ronsse
Фатальный недостаток Node.js
Фатальный недостаток Node.js
Oleksii Okhrymenko
Using Node.js for everything or what it is to write a book about it
Using Node.js for everything or what it is to write a book about it
Krasimir Tsonev
Introduction to Service Worker
Introduction to Service Worker
Shogo Sensui
Invoke y como poner en marcha un entorno de trabajo
Invoke y como poner en marcha un entorno de trabajo
NaN-tic
Node.js をさりげなく取り入れた 最近のフロントエンド事情について
Node.js をさりげなく取り入れた 最近のフロントエンド事情について
kamiyam .
OpenResty/Lua 70+ Advanced Programming Skills and Optimization tips
OpenResty/Lua 70+ Advanced Programming Skills and Optimization tips
Ho Kim
Node.js and Web.js
Node.js and Web.js
Will Gunn
SSP - The Simple Singleton Pattern
SSP - The Simple Singleton Pattern
Rodolfo Dias
HTML5を使ったウェブアプリケーションの高速化
HTML5を使ったウェブアプリケーションの高速化
hagino 3000
Where to start refactoring?
Where to start refactoring?
thiagoalessio
Slay
Slay
635893635893
Java Script - Object-Oriented Programming
Java Script - Object-Oriented Programming
intive
Working With Ajax Frameworks
Working With Ajax Frameworks
Jonathan Snook
JS programowanie obiektowe
JS programowanie obiektowe
Piotr Czajkowski
Week 7 unit3 (chapter 10-11)
Week 7 unit3 (chapter 10-11)
aj.mapling
Nodejs party-socket demo
Nodejs party-socket demo
Sky Wang
How to stop writing spaghetti code - JSConf.eu 2010
How to stop writing spaghetti code - JSConf.eu 2010
Tom Croucher
PHP Profiling
PHP Profiling
Sungbum Hong
Angularjs 개인견해
Angularjs 개인견해
학섭 오
What's hot
(20)
jQuery for designers
jQuery for designers
Фатальный недостаток Node.js
Фатальный недостаток Node.js
Using Node.js for everything or what it is to write a book about it
Using Node.js for everything or what it is to write a book about it
Introduction to Service Worker
Introduction to Service Worker
Invoke y como poner en marcha un entorno de trabajo
Invoke y como poner en marcha un entorno de trabajo
Node.js をさりげなく取り入れた 最近のフロントエンド事情について
Node.js をさりげなく取り入れた 最近のフロントエンド事情について
OpenResty/Lua 70+ Advanced Programming Skills and Optimization tips
OpenResty/Lua 70+ Advanced Programming Skills and Optimization tips
Node.js and Web.js
Node.js and Web.js
SSP - The Simple Singleton Pattern
SSP - The Simple Singleton Pattern
HTML5を使ったウェブアプリケーションの高速化
HTML5を使ったウェブアプリケーションの高速化
Where to start refactoring?
Where to start refactoring?
Slay
Slay
Java Script - Object-Oriented Programming
Java Script - Object-Oriented Programming
Working With Ajax Frameworks
Working With Ajax Frameworks
JS programowanie obiektowe
JS programowanie obiektowe
Week 7 unit3 (chapter 10-11)
Week 7 unit3 (chapter 10-11)
Nodejs party-socket demo
Nodejs party-socket demo
How to stop writing spaghetti code - JSConf.eu 2010
How to stop writing spaghetti code - JSConf.eu 2010
PHP Profiling
PHP Profiling
Angularjs 개인견해
Angularjs 개인견해
Viewers also liked
Firefox OS TV
Firefox OS TV
dynamis
OSC2016.Enterprise Lightnig Talk
OSC2016.Enterprise Lightnig Talk
dynamis
Demo for Gecko Embedded
Demo for Gecko Embedded
dynamis
Toward Firefox OS
Toward Firefox OS
dynamis
Advanced technic for OS upgrading in 3 minutes
Advanced technic for OS upgrading in 3 minutes
Hiroshi SHIBATA
Effective ES6
Effective ES6
Teppei Sato
アメブロの大規模システム刷新と それを支えるSpring
アメブロの大規模システム刷新と それを支えるSpring
Takuya Hattori
データベース設計徹底指南
データベース設計徹底指南
Mikiya Okuno
Viewers also liked
(8)
Firefox OS TV
Firefox OS TV
OSC2016.Enterprise Lightnig Talk
OSC2016.Enterprise Lightnig Talk
Demo for Gecko Embedded
Demo for Gecko Embedded
Toward Firefox OS
Toward Firefox OS
Advanced technic for OS upgrading in 3 minutes
Advanced technic for OS upgrading in 3 minutes
Effective ES6
Effective ES6
アメブロの大規模システム刷新と それを支えるSpring
アメブロの大規模システム刷新と それを支えるSpring
データベース設計徹底指南
データベース設計徹底指南
More from dynamis
HTTP and 5G (fixed1)
HTTP and 5G (fixed1)
dynamis
HTTP and 5G
HTTP and 5G
dynamis
HTTP and 5G partial draft
HTTP and 5G partial draft
dynamis
Web App Platform Strategy
Web App Platform Strategy
dynamis
HTML5 & Renesas RZ/G
HTML5 & Renesas RZ/G
dynamis
Life of html5 (osaka)
Life of html5 (osaka)
dynamis
Web updates 2017
Web updates 2017
dynamis
Life of HTML5
Life of HTML5
dynamis
Browsers in IoT Era
Browsers in IoT Era
dynamis
New Norm of HTML5
New Norm of HTML5
dynamis
Edge Web Technologies and Browser Vendors (Updated on 2016/09/06)
Edge Web Technologies and Browser Vendors (Updated on 2016/09/06)
dynamis
Project Gecko Embedded
Project Gecko Embedded
dynamis
The New Norm of The Web
The New Norm of The Web
dynamis
Web Tech & Architecture
Web Tech & Architecture
dynamis
Data Privacy meeting
Data Privacy meeting
dynamis
Inspect Hack Ignite!
Inspect Hack Ignite!
dynamis
Years with JavaScript.Next
Years with JavaScript.Next
dynamis
Next step of Firefox OS
Next step of Firefox OS
dynamis
Firefox Ecosystem in Kagoshima
Firefox Ecosystem in Kagoshima
dynamis
Firefox Ecosystem
Firefox Ecosystem
dynamis
More from dynamis
(20)
HTTP and 5G (fixed1)
HTTP and 5G (fixed1)
HTTP and 5G
HTTP and 5G
HTTP and 5G partial draft
HTTP and 5G partial draft
Web App Platform Strategy
Web App Platform Strategy
HTML5 & Renesas RZ/G
HTML5 & Renesas RZ/G
Life of html5 (osaka)
Life of html5 (osaka)
Web updates 2017
Web updates 2017
Life of HTML5
Life of HTML5
Browsers in IoT Era
Browsers in IoT Era
New Norm of HTML5
New Norm of HTML5
Edge Web Technologies and Browser Vendors (Updated on 2016/09/06)
Edge Web Technologies and Browser Vendors (Updated on 2016/09/06)
Project Gecko Embedded
Project Gecko Embedded
The New Norm of The Web
The New Norm of The Web
Web Tech & Architecture
Web Tech & Architecture
Data Privacy meeting
Data Privacy meeting
Inspect Hack Ignite!
Inspect Hack Ignite!
Years with JavaScript.Next
Years with JavaScript.Next
Next step of Firefox OS
Next step of Firefox OS
Firefox Ecosystem in Kagoshima
Firefox Ecosystem in Kagoshima
Firefox Ecosystem
Firefox Ecosystem
Modern Mobile Web Apps
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
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); }) ); });
36.
37.
38.
39.
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); } ) ); });
40.
41.
42.
43.
44.
45.
{ "short_name": "れっさーもふもふ", "name": "レッサーパンダのもふもふ素敵アプリ!", "icons":
[ { "src": "launcher-icon-3x.png", "sizes": "144x144", "type": "image/png" } ], "start_url": "index.html", "display": "standalone" }
46.
47.
48.
49.
50.
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 でプッシュ通知! }
51.
52.
53.
54.
55.
56.
HTML5 CSS3 WebGL ECMA6 DOM4 HTTP/2 IndexedDB Service Workers WAI-ARIA WebRTC Presentation TCP asm.js SVG Audio Push Manifest WebVR DNT
Download now