Introduction to Progressive Web Apps

Progressive Web Apps, introduced by Google, eagerly approved by Microsoft and reluctantly adopted by
Apple, are gaining massive popularity among global leaders of online technologies. Companies such as
Pinterest, Aliexpress, Trivago, OLX and Forbes, which have already field-tested the abilities of PWA
technology to boost user engagement, proved that it is the best answer to the challenges of the mobile
world.

Table of content

· What are Progressive Web Apps?

· How to understand the term PWA?

· Characteristics of Progressive Web Apps

PWAs are fast

PWAs are reliable

PWAs are engaging

· Key advantages of Progressive Web Apps

What are Progressive Web Apps

Progressive Web Apps are one of the technologies originally proposed by Google to make the web a
better place for everyone. A better place in the sense that the web is fast and easily accessible to users
no matter where they are and even with the poorest of connections.

The term Progressive Web Apps was first coined by Frances Berriman and Alex Russell in 2015, as a way
of describing applications that take advantage of new features supported by modern browsers, including
service workers and web app manifests, and also let users upgrade web apps to progressive web
applications regardless of their native operating system.

Progressive Web Apps are also described as user experiences that have the reach of the web, and are
largely characterized by the following:

Reliable – Load instantly and never show the “No Internet Connection” page, even in uncertain network
conditions.

Fast – Respond quickly to user interactions with silky smooth animations and no janky scrolling.

Engaging – Feel like a natural app on the device, with an immersive user experience.

Why do I need a Progressive Web App?

The advantages of Progressive Web Apps (PWA) are massive and I’ll highlight them below:
Cost – The cost of building a PWA is less than that of a mobile application.

Progressive – Works 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 forms yet to emerge.

Connectivity independent – Service workers allow apps to work offline or on low-quality networks.

App-like – Feel like a native app to the user with app-style interactions and navigation.

Fresh – Always up-to-date thanks to the service worker update process.

Safe – Served via HTTPS to prevent snooping and ensure content hasn’t been tampered with.

Easy Discovery – 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 such as push notifications.

Installable – Allow users to “keep” apps they find most useful on their home screen without the hassle of
an app store.

What makes a progressive web application?

Progressive Web Apps are characterized by a Service Worker file, a Web App Manifest, HTTPS, Push
Notifications and Background Sync.

Service workers

A service worker is a script that your browser runs in the background, separate from the web page,
opening the door to features that don’t need a web page or user interaction. Service workers are
installed on the device from which the website is accessed from and they allow you to control how
network requests from your page are handled.

A typical Service Worker process goes like this Register → Install → Fetch → Activation

To install a service worker for your site you need to register it, which you do in your page’s JavaScript.
Registering a service worker will cause the browser to start the service worker install step in the
background.

After the activation step, the service worker will control all pages that fall under its scope, though the
page that registered the service worker for the first time won’t be controlled until it’s loaded again.

Web app manifest

A web app manifest controls what the user sees when launching from the home screen. This includes
things like a splash screen, theme colors, and even the URL that has opened.

From the manifest.json file above:

A short_name is required for the text on the user’s home screen.

A name is required for use in the Web App Install banner.

The icons are used when a user adds your site to their home screen. You can also define a set of icons for
the browser to use.

The start_url specifies the URL that loads when a user launches the application from a device. If given as
a relative URL, the base URL will be the URL of the manifest.

The display defines the developer’s preferred display mode for the web application. It could be
standalone, fullscreen, browser, or minimal-ui.

The theme_color defines the default theme color for an application. This sometimes affects how the
application is displayed by the OS (e.g., on Android’s task switcher, the theme color surrounds the
application).

The background_color defines the expected background color for the web application.

HTTPS

It’s very important that Progressive Web Apps be served from a secure origin. That’s why it’s a
requirement for an application to be served with HTTPS so it can be considered a Progressive Web App.
Using HTTPS also ensures that intruders can’t tamper with the communications between your websites
and your users’ browsers.

Background sync

Background sync is a web API that lets you defer actions until the user has stable connectivity. This is
useful for ensuring that whatever the user wants to send is actually sent, even after the loss of internet
connectivity.

As an example, background sync can be very useful in a chat application. I’m sure you’ve witnessed
situations where after a message was sent with a bad connection or no connection at all, it still goes on
to deliver the message after a good connection has been established. This is background sync at work.
Implementing background sync in a PWA is very straightforward.

Push notifications

Web Push Notifications are simply a way of allowing users to opt in to timely updates from the sites they
love and also allow you to effectively re-engage them with customized, relevant content. They work with
service workers because of the background usage of service workers.

It’s important to note that Push and Notification use different, but complementary, APIs. Push is invoked
when a server supplies information to a service worker; a notification is the action of a service worker or
web page script showing information to a user. Therefore, in order for a push notification to work, both a
server and a client are needed.

Progressive Web Apps also rely on some patterns and technologies that help deliver a meaningful user
experience regardless of the quality of internet connectivity.

PRPL

The Push Render Pre-cache Load pattern is a relatively new and experimental pattern that takes
advantage of modern web platform features (service workers) to granularly deliver mobile web
experiences more quickly.

It is simply a pattern for structuring and serving Progressive Web Apps, with an emphasis on the
performance of app delivery and launch. It stands for:

· Push critical resources for the initial URL route.

· Render initial route.

· Pre-cache remaining routes.

· Lazy-load and create remaining routes on demand.

The PRPL pattern is about making sure an application is built in a way that the user gets the best mobile
experience by having the lowest possible minimum time-to-interactive (especially on first use) and the
best maximum caching efficiency (caching routes and resources).

Web storage

Offline support is a key feature of a Progressive Web app, and for offline support to work, some sort of
data persistence is needed. This is where Web Storage comes in.

Web Storage allows developers to cater for instances whereby a user temporarily loses internet
connectivity. In order to make the Progressive Web App still usable in an instance like that, web storage
can be used to display already saved data when needed.

There are various Web Storage APIs available such as Local Storage, Session Storage, and IndexedDB and
each comes with its own pros and cons.

Conclusion

In this article, we’ve seen what Progressive Web Apps are and how they provide the best experience for
users using technologies such as Service Workers, Web App Manifest, Push Notifications and Background
Sync.

Technologies like Web Storage and the PRPL pattern were also highlighted and the various ways in which
they help to deliver the best experience for all mobile users.

I think PWAs are really useful and can help to provide a better experience for users who access the
internet through their mobile devices.

##################################################################################

A Progressive Web App is a type of web application which can be used as a web page and mobile app on
any given device. PWAs are created by fulfilling the majority of requirements listed in Google's checklist,
after which a Progressive Web Application is fast, reliable and engaging.

Progressive Web Applications are experiences that combine the best of web applications and the best of
mobile applications. They use service workers, HTTPS, a manifest file and an app shell architecture to
deliver native app experiences to web applications.

The general idea of Progressive Web Apps is quite easy to display. They are apps written in web
technologies (JavaScript, CSS, HTML) that look and behave just like regular web pages. They are visible in
Search Engine Page Results and linkable, but offer similar functionalities to native mobile apps: they
work offline, can send push notifications and use device hardware the same way as native apps.

PWAs seem to be a modern fusion between the mobile and desktop worlds but - since the term doesn't
suggest any particular implementation - it may be challenging to craft a dictionary definition of them.
And Google, the godfather of PWA technology, doesn't help.