Progressive Web Apps with ReactJS

Progressive Web Apps with ReactJSProgressive Web Apps with ReactJSProgressive Web Apps with ReactJSProgressive Web Apps with ReactJSProgressive Web Apps with ReactJSProgressive Web Apps with ReactJSProgressive Web Apps with ReactJSProgressive Web Apps with ReactJSProgressive Web Apps with ReactJSProgressive Web Apps with ReactJSProgressive Web Apps with ReactJSProgressive Web Apps with ReactJSProgressive Web Apps with ReactJSProgressive Web Apps with ReactJSProgressive Web Apps with ReactJSProgressive Web Apps with ReactJSProgressive Web Apps with ReactJSProgressive Web Apps with ReactJSProgressive Web Apps with ReactJS

Progressive Web Apps with ReactJS

Full stack Developer, Devops Guy, Book Lover

Me

Our Agenda

PWA

goo.gl/w9Bnge

The hardest problem with software is

distribution.

Reach

App

Web

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

.then(function(registration) {

console.log('SW registered! Scope is:', registration.scope);}); // catch a registration error

main.js

self.addEventListener('install', function(event) {

// Do stuff during install

});

service-worker.js

self.addEventListener('activate', function(event) {

// Do stuff during activate

// self.clients.claim ; force control of uncontrolled clients});

service-worker.js

Code - Background sync

navigator.serviceWorker.register('/sw.js');

// Later request a one-off sync:

navigator.serviceWorker.ready.then(function(swRegistration) {

});

main.js

Service Workers Prerequisites

development purpose we can use localhost

<Code />

sw-precache

sw-toolbox

importScripts( 'sw-toolbox/sw-toolbox.js' );

// examples of using strategies

toolbox.router.get( '/getImage*' , toolbox.cacheFirst, {

"Cache" :{

"maxEntries" : 100,

"Name" : "images-cache" ,

"maxAgeSeconds" : 60*60*24 }

});

Cache Only

Network Only

Cache First

Network First

Fastest

Web App Manifest

"icons": [

{

"src": "images/Airhorner_192.png" , "type": "image/png" ,

"name" : "The Air Horner" ,

"short_name": "Air Horner" ,

}

<Code />

Demo

Lighthouse

Tips and Notes

connection

cross-browser

let's build something awesome

Thank you