By Jason Rzutkiewicz & Jeremy Lockhorn
By Jason Rzutkiewicz & Jeremy Lockhorn
When Pinterest replaced their mobile website with a progressive web app (PWA) they immediately saw tremendous lift across several important metrics:
PWAs just work better than your typical mobile site. Period.
There is no shortage of success stories from nearly every industry vertical highlighting significant improvement in a wide variety of KPIs after PWA implementation:
But given the continued momentum and increased support from both Android and iOS, brands have been slow to take advantage of the benefits.
We understand there may be some confusion as to what PWA’s ultimately make possible, which we hope to clear up here. Additionally, we hope to alleviate the fatigue associated with the time and investment needed to get your mobile ecosystem to where it is today.
Progressive Web Apps have been part of the conversation for a number of years, but have yet to be meaningfully adopted by most brands, which strikes us as a missed opportunity given the many benefits they possess.
In fact, PWA’s can bring native app-like experiences and functionality to the mobile web, and they can be an extremely efficient way to deliver your digital experiences.
But as with many new technologies, the devil is in the details:
These and many more questions are common as business and technology leaders consider the implications on their mobile user engagement strategies.
This paper will explore PWA in more detail, establish a clear definition, review the arguments for and against, and provide some high-level guidance for where the set of technologies should fit into an ecosystem of customer touchpoints.
It’s hard to find a very detailed, comprehensive and universally agreed-upon definition of PWA, but two quotes from Alex Russell (who, together with Frances Berriman, coined the term progressive web apps) gives us a good starting point.
“Progressive Web Apps are just websites that took all the right vitamins.”
To get even more specific, PWAs can offer certain functionality that is typically associated with native applications. For example:
YML’s point of view frames PWAs as having such tangible potential for business impact that they function as a set of best practices for making websites operate more like native applications.
Maybe simply because the “A” in PWA stands for “app,” too much discussion around PWAs focuses on comparing and contrasting to native mobile applications. We believe this comparison (and the accompanying discussion) is misguided.
PWA’s are absolutely not a universal replacement for native apps.
The only experiences we believe in are the compelling customer experiences that bring people back time after time. And if your native app experience meets this bar then it should most certainly continue to exist.
These experiences tend to have some common characteristics:
If your existing native app experience doesn’t check at least one of these boxes above then we recommend reconsidering whether or not it should continue to exist.
If it doesn’t have the frequency of use, or doesn’t require low level access to device hardware not available to browsers, then what value do they have?
These apps – let’s call them vanity apps – are the most likely candidates to be replaced by PWAs over time.
We recommend the conversation concentrate on how PWAs are a huge upgrade to responsive mobile web.
As shared earlier, there is no shortage of published case studies from nearly every industry vertical highlighting significant improvement across a wide variety of KPIs after PWA implementation.
What are the underlying factors driving these performance improvements?
Google uses a helpful acronym for us to understand why PWAs are so effective: FIRE – Fast, Integrated, Reliable, and Engaging.
By enabling background processing, which accelerates page load time tremendously, PWA’s deliver a much faster experience.
We all know that speed is important:
On a mobile device, even a 1 second delay can increase bounce rate by almost 50% and decrease conversion by 20%.
Walmart famously found that for every 100 milliseconds of improvement to page load time, there was up to a 1% increase in incremental revenue. Tinder cut its load time from roughly 12 seconds down to five seconds using a PWA.
Using an ever-evolving set of web capabilities, PWAs integrate more tightly with native hardware than regular web sites. They ultimately feel more like a native app from a user experience perspective – seamless and integrated.
Caching isn’t just about speed; it’s about providing access either offline or in limited network and connection environments.
Speed and reliability drive increased user engagement. And, as noted previously, PWA’s also facilitate sending push notifications, helping to drive ongoing engagement with the experience.
Another key benefit to PWA is its discoverability. It exists on the web, just like any other website, and can be found via major search engines, social shares, and links from other websites.
The fact that it removes the barrier of having to go to one of the native app stores to find, authenticate and install the application prior to using it means it’s ultimately easier to integrate it as part of your content, paid and social strategies.
That’s tangible value for any brand.
So what makes PWAs so special? There are four important pieces:
This is probably the most important component, and is the key to forcing a website to feel more like an app: Service Worker enables websites to download and cache certain files or content locally on the device.
When a user accesses a PWA the first time, the service worker immediately jumps into action, downloading not only the first view, but other content in the background. With that content already cached on the device, the site appears to load much faster.
Think about when you install a native application:
Lots of the content and supporting files get downloaded and installed locally, enabling the thing to launch and load quickly. This same idea is also key to enabling the user to access content when offline (or in an area of limited connectivity).
Service workers are also the piece that enables websites to send push notifications.
Service workers require that a website is delivered over a secure connection. This shouldn’t be a big deal given Google’s broader focus on wanting everything to be delivered over HTTPS.
A JSON file that provides basic meta information about the app, such as app icon, background color, name, etc.
The image a user will see once they install the app on their home screen.
While there have been continued momentum and increasing support from both Android and iOS, there are inconsistencies and limitations across browsers and platforms that exist today to take into consideration.
For example, currently on iOS, a PWA can only store up to 50 mb of data for offline access. And, if the user doesn’t launch the app for a few weeks, the cached files will be deleted, requiring a full download on next launch.
As mentioned above, access to certain hardware features like Bluetooth, Touch and Face ID are not available or limited. An additional consideration is that the performance benefits aren’t evident to a user until their second visit.
No Siri Integration. Even if you have a PWA installed with an icon and the name Tinder, Siri can’t find it.
Source: Progressive Web Apps on iOS are here, by Maximiliano Firtman.
Much of the speed benefit comes from the ability to download content in the background, meaning that the first time a user visits a PWA, they still have to load the initial content. This can be mitigated by following best practices to keep total file size low, and/or by using Accelerated Mobile Pages (AMP) for even faster initial load.
AMP + PWA can be a powerful combination.
Further, while Android allows the web site to send the user a prompt to install the app on their home screen, no such ability currently exists on iOS.
Instead, the user must manually open the system share functionality and find the “add to home screen” button.
Again, there has been tremendous momentum and increasing support from both Android and iOS which we at YML are confident that in the months and years ahead we will see more consistency and reduce limitations in the experiences PWA’s can bring to life.
Rather than rebuilding their entire web site as a PWA, they started with a single feature: Push Notifications.
It was rolled out globally in more than 60 languages and earned more than 1 million opt-ins in the first three months.
It allows the company to test and learn their way to potential larger deployments in the future.
Twitter lite is tiny, wicked fast, and still maintains most of the functionality of the native app - including that fun little animation that happens when you pull down to refresh the feed.
Starbucks used PWA to replicate most of the functionality of its native application.
It’s fast, allows you to order and pay via mobile, and when you add an item to your order, there’s a cute animation that shows the item in your bag.
We compiled this list of 10 resources for readers eager to learn more about PWAs.
PWAs are powerful, effective, fast and app-like.
It’s hard to imagine a mobile web property that could not be significantly improved via PWA implementation. They can also potentially eliminate the need for many “vanity” native apps that exist today.
In short, now is the time to integrate these technologies into your ecosystem of customer touchpoints.
Any and all projects including efforts pertaining to the mobile web need to take a long, hard look at Progressive Web Apps. If you’d like to discuss your specific situation in detail with one of our subject matter experts, drop us a line.
Jason is the Client Engagement leader at YML, playing a vital role in helping brands navigate the complex digital landscape of mobile, social, search, and data and bridging them with physical spaces to create seamless experiences.
He has led many complex and stakeholder-rich engagements for companies like Walmart, T-Mobile, Sephora, Adobe, Honda, Wells Fargo, Choice Hotels, and West Marine.
Prior to YML, Jason was at SapientRazorfish from 2004-2018, before which he spent time with Pricewaterhouse Coopers, Diamond Management Consulting, and McKesson.
Jeremy is a 20+ year veteran of the agency and technology consulting worlds. Throughout that tenure, a wide variety of roles have been held together by a common thread: a relentless focus on what’s next.
He’s helped agencies and Fortune 100 brands understand what’s around the bend, demystify emerging technologies, separate the paradigm shifts from empty hype, and build solutions that shape the future of customer engagement.
He’s a different kind of futurist: a scout, filter, architect and incubator rolled into one. His insights help companies identify and capitalize on opportunities at the intersection of technology and evolving customer behavior.
YML is a creative technology company that helps brands reimagine their customer experiences.
We create digital products with purpose that have lasting impact on users' lives and clients' businesses.
Through next-generation technologies and world-class design, we help brands like Apple, PayPal, L'Oreal, Home Depot, and Staples develop solutions that drive major business outcomes. Founded in 2009, Y Media Labs is headquartered in Silicon Valley with five offices worldwide.