Progressive Web App An Introduction

1. Progressive Web Apps
(PWA)
By
P.Harish

2. Why build Progressive Web
Apps?

4. 80%
OF TIME SPENT IS IN
USERS’ TOP 3 APPS

5. Capability
Web

6. Capability
Reach
WebWeb
*

7. Capability
Reach
WebWeb
PWA

8. What is progressive web app?
A Progressive Web App is:
▶Progressive - Works for every user, regardless of browser
choice because it's built with progressive enhancement as a
core tenet.
▶Responsive - Fits any form factor: desktop, mobile, tablet,
or whatever is next.
▶Connectivity independent - Enhanced with service workers
to work offline or on low-quality networks.
▶App-like - Feels like an app, because the app shell model
separates the application functionality from application
content .
▶Fresh - Always up-to-date thanks to the service
worker update process.

9. What is progressive web app?
▶ Safe - Served via HTTPS2 to prevent snooping and to
ensure content hasn't been tampered with.
▶ Discoverable - Is identifiable as an "application" thanks
to W3C manifest and service worker registration scope,
allowing search engines to find it.
▶ Re-engageable - Makes re-engagement easy through
features like push notifications.
▶ Installable - Allows users to add apps they find most
useful to their home screen without the hassle of an app
store.

10. Progressive Web Apps are user
experiences :
▶ Reliable - Load instantly and never show the down , even
in uncertain network conditions.
▶ Fast - Respond quickly to user interactions with silky
smooth animations and no junky scrolling.
▶ Engaging - Feel like a natural app on the device, with an
immersive user experience.

11. Reliable
When launched from the user’s home screen, service workers enable a Progressive Web
App to load instantly, regardless of the network state.
A service worker, written in JavaScript, is like a client-side proxy and puts you in control
of the cache and how to respond to resource requests. By pre-caching key resources you
can eliminate the dependence on the network, ensuring an instant and reliable
experience for your users.

12. Fast
53% of users will abandon a site if it takes longer than 3 seconds to
load! And once loaded, users expect them to be fast—no junky
scrolling or slow-to-respond interfaces.

13. Engaging
Progressive Web Apps are installable and live on the user's home screen, without the need for
an app store. They offer an immersive full screen experience with help from a web app
manifest file and can even re-engage users with web push notifications.
The Web App Manifest allows you to control how your app appears and how it's launched. You
can specify home screen icons, the page to load when the app is launched, screen
orientation, and even whether or not to show the browser chrome.

16. of users bounce from sites that
take longer than 3 seconds to load40%

17. Service workers enable reliable performance
Web server
Service worker
Client side proxy written
in JavaScript
Cache

18. What is a service worker?
▶ A service worker is a script that your browser runs in the background,
separate from a web page, opening the door to features that don't need a
web page or user interaction. they already include features like push
notifications and background sync.
▶ It's a JavaScript Worker, so it can't access the DOM directly. Instead, a service
worker can communicate with the pages it controls by responding to messages
sent via the post Message interface, and those pages can manipulate the DOM
if needed.
▶ Service worker is a programmable network proxy, allowing you to control how
network requests from your page are handled

20. 4x 10x
faster less data
<1 second
median load time

21. <amp-install-serviceworker>

22. Tools
Lighthouse is an open-source, automated tool for improving the
quality of web pages. You can run it against any web page,
public or requiring authentication. It has audits for
performance, accessibility, progressive web apps, and more.

23. Reference Sites
● https://serviceworke.rs/
● https://developer.mozilla.org/en-US/Apps/Progressive
● https://developers.google.com/web/progressive-web-apps/