Progressive Web Application

Progressive Web Apps
“Write once run everywhere”
@Amandeep Singh

Downsides of Native Apps
- High Development and Maintenance cost
- High Acquisition and installation cost
- Reaching to larger audience by SEO is difficult

Downsides of Mobile Web
- Apps reliability due to slow mobile network
- User experience like smoothness,
animation
- No offline Experience
- Low in engagement(no push notification)
- No deeper integration to device hardware

Mobile Native Apps Mobile Web Apps

In 2015, designer Frances Berriman and Google Chrome engineer Alex Russell
| coined the term "progressive web apps"

According to Alex Russell(Google Chrome Engineer), PWAs are::
| Just websites that took all the right vitamins

What makes PWA like Native?
- Web Manifest
- Service Workers
- App Shell Model

Web App Manifest(manifest.json)

Service Worker
Flow diagram for Service Workers intercepting network requests

App Shell Model
Cache Instantly loads App shell on repeat visits Dynamic content then populates

Load time reduced from 11.91 SECONDS to 4.69 SECONDS
90% SMALLER than Tinder Native App
Success Stories

Takes less than 3 SECONDS to load even on 2G NETWORK
Success Stories

Limitations
https://whatwebcando.today/

The PRPL pattern (Enhancements)
PRPL is a pattern for structuring and serving Progressive Web Apps
(PWAs), with an emphasis on the performance of app delivery and launch.
It stands for:
● Push (or preload) the most important resources.
<link rel="preload" as="script" href="super-important.js">
<link rel="preload" as="style" href="critical.css">
● Render the initial route as soon as possible.
● Pre-cache remaining assets.
● Lazy load other routes and non-critical assets.

Audit your page with Lighthouse

PWA now available via Google Play Store
[Progressive Web App Update 2019]

Progressive Web Application

More Related Content

What's hot

Similar to Progressive Web Application

More from Amandeep Singh

Recently uploaded

Progressive Web Application