The Full Guide to Progressive Web Apps (PWA)

What are progressive web apps, why do you need one, and how are they already helping industry leaders?

There is a lot of buzz about PWAs this year and for good reason. Here's the full guide with all you need to know.

This story starts with the devices that created the need for an excellent mobile experience in the first place.

From the standpoint of a person with business interests, the wide adoption of smartphones creates a massive opportunity. Gone are the days when you had to reach customers through mail, billboards, television, or even a desktop computer. Smartphones open a direct line of communication.

However, the road to a smooth mobile experience has been a bit rocky. Further, customers aren't very tolerant of a poor UX. In fact, eight out of 10 will stop engaging with content when it doesn't display well on their device and most won't wait more than a few seconds for a page to load before clicking 'back.'

When a mobile experience goes awry, businesses miss out.

The latest solution is the progressive web app (PWA). It's helping businesses, including industry leaders like Pinterest and Forbes, to provide their customers with the seamless mobile experience they demand. Unsurprisingly, positive business results are following close behind.

For the unacquainted and those who want to learn more, here's a closer look at the ins and outs of progressive web apps.

What are progressive web apps?

Progressive web apps combine the features of modern web browsers and mobile experiences to offer the best of both. They can appear like a native mobile app or traditional application but are actually regular web pages. According to the Google Chrome engineer, Alex Russell, who coined the term ‘progressive web app,’ the technical baseline criteria that qualifies a site to be considered a PWA includes:

The use of service workers which allow a site to load while it is offline
References to a web page manifest with at least the following four key properties: name, short_name, display, and start_url
Origination from a secure origin and served over TLS and green padlock displays without active mixed content
Displaying of an icon (minimum of 144 x 144) in png format

With this basic definition in mind, let’s take a closer look at where progressive apps came from, the tech behind them, and why industry leaders are adopting them.

Next, let's dig into these technologies that underlie PWAs and how they work.

How do progressive web apps work?

Progressive apps use the following key technologies:

Manifest

Manifest is a web app that provides developers with a central place for the metadata associated with a web application. This can include the web application’s name, links to image objects and icons in the web app, the declaration for default orientation, the preferred URL to open or launch the web app, and more. When developers set and manipulate the metadata for the web manifest file, they enable the creation of a seamless mobile experience through the PWA, which functions like a native application.

Service workers

Service workers are found between a user’s device and the network, and supply content by providing a scriptable network proxy in the web browser that manages web/HTTP requests programmatically. They efficiently use cache mechanisms to enable error-free behavior during offline periods. Further, they enable the PWA to synchronize data in the background, send out centralized updates, respond to the resource requests that originate elsewhere, and handle push notifications easily.

Application shell architecture

Some PWAs use the App Shell Model approach to allow for rapid loading. It involves service workers storing the basic user interface of a responsive web design which provides a static frame, layout, or architecture. The content can be loaded into the App Shell Model progressively and dynamically. Users can then engage with the app even when web connectivity is waning. So, what does all of this mean for your business's bottom line?

What are the benefits of progressive web apps?

Progressive web apps offer a number of benefits that businesses really can't afford to miss. Here are some of the most impactful:

Increase mobile website reliability
Enable quick and seamless responses to user interactions
Create an immersive and engaging user experience that feels like an app
Increase convenience as users can keep apps they frequently use on their home screen
Lower the obstacles to use with no need for a complex installation
Easily share PWAs via a URL
Re-engage users through push notifications
Engage users on all browsers and devices
Be discoverable via search engines
Easily keep your app up-to-date due to the service worker process
Ensure security as they are served via GTTPS.
Save your user's storage space on their mobile devices

How do these benefits translate into increases in profitability? Let’s take a look at a few examples;

Forbes

Forbes decided to switch to a Progressive web app in March of last year and as a result, saw the following:

Decreased load time from 6.5 seconds to 2.5 seconds, making it fastest amongst its competitors
Doubled engagement rates through push notifications and the option to add the PWA to the home screens.
Saw a 43% increase in sessions per user
Had a 6-fold increase in the number of readers who complete articles
Saw a 20% increase in impressions per page

Pinterest was only converting 1% of unauthenticated mobile web users to sign up, log in, or install their native app. Being so, they spent three months building a PWA last year. The results were as follows:

60% increase in engagement
40% increase in the amount of time spent on the mobile web
44% increase in user-generated ads revenue
50% increase in ad click-throughs
Decrease in load time from 23 seconds to 5.6 seconds.

Lancome

Lancome was facing some challenges regarding bounce rates for mobile users so turned to PWA technology. Its new PWA app increased mobile sessions, engagement, and conversions through push notifications and other features. Results included:

51% increase in the number of mobile sessions
84% decrease in the time before users can interact with the page
15% decrease in bounce rates
17% increase in conversion

By improving mobile website functionality through the tech behind PWAs, your business can potentially see similar improvements. Across the board, its driving engagement and conversions.

Progressive web app checklist

To help teams create the best possible experiences Google has put together this checklist which breaks down all the things they think it takes to build a Baseline PWA, and how to take that a step further with an Exemplary PWA by providing a more meaningful offline experience, reaching interactive even faster and taking care of many more important details.

‍Baseline Progressive Web App Checklist:

Site is served over HTTPS
Pages are responsive on tablets & mobile devices
All app URLs load while offline
Metadata provided for Add to Home screen
First load fast even on 3G
Site works cross-browser
Page transitions don't feel like they block on the network
Each page has a URL

Exemplary Progressive Web App Checklist:

Site's content is indexed by Google
Schema.org metadata is provided where appropriate
Social metadata is provided where appropriate
Canonical URLs are provided when necessary
Pages use the History API
Content doesn't jump as the page loads
Pressing back from a detail page retains scroll position on the previous list page
When tapped, inputs aren't obscured by the on screen keyboard
Content is easily shareable from standalone or full screen mode
Site is responsive across phone, tablet and desktop screen sizes
Any app install prompts are not used excessively
The Add to Home Screen prompt is intercepted
First load very fast even on 3G
Site uses cache-first networking
Site appropriately informs the user when they're offline
Provide context to the user about how notifications will be used
UI encouraging users to turn on Push Notifications must not be overly aggressive.
Site dims the screen when permission request is showing
Push notifications must be timely, precise and relevant
Provides controls to enable and disable notifications
User is logged in across devices via Credential Management API
User can pay easily via native UI from Payment Request API.

Want to see what else Google says goes into a baseline PWA and also how to go a step further and create an exemplary PWA?

See the checklist here.

Brightscout for your next progressive web app

At Brightscout, we have been implementing this technology in solutions for our clients and know how powerful it can be. It's more important now than ever before to efficiently engage through mobile, and progressive web apps are the best way to do that in 2018. Once you make the switch, you'll wonder why it took you so long.

‍Contact Brightscout about a progressive web app for your business. Let’s turn your story into our next case study on how PWAs boost results!