Download - Progressive Web Apps by Millicent Convento
![Page 1: Progressive Web Apps by Millicent Convento](https://reader034.vdocument.in/reader034/viewer/2022042723/587278fc1a28abc7068b4d7d/html5/thumbnails/1.jpg)
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.
![Page 2: Progressive Web Apps by Millicent Convento](https://reader034.vdocument.in/reader034/viewer/2022042723/587278fc1a28abc7068b4d7d/html5/thumbnails/2.jpg)
Progressive Web Apps
![Page 3: Progressive Web Apps by Millicent Convento](https://reader034.vdocument.in/reader034/viewer/2022042723/587278fc1a28abc7068b4d7d/html5/thumbnails/3.jpg)
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)
![Page 4: Progressive Web Apps by Millicent Convento](https://reader034.vdocument.in/reader034/viewer/2022042723/587278fc1a28abc7068b4d7d/html5/thumbnails/4.jpg)
Mobile Web Vs. Native Apps
![Page 5: Progressive Web Apps by Millicent Convento](https://reader034.vdocument.in/reader034/viewer/2022042723/587278fc1a28abc7068b4d7d/html5/thumbnails/5.jpg)
![Page 6: Progressive Web Apps by Millicent Convento](https://reader034.vdocument.in/reader034/viewer/2022042723/587278fc1a28abc7068b4d7d/html5/thumbnails/6.jpg)
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.
![Page 7: Progressive Web Apps by Millicent Convento](https://reader034.vdocument.in/reader034/viewer/2022042723/587278fc1a28abc7068b4d7d/html5/thumbnails/7.jpg)
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
![Page 8: Progressive Web Apps by Millicent Convento](https://reader034.vdocument.in/reader034/viewer/2022042723/587278fc1a28abc7068b4d7d/html5/thumbnails/8.jpg)
Who’s using this?
Almost all of the top visited sites are using it for their Push Notification.
![Page 9: Progressive Web Apps by Millicent Convento](https://reader034.vdocument.in/reader034/viewer/2022042723/587278fc1a28abc7068b4d7d/html5/thumbnails/9.jpg)
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
![Page 10: Progressive Web Apps by Millicent Convento](https://reader034.vdocument.in/reader034/viewer/2022042723/587278fc1a28abc7068b4d7d/html5/thumbnails/10.jpg)
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:
![Page 11: Progressive Web Apps by Millicent Convento](https://reader034.vdocument.in/reader034/viewer/2022042723/587278fc1a28abc7068b4d7d/html5/thumbnails/11.jpg)
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
![Page 12: Progressive Web Apps by Millicent Convento](https://reader034.vdocument.in/reader034/viewer/2022042723/587278fc1a28abc7068b4d7d/html5/thumbnails/12.jpg)
Caching Strategies
● Network First● Cache First● Fastest● Cache Only● Network Only
![Page 13: Progressive Web Apps by Millicent Convento](https://reader034.vdocument.in/reader034/viewer/2022042723/587278fc1a28abc7068b4d7d/html5/thumbnails/13.jpg)
Cache First
Credits to: https://jakearchibald.com/2014/offline-cookbook
![Page 14: Progressive Web Apps by Millicent Convento](https://reader034.vdocument.in/reader034/viewer/2022042723/587278fc1a28abc7068b4d7d/html5/thumbnails/14.jpg)
Cache First
Credits to: https://jakearchibald.com/2014/offline-cookbook
Ideal For- Newspaper articles- Social media Timelines- Anything you want that updates frequently
![Page 15: Progressive Web Apps by Millicent Convento](https://reader034.vdocument.in/reader034/viewer/2022042723/587278fc1a28abc7068b4d7d/html5/thumbnails/15.jpg)
Cache First Pseudo Code without SW-Toolbox
Credits to: https://jakearchibald.com/2014/offline-cookbook
![Page 16: Progressive Web Apps by Millicent Convento](https://reader034.vdocument.in/reader034/viewer/2022042723/587278fc1a28abc7068b4d7d/html5/thumbnails/16.jpg)
Cache First Pseudo Code with SW-Precache
![Page 17: Progressive Web Apps by Millicent Convento](https://reader034.vdocument.in/reader034/viewer/2022042723/587278fc1a28abc7068b4d7d/html5/thumbnails/17.jpg)
Network First
Credits to: https://jakearchibald.com/2014/offline-cookbook
![Page 18: Progressive Web Apps by Millicent Convento](https://reader034.vdocument.in/reader034/viewer/2022042723/587278fc1a28abc7068b4d7d/html5/thumbnails/18.jpg)
Network First Pseudo Code With Sw-precache
![Page 19: Progressive Web Apps by Millicent Convento](https://reader034.vdocument.in/reader034/viewer/2022042723/587278fc1a28abc7068b4d7d/html5/thumbnails/19.jpg)
Fastest
Credits to: https://jakearchibald.com/2014/offline-cookbook
![Page 20: Progressive Web Apps by Millicent Convento](https://reader034.vdocument.in/reader034/viewer/2022042723/587278fc1a28abc7068b4d7d/html5/thumbnails/20.jpg)
Fastest Pseudo Code without SW-precache
Credits to: https://jakearchibald.com/2014/offline-cookbook
![Page 21: Progressive Web Apps by Millicent Convento](https://reader034.vdocument.in/reader034/viewer/2022042723/587278fc1a28abc7068b4d7d/html5/thumbnails/21.jpg)
Fastest Pseudo Code with SW-precache
![Page 22: Progressive Web Apps by Millicent Convento](https://reader034.vdocument.in/reader034/viewer/2022042723/587278fc1a28abc7068b4d7d/html5/thumbnails/22.jpg)
Cache only
![Page 23: Progressive Web Apps by Millicent Convento](https://reader034.vdocument.in/reader034/viewer/2022042723/587278fc1a28abc7068b4d7d/html5/thumbnails/23.jpg)
Network Only
![Page 24: Progressive Web Apps by Millicent Convento](https://reader034.vdocument.in/reader034/viewer/2022042723/587278fc1a28abc7068b4d7d/html5/thumbnails/24.jpg)
Push Notifications
![Page 25: Progressive Web Apps by Millicent Convento](https://reader034.vdocument.in/reader034/viewer/2022042723/587278fc1a28abc7068b4d7d/html5/thumbnails/25.jpg)
This is what a Push Notification looks like
(In Desktop) (In Mobile)
![Page 26: Progressive Web Apps by Millicent Convento](https://reader034.vdocument.in/reader034/viewer/2022042723/587278fc1a28abc7068b4d7d/html5/thumbnails/26.jpg)
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
![Page 27: Progressive Web Apps by Millicent Convento](https://reader034.vdocument.in/reader034/viewer/2022042723/587278fc1a28abc7068b4d7d/html5/thumbnails/27.jpg)
Requirements to make a dynamic push notification?
3. Add the server-key to your curl script as Authorization:.
![Page 28: Progressive Web Apps by Millicent Convento](https://reader034.vdocument.in/reader034/viewer/2022042723/587278fc1a28abc7068b4d7d/html5/thumbnails/28.jpg)
Requirements to make a dynamic push notification?
4. Add a push listener to you service-worker.js
![Page 29: Progressive Web Apps by Millicent Convento](https://reader034.vdocument.in/reader034/viewer/2022042723/587278fc1a28abc7068b4d7d/html5/thumbnails/29.jpg)
Requirements to make a dynamic push notification?
5. Do your installation script for service-worker in your js that is accessible in your DOM
![Page 30: Progressive Web Apps by Millicent Convento](https://reader034.vdocument.in/reader034/viewer/2022042723/587278fc1a28abc7068b4d7d/html5/thumbnails/30.jpg)
MAKING IT WORK
![Page 31: Progressive Web Apps by Millicent Convento](https://reader034.vdocument.in/reader034/viewer/2022042723/587278fc1a28abc7068b4d7d/html5/thumbnails/31.jpg)
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.
![Page 32: Progressive Web Apps by Millicent Convento](https://reader034.vdocument.in/reader034/viewer/2022042723/587278fc1a28abc7068b4d7d/html5/thumbnails/32.jpg)
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.
![Page 33: Progressive Web Apps by Millicent Convento](https://reader034.vdocument.in/reader034/viewer/2022042723/587278fc1a28abc7068b4d7d/html5/thumbnails/33.jpg)
Making it work
What’s happening in the background?
Clicking this will open a new tab, triggered by the notificationclick listener.
![Page 34: Progressive Web Apps by Millicent Convento](https://reader034.vdocument.in/reader034/viewer/2022042723/587278fc1a28abc7068b4d7d/html5/thumbnails/34.jpg)
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.