Progressive Web App (PWA)

“Progressive Web Apps (PWAs) are web applications that load like regular web pages or websites but can offer the user
functionality such as working offline, push notifications, and device hardware access traditionally available only to native
mobile applications. PWAs are an emerging technology that combine the open standards of the web offered by modern
browsers to provide benefits of a rich mobile experience”
• Progressive: It works for every user(independent of browser choice ) there by reduced load time to the least possible
minimum( i.e. <3sec)
• Web App: In terms of look and feel on the choice of device. Will give the experience like an native mobile app since we
can add as an icon to home screen.
Affordable mobile web app @ no cost( in development / deployment / maintenance )
• A Progressive Web App works in the browser so there is no need for specialized development.PWA’s fit all kinds of
tablets, laptops or smartphones due to the use of responsive web design techniques..
• Works in low connectivity even when offline.
• PWA saved 88% of time to load the first content and meaningful paint and thus reduced load time less than 3 seconds.
• PWAs allow websites to be added to home screens on mobile devices and receive push notifications.
• Security is ensured in PWA since HTTPS hoisting.
• No need to download/update from app store( some apps are paid ).

HTTPS App Manifest Service Workers

• An app manifest file should describe the
resources your app will need. This includes
your app’s displayed name, icons, as well as
splash screen. If you link to the manifest file in
your index.html, browsers will detect that and
load the resources for you.
• The minimal HTML, CSS, and JavaScript and
any other static resources that provide the
structure for your page, minus the actual
content specific to the page.

{
"name": "service-worker",
"short_name": "sw-demo",
"theme_color": "#1976d2",
"background_color": "#fafafa",
"display": "standalone",
"scope": "/",
"start_url": "/",
"icons": [
{
"src": "assets/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png"
}, …
]
}
12
• short_name is used on the user's home screen, launcher, or other places
where space may be limited
• name is used in the app install
• theme_color is used on the user's home screen, launcher, or other places
where space may be limited•The background_color property is used on the splash screen when the
application is first launched.• display property Opens the web app to look and feel like a standalone
native app. The app runs in its own window, separate from the browser, and
hides standard browser UI elements like the URL bar, etc.
• Browser will automatically scale the icon for the device.

13

• The worker thread can perform tasks
without interfering with the user
interface.
• In addition, they can perform I/O using
XMLHttpRequest (although the
responseXML and channel attributes
are always null). Once created, a
worker can send messages to the
JavaScript code that created it by
posting messages to an event handler
specified by that code (and vice versa.)
“Web Workers is a simple means for web content to run scripts in background threads”

• We will be demoing them how
an application behaves with and
without web worker.
• Demo URL :
https://web-worker-
ff594.firebaseapp.com/
15

• Service worker could be mentioned in Offline Support, but
it really deserves its own section. Service worker provides a
programmatic way to cache app resources. Be it JavaScript
files or JSON data from a HTTP request. The programmatic
API allows developers to decide how to handle caching and
provides a much more flexible experience than other
options
• Service workers essentially act as proxy servers that sit
between web applications, the browser, and the network
(when available). They are intended, among other things,
to enable the creation of effective offline experiences,
intercept network requests and take appropriate action
based on whether the network is available, and update
assets residing on the server. They will also allow access to
push notifications and background sync APIs.
“A Service Worker is just a javascript file that runs in the background. A
service worker is a type of web worker ”

• We will develop a basic
angular app with PWA
implemented.
• Demo URL:
https://sw-demo-
236f8.firebaseapp.com/
17

18

BROW
SER
LIMIT
Chrom
e
<6% of free
space
Firefox <10% of free
space
Safari <50MB
IE10 <250MB
Edge Dependent on
volume size

“Cache-First strategy is to check the cache before going to the network.
This is great for caching on the fly and optimizing for repetitive asset
requests since it only hits the network on ‘fresh’ assets”

