Progressive Web Apps with ReactJS

Progressive Web Apps with ReactJS

Full stack Developer, Devops Guy, Book Lover


About
Me

-

Hoang Van Nam

-

Full stack Developer

-

Devops

-

Nodejs, Python, Golang

-

Admin of React Viet Nam

-

Member of nodejs.org

-

Book Lover


Our Agenda

PWA
Introduction

Technologies
Behind PWA

Code Example

Demo

Tips


goo.gl/w9Bnge




13%

.vs.

Mobile web
Source: comScore Mobile Metrix, U.S., Age 18+, June 2015

87%
Apps


The hardest problem with software is
distribution.


Capability

App

Web
Reach



App
Capability

PWA

Web
Reach


Progressive Web Apps

●

Reliable - Fast loading, work offline (never show the downasaur) and on
flaky network.

●

Fast - Smooth animations, jank-free scrolling and seamless navigation.

●

Engaging - Launched from home screen and send push notification.


Technologies Behind Progressive Web Apps
Service
Workers

Web App
Manifest File


Service Workers




Registration
main.js

if (!('serviceWorker' in navigator)) {
console.log('Service Worker not supported');
return;
}
navigator.serviceWorker.register('/service-worker.js')
.then(function(registration) {
console.log('SW registered! Scope is:', registration.scope);
}); // .catch a registration error


Installation
service-worker.js

self.addEventListener('install', function(event) {
// Do stuff during install
});


Activation
service-worker.js

self.addEventListener('activate', function(event) {
// Do stuff during activate
// self.clients.claim ; force control of uncontrolled clients
});


Responds to fetch
service-worker.js

self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request)
);
});


Code - Background sync
main.js

navigator.serviceWorker.register('/sw.js');
// Later request a one-off sync:
navigator.serviceWorker.ready.then(function(swRegistration) {
return swRegistration.sync.register('foo');
});


Service Workers Prerequisites
●

Browser Support : Currently supported on chrome,firefox and opera.

●

HTTPS : We need HTTPS site to make service worker run. For
development purpose we can use localhost


<Code />

sw-precache
● Generate Service Worker code
○ Precache static resources so they work offline
○ Handle versioning, redirects, etc.
● github.com/GoogleChrome/sw-precache


module.exports = {
staticFileGlobs: [
'app/css/**.css',
'app/**.html',
'app/images/**.*',
'app/js/**.js'
],
stripPrefix: 'app/',
runtimeCaching: [{
urlPattern: /this\\.is\\.a\\.regex/,
handler: 'networkFirst'
}]
};
Terminal
$ sw-precache --config=path/to/sw-precache-config.js --verbose