Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Progressive Web Apps with React
Search
Jonathan Mills
October 10, 2018
Technology
0
31
Progressive Web Apps with React
Jonathan Mills
October 10, 2018
Tweet
Share
More Decks by Jonathan Mills
See All by Jonathan Mills
Javascript’s scary side
jonathanfmills
0
380
Keeping Up
jonathanfmills
1
190
Other Decks in Technology
See All in Technology
より快適なエラーログ監視を目指して
leveragestech
4
1.5k
DuckDB雑紹介(1.1対応版)@DuckDB座談会
ktz
6
1.4k
実務における脅威モデリングを考えよう
nikinusu
0
670
AIを活用した柔軟かつ効率的な社内リソース検索への取り組み
cygames
0
180
『GRANBLUE FANTASY Relink』ソフトウェアラスタライザによる実践的なオクルージョンカリング
cygames
0
170
QAに対する超個人的な解釈 / Personal Take on QA
toma_sm
1
120
【株式会社ELYZA】|GENIAC成果報告会 自社開発モデルプレゼンテーション
elyza
1
300
アプリをリリースできる状態に保ったまま 段階的にリファクタリングするための 戦略と戦術 / Strategies and tactics for incremental refactoring
yanzm
6
1.4k
Privacy Sandbox on Android / DroidKaigi 2024
7pairs
1
270
株式会社EventHub・エンジニア採用資料
eventhub
0
3k
忙しい人のためのLangGraph概要まとめ
__ymgc__
1
190
Technical Writing Meetup vol.35
soracom
PRO
2
120
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
65
4.3k
Rails Girls Zürich Keynote
gr2m
93
13k
10 Git Anti Patterns You Should be Aware of
lemiorhan
653
58k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Speed Design
sergeychernyshev
22
430
Faster Mobile Websites
deanohume
304
30k
The Straight Up "How To Draw Better" Workshop
denniskardys
230
130k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.1k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
41
6.5k
BBQ
matthewcrist
83
9.2k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
24
610
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
Transcript
@ j o n a t h a n f
m i l l s #reactPWA P R O G R E S S I V E W E B A P P S W I T H R E A C T
None
None
None
Progressive Web Apps to the rescue!
What is a PWA? RELIABLE
What is a PWA? RELIABLE FAST
What is a PWA? RELIABLE FAST ENGAGING
Demo
None
Service Workers
Have you heard of a Web Worker?
ServiceWorker != WebWorker
None
if('serviceWorker' in navigator) { navigator.serviceWorker.register('/offline.js', { scope: '/' }) .then(function(registration)
{ console.log('Service Worker Registered'); }); navigator.serviceWorker.ready .then(function(registration) { console.log('Service Worker Ready'); }); } SERVICE WORKER
INSTALL const CACHE_NAME = ‘DevUp’ // Version 0.6.5 self.addEventListener('install', e
=> { console.log('installing service worker!!') const timeStamp = Date.now(); e.waitUntil( caches.open(CACHE_NAME).then(cache => { return cache.addAll([ `/`, `/index.html`, `/json/data.json`, `/static/js/bundle.js` ]) .then(() => self.skipWaiting()); }) ); });
INSTALL const CACHE_NAME = ‘DevUp’ // Version 0.6.5 self.addEventListener('install', e
=> { console.log('installing service worker!!') const timeStamp = Date.now(); e.waitUntil( caches.open(CACHE_NAME).then(cache => { return cache.addAll([ `/`, `/index.html`, `/json/data.json`, `/static/js/bundle.js` ]) .then(() => self.skipWaiting()); }) ); });
INSTALL const CACHE_NAME = ‘DevUp' // Version 0.6.5 self.addEventListener('install', e
=> { console.log('installing service worker!!') const timeStamp = Date.now(); e.waitUntil( caches.open(CACHE_NAME).then(cache => { return cache.addAll([ `/`, `/index.html`, `/json/data.json`, `/static/js/bundle.js` ]) .then(() => self.skipWaiting()); }) ); });
ACTIVATE self.addEventListener('activate', event => { console.log('activating service worker'); event.waitUntil(self.clients.claim()); });
FETCH self.addEventListener('fetch', function(event) {…})
FETCH event.respondWith( caches.match(event.request) .then(function(response) { // Cache hit - return
response if (response) { return response; } var fetchRequest = event.request.clone(); return fetch(fetchRequest).then( function(response) { // Check if we received a valid response if(!response || response.status !== 200 || response.type !== 'basic'){ return response; } var responseToCache = response.clone(); caches.open(CACHE_NAME)
FETCH event.respondWith( caches.match(event.request) .then(function(response) { // Cache hit - return
response if (response) { return response; } var fetchRequest = event.request.clone(); return fetch(fetchRequest).then( function(response) { // Check if we received a valid response if(!response || response.status !== 200 || response.type !== 'basic'){ return response; } var responseToCache = response.clone(); caches.open(CACHE_NAME)
FETCH event.respondWith( caches.match(event.request) .then(function(response) { // Cache hit - return
response if (response) { return response; } var fetchRequest = event.request.clone(); return fetch(fetchRequest).then( function(response) { // Check if we received a valid response if(!response || response.status !== 200 || response.type !== 'basic'){ return response; } var responseToCache = response.clone(); caches.open(CACHE_NAME)
event.respondWith( caches.match(event.request) .then(function(response) { // Cache hit - return response
if (response) { return response; } var fetchRequest = event.request.clone(); return fetch(fetchRequest).then( function(response) { // Check if we received a valid response if(!response || response.status !== 200 || response.type !== 'basic'){ return response; } var responseToCache = response.clone(); caches.open(CACHE_NAME) FETCH
} var fetchRequest = event.request.clone(); return fetch(fetchRequest).then( function(response) { //
Check if we received a valid response if(!response || response.status !== 200 || response.type !== 'basic'){ return response; } var responseToCache = response.clone(); caches.open(CACHE_NAME) .then(function(cache) { cache.put(event.request, responseToCache); }); return response; } ); }) ); FETCH
} var fetchRequest = event.request.clone(); return fetch(fetchRequest).then( function(response) { //
Check if we received a valid response if(!response || response.status !== 200 || response.type !== 'basic'){ return response; } var responseToCache = response.clone(); caches.open(CACHE_NAME) .then(function(cache) { cache.put(event.request, responseToCache); }); return response; } ); }) ); FETCH
} var fetchRequest = event.request.clone(); return fetch(fetchRequest).then( function(response) { //
Check if we received a valid response if(!response || response.status !== 200 || response.type !== 'basic'){ return response; } var responseToCache = response.clone(); caches.open(CACHE_NAME) .then(function(cache) { cache.put(event.request, responseToCache); }); return response; } ); }) ); FETCH
} var fetchRequest = event.request.clone(); return fetch(fetchRequest).then( function(response) { //
Check if we received a valid response if(!response || response.status !== 200 || response.type !== 'basic'){ return response; } var responseToCache = response.clone(); caches.open(CACHE_NAME) .then(function(cache) { cache.put(event.request, responseToCache); }); return response; } ); }) ); FETCH
Demo
None
Manifest
A manifest describes your web page in an
INDEX.HTML <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
MANIFEST { "short_name": "Library", "name": “DevUp Library Demo", "icons": [
{ "src": "book.png", "sizes": "192X192", "type": "image/png" } ], "start_url": "./index.html", "display": "standalone", "theme_color": "#000000", "background_color": "#ffffff" }
Demo
None
Let’s Deploy
None
Github Pages to the rescue
PACKAGE.JSON – ADDING GH-PAGES { "name": "library", "version": "0.1.0", "private":
true, "homepage": “https://jonathanfmills.github.io/DEVUPPWA”, "dependencies": { "gh-pages": "^1.1.0", … }, "scripts": { "predeploy": "npm run build", "deploy": "gh-pages -d build", } }
Demo
http://bit.ly/devuppwa
@ j o n a t h a n f
m i l l s #reactPWA P R O G R E S S I V E W E B A P P S W I T H R E A C T