Progressive Web Apps
![](https://s3.amazonaws.com/media-p.slid.es/uploads/619179/images/3276240/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/619179/images/4069700/1-U01ubQ9TrE1Zow5pkGHTfw.png)
apps.
BEST
![](https://s3.amazonaws.com/media-p.slid.es/uploads/619179/images/4072012/snapinspect-web-ios-android.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/619179/images/4070207/dd499b5a-b055-4ec5-811a-0bb753aba6db.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/619179/images/4069693/pwa-fast.png)
THE FUTURE IS WHERE?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/619179/images/4070774/938089-back-to-the-future-christopher-lloyd-delorean-delorean-dmc-12-fan-art-marty-mcfly-michael-j.-fox-movies-red-background.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/619179/images/4069722/maxresdefault.jpg)
of U.S. smartphone users download
2/3
apps/month.
0
* comScore Report 2014
of U.S. smartphone users download
1/2
apps/month.
0
* comScore Report 2016
Native Apps:
Consumer
Load app store
FInd in app store
Decide on compability and space
Download and wait
Install and accept permissions
Use.
Hard to develop and support.
Not a cheaper proposition.
Hard to distribute via app store process.
Native Apps:
Developer and Client
![](https://s3.amazonaws.com/media-p.slid.es/uploads/619179/images/4069716/10344787_10204127209120993_7907060212441383216_n.jpg)
"You’ve got everything you need if you know how to write apps using the most modern web standards to write amazing apps for the iPhone today"
What about web apps?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/619179/images/4072032/zuck-2-2.jpg)
"The biggest mistake we made
as a company was betting too much on HTML5
as opposed to native."
Web Milestones
STATIC -> DYNAMIC -> AJAX -> RWD
PWA
Uses modern web capabilities to deliver an app-like user experience.
Web Milestones
![](https://s3.amazonaws.com/media-p.slid.es/uploads/619179/images/4071050/AAEAAQAAAAAAAA0LAAAAJDEyYmJiZjYxLTVmNGEtNGIwOC1hNzAxLWQ0NDRmYTFkZGI5Yw__1_.png)
Which one is which?
PWA Features!
Progressive
Feature #1
Responsive
Feature #2
Connectivity Independant
Feature #3
App-like
Feature #5
Fresh
Feature #6
Safe
Feature #7
Discoverable
Feature #8
Re-engageable
Feature #9
Installable
Feature #10
Linkable
Feature #11
A Progressive Web App is:
- Progressive
- Responsive
- Connective Independent
- App-like
- Fresh
- Safe
- Discoverable
- Re-enageable
- Installable
- Linkable
![](https://s3.amazonaws.com/media-p.slid.es/uploads/619179/images/4071073/add-to-home-screen.gif)
Service Worker
Web App Manifest
App Shell
![](https://s3.amazonaws.com/media-p.slid.es/uploads/619179/images/4072059/sw_model.png)
Service Worker
Web App Manifest
![](https://s3.amazonaws.com/media-p.slid.es/uploads/619179/images/4072075/background-color.gif)
App Shell
![](https://s3.amazonaws.com/media-p.slid.es/uploads/619179/images/4069719/156b5e3cc8373d55.png)
-
3.5 minutes vs 70 seconds.
-
3x more time spent on site
-
40% higher re-engagement rate
-
70% greater conversion rate among those arriving via Add to Homescreen
-
3x lower data usage
![](https://s3.amazonaws.com/media-p.slid.es/uploads/619179/images/4072679/images.jpg)
Upcoming Days?
Native
Andriod Instant Apps
PWA
![](https://s3.amazonaws.com/media-p.slid.es/uploads/619179/images/4072410/B_H_-_Device__Final_.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/619179/images/4072411/flat_800x800_075_f.u4.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/619179/images/4071073/add-to-home-screen.gif)
?
Demo
How progressive is your app?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/619179/images/4072228/pwa-lighthouse.png)
Disclaimer:
All the images used in this slides are from various web sites, presentations and videos regarding pwas.
PWA
By Saad Bin Amjad
PWA
- 1,315