“All requests for assets will follow standard pattern of requesting them
from the server. Once the server responds with the asset, it will then be
cached by the Service Worker. If the request the for assets fails for
whatever reason, the Service Worker will check the cache. This is great
for assets that always need to be fresh. You may have noticed this
strategy will fail if an asset is requested and fails on the first try”

“network requests only with no cache”

“The Cache-Only strategy is a tad confusing. It only allows requests to be
served from the cache. The only way this works is if you have another
process pre-caching these resources before they are requested by your
application”

Traditionally, you’d have to build
• Desktop/mobile web + native Android + native iOS
You can, right now, in most cases, just build
• PWA + native iOS
And once iOS Safari implements push notifications, it will be just
• PWA

30

PWA
Service
Worker
HTTPS
Responsive
31
Site is served over HTTPS
To Test Use Lighthouse to verify Served
over HTTPS
To Fix Implement HTTPS and check
out letsencrypt.org to get started.
Pages are responsive on tablets & mobile devices
To Test •Use Lighthouse to verify Yes to all
of Design is mobile-friendly ,
although manually checking can
also be helpful.
•Check the Mobile Friendly Test
To Fix Look at implementing
a responsive design, or adaptively
serving a viewport-friendly site.

• Progressive - Work for every user, regardless of browser choice, because they
are built with progressive enhancement as a core tenet.
• Responsive - Fit 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 - Use the app-shell model to provide app-style navigation and
interactions.
• Fresh - Always up-to-date thanks to the service worker update process.

• Safe - Served via HTTPS to prevent snooping and ensure content has not been
tampered with.
• Discoverable - Are identifiable as “applications” thanks to W3C manifests and
service worker registration scope allowing search engines to find them.
• Re-engageable - Make re-engagement easy through features like push notifications.
• Installable - Allow users to “keep” apps they find most useful on their home screen
without the hassle of an app store.
• Linkable - Easily share via URL and not require complex installation.

• Lighthouse returns a Performance score between 0 and 100. 0 is the lowest
possible score and 100 is the best.
• The PWA audits are based on the Baseline PWA Checklist, which lists 14
requirements.
• Lighthouse has automated audits for 11 of the 14 requirements. The
remaining 3 can only be tested manually.
• The color-coding maps to these Performance score ranges:
• 0 to 49 (slow): Red
• 50 to 89 (average): Orange
• 90 to 100 (fast): Green

Before Implementing PWA After Implementing PWA

• We will deploy the developer angular app with PWA implemented (Exercise 2 ).
• Create Firebase Account to Deploy Angular Application
• Install the Firebase Tools using Firebase CLI
• Login and Initialize Firebase project using Firebase CLI
• Initialize your Firebase project run below command.
• Create Production Build using the AOT / JIT Compilation
• Deploying the web app in Firebase server
• Testing the hosted app in participants mobile (with / without data)
• Step by step guidance :
https://medium.com/@saleemmalikraja/deploying-an-angular-app-to-firebase-hosting-
18f99c9d5722
38

• Cross Browser Support : While Chrome, Opera, and Samsung’s android browser
supports PWA, IE, Edge and Safari are yet to extend their support.
• Limited Functionality: PWA doesn’t have support for any hardware that is not
supported by HTML5 (https://whatwebcando.today/)
• Cross Application Login Support : Native apps have the capability to talk to other
apps and authenticate logins (Facebook, Twitter, Google). As a webpage, PWA
doesn’t have the capability to communicate with other apps installed.
49

• https://medium.com/@saleemmalikraja/angular-pwa-2ddc3cccd090
• https://medium.com/dev-channel/why-progressive-web-apps-vs-native-is-the-wrong-question-to-ask-fb8555addcbb
• https://developers.google.com/web/progressive-web-apps/
• https://developers.google.com/web/showcase/2017/make-my-trip
• https://jakearchibald.github.io/isserviceworkerready/#moar
• https://jakearchibald.com/2014/offline-cookbook/
50

51
Questions ?