progressive web apps by millicent convento
TRANSCRIPT
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.
