progressive web apps by millicent convento

Startup notes:

1. Slides URL: cardistry-arena.com/slides.php2. You can turn on your mobile data on for some

progressive web apps sites that we will visit during the presentation. Note: Please unblock the notifications temporarily.

Progressive Web Apps

Survey

If you’re going to use Facebook, Gmail or Google maps in your smartphone, which step will you use?

1. Go to chrome, then type in the URL bar facebook.com or youtube.com

(Mobile Web)

2. Tap in the Icon in your homescreen

(Native)

Mobile Web Vs. Native Apps

What is Progressive Web Apps?

Progressive Web Apps (PWA) is a new life-cycle model that combines most of the features of web apps with the benefits of mobile apps.

Its main features are instant loading, offline mode, cache control and push notifications.

Who’s using this?

Results: ● Users time on site with Flipkart

lite vs. previous mobile experience: 3.5 minutes vs 70 seconds.

● 40% higher re-engagement rate● 70% greater conversion rate

among those arriving via Add to Homescreen

● 3x lower data usage

India’s largest e-commerce site

Who’s using this?

Almost all of the top visited sites are using it for their Push Notification.

Skills needed

Javascript is the basic skill that you need for making Progressive Web Apps. Here are the libraries/concepts that helps us make PWAs.

● JSON● Javascript Promises (doesn’t have to

be an expert)● Gulp.js (for SW-precache and

SW-toolbox)● SW-precache● SW-toolbox

Resources

Service worker- A javascript file that is stored on the user’s browser and runs in the

background. It intercepts with the network request made by the web app.

Url sample: chrome://serviceworker-internals

Installation:

Resources

Manifest.json- A json file that stores information that will be used by the service worker.

Url sample: https://devcon.cardistry-arena.com/devcon/manifest.json

HTTPS

- Progressive Web apps requires HTTPS for security.- http://localhost is allowed for development purposes

Caching Strategies

● Network First● Cache First● Fastest● Cache Only● Network Only

Cache First

Credits to: https://jakearchibald.com/2014/offline-cookbook

Cache First

Credits to: https://jakearchibald.com/2014/offline-cookbook

Ideal For- Newspaper articles- Social media Timelines- Anything you want that updates frequently

Cache First Pseudo Code without SW-Toolbox

Credits to: https://jakearchibald.com/2014/offline-cookbook

Cache First Pseudo Code with SW-Precache

Network First

Credits to: https://jakearchibald.com/2014/offline-cookbook

Network First Pseudo Code With Sw-precache

Fastest

Credits to: https://jakearchibald.com/2014/offline-cookbook

Fastest Pseudo Code without SW-precache

Credits to: https://jakearchibald.com/2014/offline-cookbook

Fastest Pseudo Code with SW-precache

Cache only

Network Only

Push Notifications

This is what a Push Notification looks like

(In Desktop) (In Mobile)

Requirements to make a dynamic push notification?

1. Get your server and sender key- Go to firebase- Create a project- Go to project settings (Gear icon on the upper left beside project name)- Choose Cloud Messaging- Under the Project Credentials, get the server and sender key

2. Add the sender id to your manifest.json

Requirements to make a dynamic push notification?

3. Add the server-key to your curl script as Authorization:.

Requirements to make a dynamic push notification?

4. Add a push listener to you service-worker.js

Requirements to make a dynamic push notification?

5. Do your installation script for service-worker in your js that is accessible in your DOM

MAKING IT WORK

Making it work

What’s happening in the background?

When you click yes, it registers the sw.js (service-worker.js) in the browser and sends an ajax call to save the subscription_id in the subscriptions table.

Making it work

What’s happening in the background?

When you click send, the title, body, url and the hidden subscription_id will be passed to the server and and save it to the notifications table.

After that, the curl request will be executed. This will trigger the push listener in the sw.js.

“fetch('php_actions/notification_get_me..” will get the title, body, url and subscription_id that you saved earlier by getting the last data it gets when it matches the subscription_id.

Making it work

What’s happening in the background?

Clicking this will open a new tab, triggered by the notificationclick listener.

Problems Encountered1. Easy to have errors on multiple tabs.2. Stackoverflow is limited for PWA.3. Service worker is supported in most browsers but doesn’t have full support on all

functionalities.4. Service worker listener to push notifications has a much shorter lifetime compared

to native apps.

Thanks for Listening

Millicent Convento

Email: mjmconvento@gmail.comGithub Username: mjmconvento