1. Progressive Web Apps
A new way to deliver amazing user experiences on the web.
B L K Gayan
kanushkanet@gmail.com

2. What is a Progressive Web App?
https://paperplanes.world/
2

3. What is a Progressive Web App?
Progressive Web Apps (PWAs) are web applications that are regular
web pages or websites, but can appear to the user like traditional
applications or native mobile applications.
The application type attempts to combine features offered by most
modern browsers with the benefits of a mobile experience
Source : https://en.wikipedia.org/wiki/Progressive_Web_Apps
Is it Hybrid App?
3

4. Mobile Apps
There are 3 types of Mobile Apps,
Web AppsHybrid AppsNative Apps
4

5. Why build a Progressive Web App?
• Progressive
• Responsive
• Connectivity independent
• App-like
• Fresh
• Safe
• Discoverable
• Re-engageable
• Installable
• Linkable
5

6. Dive Deeper
App Shell ModelService workersManifest
6

7. What is a Progressive Web App?
https://gnotes.000webhostapp.com/
7

8. Manifest
Manifest is a simple JSON file that gives the developer the ability to
control how the app should appear to the user in areas where they
would expect to see apps, direct what the user can launch, and define
its appearance at launch.
Source: https://hackernoon.com/progressive-web-apps-the-next-step-in-web-app-development
Web app manifests are deployed in HTML pages using a link element
<link rel="manifest" href="/manifest.json">
8

9. Manifest
{
"name": "gnote",
"short_name": "gnote",
"display": "standalone",
"orientation": "portrait",
"theme_color": "#66bb6a",
"background_color": "#66bb6a",
"start_url": "/index.html",
"icons": [{
"src": "images/touch/homescreen192.png",
"sizes": "192x192",
"type": "image/png"
}]
} 9
fullscreen
standalone
minimal-ui
browser

10. Service Workers
Service Worker is a script that your browser runs in the background,
separate from the web page/web app. It is generally used for features
that don’t need a web page or user interaction.
Service Workers provide the technical foundation that features like
offline experiences, periodic background syncs, and push notifications
rely on.
Source: https://hackernoon.com/progressive-web-apps-the-next-step-in-web-app-development
10

11. Service Workers Life Cycle
11

12. What is a Progressive Web App?
https://www.pwabuilder.com/
12

13. What is a Progressive Web App?
https://developer.mozilla.org/
13

14. App Shell Architecture
An application shell (or app shell) architecture is one way to build a
PWA that reliably and instantly loads on your users' screens, similar to
what you see in native applications.
Source: https://developers.google.com/web/fundamentals/architecture/app-shell
It is the minimal HTML, CSS, and JavaScript powering a user interface.
And it should be load fast, be cached and dynamically display content.
14

15. App Shell Architecture
15

16. What is a Progressive Web App?
https://github.com/facebook/create-react-app
16

17. Thank You
Kanushka Gayan
kanushkanet@gamil.com