E-commerce retailers are dealing with new market forces – hello Amazon – that are disrupting consumer behaviors. On top of that, consumers rely on their mobile devices to make first touch – a new dynamic that’s forcing retailers to re-think how they attract, capture and retain shoppers.
Mobile is the new battle ground and winning mind share largely depends on speed and performance to make a lasting first impression. The good news is technologies like Progressive Web Apps (PWA) are leveling the playing field, empowering retailers with a new way to earn revenue.
PWAs offer the best of both worlds – the silky-smooth experience of a native app, plus the discoverability and convenience of the mobile web. Incredible speeds, smooth transitions and high-converting features make PWAs the ultimate shopping experience.
This article breaks down everything you need to know about Progressive Web Apps for e-commerce.
Why are Progressive Web Apps important, especially for retailers and commerce?
If your mobile website takes more than 3 seconds to load, you’ve lost 53% of your traffic. And despite the super-charged growth in mobile, users abandon slow experiences in just seconds. Therein lies the challenge – the lack of speed on mobile.
Responsive websites – which push a heavy bundle of code, distributed to all devices acting like an anchor on performance – don’t yield reliable conversion rates. Simply, the increasing traffic on mobile is not keeping up with predictable revenue on desktop. And sluggish performance is the culprit.
Progressive Web Apps to the rescue.
PWAs enable the right-level of performance – from fast page loads and reliable connections to smooth functionality – to keep your customers’ attention, the most precious resource on mobile. As a result, mobile websites now enable users to accomplish tasks quickly.
For shoppers, a Progressive Web App is fast, easy to use and fun to navigate. And for retailers, PWAs convert more often and finally place mobile at the heart of your growth strategy. But how? Consider the following benefits of a PWA:
- Fully Responsive – Predict a user’s next click to prevent lags or jerky transitions
- Instant-page loads – Page loads are sub 2 seconds, which feels instant
- App-like – Shoppers are met with a slippery-fast, seemingly invisible experience that feels like a native app
- Add-to-home screen – Prompt shoppers to add your app-icon to their home screen for easy re-entry and repeat business
- Offline mode – Customers can browse offline, keeping you connected each step of the way
- Native App extension – The PWA can be added to various app stores to expand your reach
- Frictionless checkout – The Payment Request API eliminates cumbersome form fields for easy, one-tap checkout
- Push Notifications – Schedule push notifications based on user tags, time, date and time-since activities
What is a Progressive Web App (PWA)?
PWAs take advantage of new features supported by modern browsers to combine the ease of a website with the immersive experience of a native app. A key element of a PWA is the Service Worker.
Service Worker is a script that the browser runs in the background that intercepts network requests and enables caching and the ability to retrieve resources. First introduced by Google – and coming soon to Safari – Service Workers enable you to manage network requests programmatically and run tasks in the background. Basically, Service Worker provides rich, offline experiences and the functionality that would normally require a native application. Consider the following benefits of Service Worker:
- Provides offline browsing while guests experience spotty network connections
- Instant page loads with background updates
- Flexible and strategic caching
- Enables push notifications
Until the advent of Service Workers, the ability to deliver features like push notifications and offline access were challenging on the web because of browser limitations. It’s a whole new game now.
Combine AMP + PWA to create a Progressive Web AMP and unleash a conversion-making machine
There’s the legacy approach to PWAs and a new pattern called a Progressive Web AMP. I’ll explain.
Legacy PWAs have some limitations. Primarily, the first touch can be slow, as the Service Worker and other tasks need to cold load in the background, causing the user to wait. And because milliseconds matter on mobile, a slow start turns users away.
A Progressive Web AMP is a new pattern – created and promoted by Google – that solves the problem of cold starts. Yes, Accelerated Mobile Pages (AMP) play nicely with PWA. In fact, they’re meant for each other.
AMP pages are ultra-portable, embeddable content units that load instantly. AMPs are pre-fetched and pre-rendered, guaranteeing that a user’s first touch is blazing fast. While legacy PWAs use Google AMP for landing pages from organic search results – which works great – once the user enters into the PWA, they are reverted back to slower page loads, causing a jerky transition. When you get used to AMP, elegant and fast-loading pages, you want to carry over that speed and ease into the main mobile experience. That’s why AMP and PWA is a perfect pairing, keeping users on the fast track.
As standalone technologies, AMP and PWA have inherent performance gaps. AMPs render fast but lack some functionality and PWAs start slow but offer the reliable and the rich experience of a native app. By combining the two – using AMPs as the content pages of your PWA – these limitations are not only overcome but the effect is a superior experience. And just like that, the Progressive Web AMP pattern, or PWAMP, was born by merging AMP and PWA to guarantee users starts fast and stay fast throughout the shopping experience.
AMP in PWA: How does it work?
The combination of AMP and PWA offers a performant, elegant and user-centric experience. Here’s how it plays out.
The PWA app shell features a fixed header and menu that loads AMPs as the content pages. And because AMP page as lightweight, content units, they load instantly throughout the customer journey. To further breakdown the PWA+AMP pattern, WompMobile’s CEO recently walked through the technology during AMP Conf 2018 in Amsterdam.
The DNA of a Progressive Web AMP
AMP + PWA combines three technologies: 1. Accelerated Mobile Pages, 2. PWA components, and 3. Service Worker. Let’s look at each piece of this winning combination.
Accelerated Mobile Pages are portable content units that:
- Guarantee fast load times;
- Are cacheable, pre-fetched and pre-rendered;
- Utilize the world’s largest web-component library for rich interactions;
- Rely on the AMP-validator to ensure the critical path is not blocked; and
- Feature the AMP badge in acquisition channels, leading to better user engagement and SEO.
PWA components merge the feel of a native app with the searchability of a website, delivering rich features, such as:
- Smooth page transitions;
- An installable, home-screen icon for easy, repeat business;
- Frictionless, auto-fill payment options; and
- Asynchronous background loading on the first visit and instantly on repeat visits.
Service Workers intercept network requests to offer powerful features, such as:
- Push notifications;
- Offline browsing to keep users connected during spotty network conditions;
- Instant page loads with background updates; and
- Flexible and strategic caching.
Looking for a PWAMP example? You got it.
Carved.com is a great example of a Progressive Web AMP. From a user discovering the AMP page from search to selecting a product and to completing the checkout process, the whole experience takes seconds.
It’s no surprise that PWAMPs crush it. During a 2-month A/B test for Carved.com, the Progressive Web AMP delivered on every front, including a 75% increase in e-commerce conversion rates. For the first time, mobile is rivaling the desktop.
Watch the PWA+AMP in action:
Are Progressive Web AMPs better? Yes.
Consider the ways a Progressive Web AMP offers retailers with a competitive advantage:
- Always fast, no matter what – from discovery in search all the way through checkout
- Great distribution is built in
- No duplicate engineering
- Less client complexity for better performance
- And because every page of the PWA is AMP valid, it will be discoverable for display in acquisition channels, like Google and Bing, providing a fast, first impression
Don’t underestimate the amount of duplicate engineering that legacy PWAs require.
A Progressive Web AMP reuses AMP pages – previously only intended for acquisition channels – for the content pages of the mobile experience. On the flip side, a legacy PWA requires double the work , as AMP and PWA pages are separate engineering efforts. The PWA + AMP pattern solves this development burden by offering a better mouse trap — leveraging AMPs as both landing and content pages.
This all boils down to: Progressive Web AMPs are conversion-making machines. Shoppers are met with a fast, easy experience, and retailers measure higher conversions rates. The mobile web has finally arrived.
WompMobile delivers AMP + PWA for e-commerce
A Progressive Web AMP isn’t just a new website, it’s a radically new way to engage and convert mobile shoppers. PWAs require a new set of engineering skills and application architecture to manage events, caching, pre-rendering, predicting a user’s next move and bringing it all together into a seamless, fast experience.
When it comes to building Progressive Web AMPs, WompMobile is the only agency with the experience, technology and proven success to deliver. Our technology platform, which services 7 million AMP pages each day, can convert any website to AMP or PWA, saving time and money. Our platform is agnostic, integrates with any software stack, synchronizes automatically and enables clients to easily scale.
To learn more about the difference a Progressive Web AMP makes, reach out to one of our mobile experts for a free consultation.