Progressive Web Apps

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

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

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

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

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

Dive Deeper
App Shell ModelService workersManifest
6

https://gnotes.000webhostapp.com/
7

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

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

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

https://www.pwabuilder.com/
12

https://developer.mozilla.org/
13

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

https://github.com/facebook/create-react-app
16

Thank You
Kanushka Gayan
kanushkanet@gamil.com

Progressive Web Apps

Related slideshows

More Related Content

Progressive Web Apps