Progressive web apps

Progressive Web
Applications
Developer Student Club

Suraj Kumar
@surajsugga
surajsugga.me

A Progressive Web App uses
modern web capabilities to deliver
an app-like user experience.
They evolve from pages in browser
tabs to immersive, top-level apps,
Maintaining the web's low friction
at every moment.
It's important to remember that PWA work
everywhere but are supercharged in modern browsers.
Progressive enhancement is a backbone of the model.

PROGRESSIVE WEB APPS ARE:
Progressive: Work for every user, regardless of browser choice
because they’re 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
navigations and interactions.
Fresh: Always up-to-date thanks to the service worker update
process.
Safe: Served via TLS to prevent snooping and ensure content
hasn’t 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.

DEVELOPMENT PRINCIPLES
1 2 3 4
Web App
Manifest
Add to
Home
Screen
Banner
Service
Workers
Push
Notifications

WEB APP MANIFEST
The Manifest for Web applications is a simple JSON file
that
gives you, the developer, the ability to control how your
app
appears to the user in the areas that they would expect to
see apps (for example the device home screen), direct
what
the user can launch and more importantly how they can
launch it

The manifest enables your web app to have a more native-like presence on the user's home screen.
It allows the app to be launched in full-screen mode, provides control over the screen orientation and
in recent versions of Chrome on Android supports defining a Splash Screen and theme color
for the address bar. It is also used to define a set of icons by size and density used for the
aforementioned Splash screen and homescreen icon.

ADD TO HOME SCREEN BANNER
Chrome on Android has support adding in your site to
the
homescreen for a while now, but recent versions also
support proactively suggesting sites be added using
native
Web App install banners.

In order for the app install prompts
to display your app must:
I. A valid Web App manifest
II. Served over HTTPS
I. A valid service worker registered
II. Be visited twice, with at least 5 minutes
between visits.
V. A number of App Install banner samples
are available, covering basic banners
through to more complex use-cases like
displaying related applications.

SERVICE WORKER
FOR OFFLINE CACHING
A service worker is a script that runs in the background,
separate from your web page.It responds to events,
including network requests made from pages it serves.
A service worker has an intentionally short lifetime

Service workers are powerful for offline caching but they also offer significant
performance wins in the form of instant loading for repeat visits to your site
or web app. You can cache your application shell so it works offline and
populate its content using JavaScript.

PUSH NOTIFICATIONS
FOR RE-ENGAGEMENT
Push notifications allow your users to opt-in to timely
updates from sites they love and allow you to effectively re-
engage them with customized, engaging content

Let’s Build
A Progressive Web App

SETTING UP THE APPLICATION BOILERPLATE
1. Download a website template from this link:
https://goo.gl/XBwkPg
2. Extract the ZIP File on Desktop
3. Open the Folder as project in Brackets(or any other IDE).
For Step by Step Reference Use this Link: https://goo.gl/NzmSPL

Understanding The”manifest.json”
Your Application Name
(Visible on Splash Screen)
Short Name of App
(Visible on Home Screen)
App Icon
(Visible on Home Screen & Splash Screen ,It accepts an array of different size
icons for different purpose)
Default Screen
(This screen will be your default screen when your application is launched
from homecreen)
Header color
(It defines the color of browser
header)
Splash screen Color
(It defines the background color of
splash screen when launched from
homescreen)
Launch Mode
(It defines the Launching behaviour
of your app)
Orientation Mode
(It defines the Orientation of your
app)

Understanding The Service worker at OS Level
??? How a web App Can fire a Push Notification when Application or browser is closed. ???
Your JavaScript Application
Application Service Worker
Thread 1
Thread 2
Both Service worker and Application runs on different thread. Whenever application is closed
Service Worker thread it still working and listening to various events.

Implementation of service worker.
Register a Service Worker File.
Write the Service Worker Code.

Registering a Service Worker.
This Condition will check
for any active service
worker
If a active Service Worker is not found then register a new service worker that is “sw.js” in the above
Example.
The “scope” defines which
Part of the app should be
Controlled by this service
Worker. In this ex. We are
Giving “./” it is the address
Of our application root.
It means “sw.js” can control
the whole Application

Follow this Link for Step by Step Instruction:
https://goo.gl/NzmSPL

Some Awesome tools for Building & Testing PWA
Lighthouse
Lighthouse is an open-source, automated tool for
improving the performance, quality, and correctness of your web apps.
favicon-generator.org
Favicon generator is a tool to generate different size icon for different devices and
generate code for integrating them.
PWA Builder
It is a tool to generate service worker code for various scenarios.
It can be accessed at: https://www.pwabuilder.com/generator

Some Awesome Tutorials
https://developers.google.com/web/ilt/pwa/

Need Support??? Feel Free to connect with me.
singhsugga96@gmail.com | dsclpu@gmail.com
facebook.com/surajsugga
linkedin.com/in/surajsuggasingh/
HAPPY LEARNING

Progressive web apps

More Related Content

What's hot

Similar to Progressive web apps

Recently uploaded

Progressive web apps