SlideShare a Scribd company logo
1 of 58
Download to read offline
























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);
})
);
});


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);
}
)
);
});
{
"short_name": "れっさーもふもふ",
"name": "レッサーパンダのもふもふ素敵アプリ!",
"icons": [
{
"src": "launcher-icon-3x.png",
"sizes": "144x144",
"type": "image/png"
}
],
"start_url": "index.html",
"display": "standalone"
}


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 でプッシュ通知!
}


HTML5
CSS3
WebGL
ECMA6
DOM4
HTTP/2
IndexedDB
Service

Workers
WAI-ARIA
WebRTC
Presentation
TCP
asm.js
SVG
Audio
Push
Manifest
WebVR
DNT
Modern Mobile Web Apps
Modern Mobile Web Apps

More Related Content

What's hot

jQuery for designers
jQuery for designersjQuery for designers
jQuery for designersJohan Ronsse
 
Фатальный недостаток Node.js
Фатальный недостаток Node.jsФатальный недостаток Node.js
Фатальный недостаток Node.jsOleksii 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 itUsing 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 itKrasimir Tsonev
 
Introduction to Service Worker
Introduction to Service WorkerIntroduction to Service Worker
Introduction to Service WorkerShogo Sensui
 
Invoke y como poner en marcha un entorno de trabajo
Invoke y como poner en marcha un entorno de trabajoInvoke y como poner en marcha un entorno de trabajo
Invoke y como poner en marcha un entorno de trabajoNaN-tic
 
Node.js をさりげなく取り入れた 最近のフロントエンド事情について
Node.js をさりげなく取り入れた 最近のフロントエンド事情についてNode.js をさりげなく取り入れた 最近のフロントエンド事情について
Node.js をさりげなく取り入れた 最近のフロントエンド事情についてkamiyam .
 
OpenResty/Lua 70+ Advanced Programming Skills and Optimization tips
OpenResty/Lua 70+ Advanced Programming Skills and Optimization tipsOpenResty/Lua 70+ Advanced Programming Skills and Optimization tips
OpenResty/Lua 70+ Advanced Programming Skills and Optimization tipsHo Kim
 
Node.js and Web.js
Node.js and Web.jsNode.js and Web.js
Node.js and Web.jsWill Gunn
 
SSP - The Simple Singleton Pattern
SSP - The Simple Singleton PatternSSP - The Simple Singleton Pattern
SSP - The Simple Singleton PatternRodolfo Dias
 
HTML5を使ったウェブアプリケーションの高速化
HTML5を使ったウェブアプリケーションの高速化HTML5を使ったウェブアプリケーションの高速化
HTML5を使ったウェブアプリケーションの高速化hagino 3000
 
Where to start refactoring?
Where to start refactoring?Where to start refactoring?
Where to start refactoring?thiagoalessio
 
Java Script - Object-Oriented Programming
Java Script - Object-Oriented ProgrammingJava Script - Object-Oriented Programming
Java Script - Object-Oriented Programmingintive
 
Working With Ajax Frameworks
Working With Ajax FrameworksWorking With Ajax Frameworks
Working With Ajax FrameworksJonathan Snook
 
JS programowanie obiektowe
JS  programowanie obiektoweJS  programowanie obiektowe
JS programowanie obiektowePiotr Czajkowski
 
Week 7 unit3 (chapter 10-11)
Week 7   unit3 (chapter 10-11)Week 7   unit3 (chapter 10-11)
Week 7 unit3 (chapter 10-11)aj.mapling
 
Nodejs party-socket demo
Nodejs party-socket demoNodejs party-socket demo
Nodejs party-socket demoSky Wang
 
How to stop writing spaghetti code - JSConf.eu 2010
How to stop writing spaghetti code - JSConf.eu 2010How to stop writing spaghetti code - JSConf.eu 2010
How to stop writing spaghetti code - JSConf.eu 2010Tom Croucher
 
Angularjs 개인견해
Angularjs 개인견해Angularjs 개인견해
Angularjs 개인견해학섭 오
 

What's hot (20)

jQuery for designers
jQuery for designersjQuery for designers
jQuery for designers
 
Фатальный недостаток Node.js
Фатальный недостаток Node.jsФатальный недостаток 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 itUsing 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 WorkerIntroduction 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 trabajoInvoke y como poner en marcha un entorno de trabajo
Invoke y como poner en marcha un entorno de trabajo
 
Node.js をさりげなく取り入れた 最近のフロントエンド事情について
Node.js をさりげなく取り入れた 最近のフロントエンド事情についてNode.js をさりげなく取り入れた 最近のフロントエンド事情について
Node.js をさりげなく取り入れた 最近のフロントエンド事情について
 
