1 of 21

If a Web Developer could build Mobile apps�without going through App Store/ Play Store

​

2 of 21

About speaker

3 of 21

What is PWA?

PWAs are sort of a mix of a mobile app and a web app

​

​

4 of 21

PWA App Icon on Homescreen

​

Chrome uses a set of criteria and visit frequency heuristics to determine when to show the banner. �

5 of 21

Manifest.json

​

<link rel=”manifest” href=”/manifest.json”>

6 of 21

Push notifications

Once, we have the App icon on the Home screen, let’s try to send some push notification similar to app push notifications.

  1. Register Service Worker

Service Worker is Javascript Worker and it cannot access the DOM directly. It can communicate with web page through postMessage interface.

​

7 of 21

8 of 21

Registering a service worker

if ('serviceWorker' in navigator) {� // Register a service worker hosted at the root of the� // site using the default scope.� navigator.serviceWorker.register('/sw.js').then(function(registration) {� console.log('Service worker registration succeeded:', registration);� }).catch(function(error) {� console.log('Service worker registration failed:', error);� });�} else {� console.log('Service workers are not supported.');�}

9 of 21

Steps for push notification

The following summarizes the process of sending and receiving a push message and then displaying a push notification.

On the client:

  1. Subscribe to the push service
  2. Send the subscription object to the server

On the server:

  1. Generate the data that we want to send to the user
  2. Encrypt the data with the user public key
  3. Send the data to the endpoint URL with a payload of encrypted data.

​

10 of 21

Push notification listener

Push messaging provides a simple and effective way to re-engage with users.

Notification.requestPermission(function(status) {

console.log('Notification permission status:', status);

});

​

​

11 of 21

Sending push notifications through server

Voluntary Application Server Identification for Web Push (VAPID) protocol.

Using VAPID

The process is pretty simple:

  1. Your application server creates a public/private key pair. The public key is given to your web app.
  2. When the user elects to receive pushes, add the public key to the subscribe() call's options object.
  3. When your app server sends a push message, include a signed JSON web token along with the public key.

​

12 of 21

Web push

const webpush = require('web-push');

// VAPID keys should only be generated only once.

const vapidKeys = webpush.generateVAPIDKeys();

webpush.setGCMAPIKey('<Your GCM API Key Here>');

webpush.setVapidDetails(

'mailto:example@yourdomain.org',

vapidKeys.publicKey,

vapidKeys.privateKey

);

13 of 21

Sending Push notification

const pushSubscription = {

endpoint: '.....',

keys: {

auth: '.....',

p256dh: '.....'

}

};

​

webpush.sendNotification(pushSubscription, 'Your Push Payload Text');

14 of 21

Offline capabilities

What happens to the app when there is no internet connection?

​

15 of 21

Update

How to handle the app updates?

New version will not be activated immediately.

It’s up to the developer to display notifications on webapp to inform the user that a new update for the PWA is available

16 of 21

Advantages of React + PWA

React can render in the back-end using React.renderToString() (SSR)

Async import

​

17 of 21

18 of 21

Tools

Lighthouse�Workbox

19 of 21

Lighthouse

20 of 21

Workbox

Workbox is a collection of libraries and build tools that make it easy to store your website’s file locally, on your users’ devices.

const workbox = new WorkboxSW();

workbox.precache([

{

"url": "/index.html",

"revision": "b3e78d93b20c49d0c927050682c99df3"

}

]);

​

21 of 21

Workbox caching strategies

  • Cache only
  • Cache first, falling back to network
  • Cache, with network update
  • Network only
  • Network first, falling back to cache

const workboxSW = new WorkboxSW();

const networkFirst = workboxSW.strategies.networkFirst();

workboxSW.router.registerRoute('/schedule', networkFirst);

​

​