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.As of 2018,95% of Americans own cell phones, and 77% have smartphones (up from 35% in 2011).
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 theprogressive 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.
The events leading up to progressive web apps
PWAs are the result of an evolution of web development technologies. Here are some highlights over the past decade or so:
- 2005: Web development tech began to shift from static to dynamic documents which were enabled by client-side tools, server tools, and responsive web design.
- 2007: The iPhone pushed for web-based apps based on dynamic technologies but failed in comparison to native apps
- 2015: Google updated its algorithm to favor mobile-friendly websites
- 2015: Frances Berriman and Alex Russell coined the term progressive web apps to describe apps that take advantage of features in modern browsers (such as web app manifests and service workers) and let users upgrade web apps to PWAs in their native operating system.
- 2018: PWAs are supported by Google Chrome, Mozilla Firefox, Safari, and Microsoft Edge browsers.
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 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 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 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 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![contact-form to="email@example.com" subject="Contact Alert! Blog"][contact-field label="Name" type="name" required="1"][contact-field label="Email" type="email" required="1"][contact-field label="Website" type="text"][contact-field label="Message" type="textarea"][/contact-form]