OpenResty/Lua 70+ Advanced Programming Skills and Optimization tips
OpenResty/Lua 70+ Advanced Programming Skills and Optimization tipsOpenResty/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.jsNode.js and Web.js
Node.js and Web.js
 
SSP - The Simple Singleton Pattern
SSP - The Simple Singleton PatternSSP - The Simple Singleton Pattern
SSP - The Simple Singleton Pattern
 
HTML5を使ったウェブアプリケーションの高速化
HTML5を使ったウェブアプリケーションの高速化HTML5を使ったウェブアプリケーションの高速化
HTML5を使ったウェブアプリケーションの高速化
 
Where to start refactoring?
Where to start refactoring?Where to start refactoring?
Where to start refactoring?
 
Slay
SlaySlay
Slay
 
Java Script - Object-Oriented Programming
Java Script - Object-Oriented ProgrammingJava Script - Object-Oriented Programming
Java Script - Object-Oriented Programming
 
Working With Ajax Frameworks
Working With Ajax FrameworksWorking With Ajax Frameworks
Working With Ajax Frameworks
 
JS programowanie obiektowe
JS  programowanie obiektoweJS  programowanie obiektowe
JS programowanie obiektowe
 
Week 7 unit3 (chapter 10-11)
Week 7   unit3 (chapter 10-11)Week 7   unit3 (chapter 10-11)
Week 7 unit3 (chapter 10-11)
 
Nodejs party-socket demo
Nodejs party-socket demoNodejs party-socket demo
Nodejs party-socket demo
 
How to stop writing spaghetti code - JSConf.eu 2010
How to stop writing spaghetti code - JSConf.eu 2010How to stop writing spaghetti code - JSConf.eu 2010
How to stop writing spaghetti code - JSConf.eu 2010
 
PHP Profiling
PHP ProfilingPHP Profiling
PHP Profiling
 
Angularjs 개인견해
Angularjs 개인견해Angularjs 개인견해
Angularjs 개인견해
 

Viewers also liked

Firefox OS TV
Firefox OS TVFirefox OS TV
Firefox OS TVdynamis
 
OSC2016.Enterprise Lightnig Talk
OSC2016.Enterprise Lightnig TalkOSC2016.Enterprise Lightnig Talk
OSC2016.Enterprise Lightnig Talkdynamis
 
Demo for Gecko Embedded
Demo for Gecko EmbeddedDemo for Gecko Embedded
Demo for Gecko Embeddeddynamis
 
Toward Firefox OS
Toward Firefox OSToward Firefox OS
Toward Firefox OSdynamis
 
Advanced technic for OS upgrading in 3 minutes
Advanced technic for OS upgrading in 3 minutesAdvanced technic for OS upgrading in 3 minutes
Advanced technic for OS upgrading in 3 minutesHiroshi SHIBATA
 
アメブロの大規模システム刷新と それを支えるSpring
アメブロの大規模システム刷新と それを支えるSpringアメブロの大規模システム刷新と それを支えるSpring
アメブロの大規模システム刷新と それを支えるSpringTakuya Hattori
 
データベース設計徹底指南
データベース設計徹底指南データベース設計徹底指南
データベース設計徹底指南Mikiya Okuno
 

Viewers also liked (8)

Firefox OS TV
Firefox OS TVFirefox OS TV
Firefox OS TV
 
OSC2016.Enterprise Lightnig Talk
OSC2016.Enterprise Lightnig TalkOSC2016.Enterprise Lightnig Talk
OSC2016.Enterprise Lightnig Talk
 
Demo for Gecko Embedded
Demo for Gecko EmbeddedDemo for Gecko Embedded
Demo for Gecko Embedded
 
Toward Firefox OS
Toward Firefox OSToward Firefox OS
Toward Firefox OS
 
Advanced technic for OS upgrading in 3 minutes
Advanced technic for OS upgrading in 3 minutesAdvanced technic for OS upgrading in 3 minutes
Advanced technic for OS upgrading in 3 minutes
 
Effective ES6
Effective ES6Effective ES6
Effective ES6
 
アメブロの大規模システム刷新と それを支えるSpring
アメブロの大規模システム刷新と それを支えるSpringアメブロの大規模システム刷新と それを支えるSpring
アメブロの大規模システム刷新と それを支えるSpring
 
データベース設計徹底指南
データベース設計徹底指南データベース設計徹底指南
データベース設計徹底指南
 

More from dynamis

HTTP and 5G (fixed1)
HTTP and 5G (fixed1)HTTP and 5G (fixed1)
HTTP and 5G (fixed1)dynamis
 
HTTP and 5G
HTTP and 5GHTTP and 5G
HTTP and 5Gdynamis
 
HTTP and 5G partial draft
HTTP and 5G partial draftHTTP and 5G partial draft
HTTP and 5G partial draftdynamis
 
Web App Platform Strategy
Web App Platform StrategyWeb App Platform Strategy
Web App Platform Strategydynamis
 
HTML5 & Renesas RZ/G
HTML5 & Renesas RZ/GHTML5 & Renesas RZ/G
HTML5 & Renesas RZ/Gdynamis
 
Life of html5 (osaka)
Life of html5 (osaka)Life of html5 (osaka)
Life of html5 (osaka)dynamis
 
Web updates 2017
Web updates 2017Web updates 2017
Web updates 2017dynamis
 
Life of HTML5
Life of HTML5Life of HTML5
Life of HTML5dynamis
 
Browsers in IoT Era
Browsers in IoT EraBrowsers in IoT Era
Browsers in IoT Eradynamis
 
New Norm of HTML5
New Norm of HTML5New Norm of HTML5
New Norm of HTML5dynamis
 
Edge Web Technologies and Browser Vendors (Updated on 2016/09/06)
Edge Web Technologies and Browser Vendors (Updated on 2016/09/06)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 EmbeddedProject Gecko Embedded
Project Gecko Embeddeddynamis
 
The New Norm of The Web
The New Norm of The WebThe New Norm of The Web
The New Norm of The Webdynamis
 
Web Tech & Architecture
Web Tech & ArchitectureWeb Tech & Architecture
Web Tech & Architecturedynamis
 
Data Privacy meeting
Data Privacy meetingData Privacy meeting
Data Privacy meetingdynamis
 
Inspect Hack Ignite!
Inspect Hack Ignite!Inspect Hack Ignite!
Inspect Hack Ignite!dynamis
 
Years with JavaScript.Next
Years with JavaScript.NextYears with JavaScript.Next
Years with JavaScript.Nextdynamis
 
Next step of Firefox OS
Next step of Firefox OSNext step of Firefox OS
Next step of Firefox OSdynamis
 
Firefox Ecosystem in Kagoshima
Firefox Ecosystem in KagoshimaFirefox Ecosystem in Kagoshima
Firefox Ecosystem in Kagoshimadynamis
 
Firefox Ecosystem
Firefox EcosystemFirefox Ecosystem
Firefox Ecosystemdynamis
 

More from dynamis (20)

HTTP and 5G (fixed1)
HTTP and 5G (fixed1)HTTP and 5G (fixed1)
HTTP and 5G (fixed1)
 
HTTP and 5G
HTTP and 5GHTTP and 5G
HTTP and 5G
 
HTTP and 5G partial draft
HTTP and 5G partial draftHTTP and 5G partial draft
HTTP and 5G partial draft
 
Web App Platform Strategy
Web App Platform StrategyWeb App Platform Strategy
Web App Platform Strategy
 
HTML5 & Renesas RZ/G
HTML5 & Renesas RZ/GHTML5 & Renesas RZ/G
HTML5 & Renesas RZ/G
 
Life of html5 (osaka)
Life of html5 (osaka)Life of html5 (osaka)
Life of html5 (osaka)
 
Web updates 2017
Web updates 2017Web updates 2017
Web updates 2017
 
Life of HTML5
Life of HTML5Life of HTML5
Life of HTML5
 
Browsers in IoT Era
Browsers in IoT EraBrowsers in IoT Era
Browsers in IoT Era
 
New Norm of HTML5
New Norm of HTML5New 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)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 EmbeddedProject Gecko Embedded
Project Gecko Embedded
 
The New Norm of The Web
The New Norm of The WebThe New Norm of The Web
The New Norm of The Web
 
Web Tech & Architecture
Web Tech & ArchitectureWeb Tech & Architecture
Web Tech & Architecture
 
Data Privacy meeting
Data Privacy meetingData Privacy meeting
Data Privacy meeting
 
Inspect Hack Ignite!
Inspect Hack Ignite!Inspect Hack Ignite!
Inspect Hack Ignite!
 
Years with JavaScript.Next
Years with JavaScript.NextYears with JavaScript.Next
Years with JavaScript.Next
 
Next step of Firefox OS
Next step of Firefox OSNext step of Firefox OS
Next step of Firefox OS
 
Firefox Ecosystem in Kagoshima
Firefox Ecosystem in KagoshimaFirefox Ecosystem in Kagoshima
Firefox Ecosystem in Kagoshima
 
Firefox Ecosystem
Firefox EcosystemFirefox Ecosystem
Firefox Ecosystem
 

Modern Mobile Web Apps