Progressive Web Apps for eCommerce

Progressive Web Apps has become a buzzword of late, but PWAs (progressive web apps) have been around for some time. So what are PWAs and why should I be investigating them and the effects they could have on my ecommerce site?

What is a Progressive Web App?

Put simply, progressive web apps are a hybrid between web pages and apps. It provides the same functionalities and features of a website offered by most modern browsers, with the benefits of mobile experience.

For example, when a user returns to a website they are prompted to add the website to their mobile device home-screen, similar to an App Store prompt, which would allow the user to use the website as an app later. What’s great about a PWA is that not only does it offer great mobile experience, service workers mean the application can work without an internet connection.

Google defines PWAs as user experiences that have the reach of the web, and are:

• Reliable – Load instantly and never show the downasaur, 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.

Sounds good, but why does it apply to me?

If you’re a merchant of an eCommerce store, you’ll already appreciate that user-experience (UX) is key. Having people use your site and pushing them through from discovery to checkout needs to be a breeze, and PWAs can provide additional benefits.

For example, The Washington Post has been an early adopter of PWA technology. Head of Product for The Washington Post, said:

“In our public-facing beta of the PWA web app, we’ve seen about 5x engagement – page views per visit, number of stories read.”

Progressive web apps offer an ultrafast front-end, meaning your ecommerce store can be rendered within milliseconds, never pausing to load pages or images. It’s mobile first, providing a greater mobile shopping experience without reloads, encouraging the use of mobile devices for interacting with your store. This means your-domain.com is accessible and easy to shop from anywhere and everywhere. Especially since little or no internet connection doesn’t impact the PWAs performance. It continues to perform as normal.

It works offline, how?!

At the heart of every PWA are service workers. These are scripts that run in the background, separate to the web page. Service workers are responsible for content updates, push notifications, caching as well as making it possible for PWAs to continue to work offline. Offline, service workers will intercept and handle network requests, pulling assets from the cache where required behaving like a cloud-delivered native application.

Most often PWAs will be a single page app, whereby on the first load the Application shell will be stored in the cache. This is minimal HTML, CSS and JS that is needed to render the interface of your website. An Application shell usually only contains UI elements without any dynamic data, and because its stored in the cache on first load, each subsequent time a user opens the app (or website) the interface will load immediately. The progressive web application will fetch the required dynamic data.

So, if I invest in a PWA for my ecommerce site, how do users download my app?

They don’t. The native app isn’t actually an app at all and doesn’t require an installation. There is however, an “Add to Home Screen” feature, making it easy for your website users to add a shortcut to the site to their smartphone home screen. Giving it the appearance of an app. To enable this feature, your progressive web application will need an app manifest. This is a simple JSON file that provides the ability to control how your app appears to the user within their smartphones; including app name, icon, size etc. It also controls what the user can launch and how they can launch it.

Do PWAs work on Magento?

At present, in order to bring next generation web apps to merchants there are a handful of community efforts, such as Vue Storefront, whereby source code is taken and customised then connected to Magento.

However, Magento is in the process of developing their own PWA studio. Based on React and Redux, it is likely to be released sometime later this year as part of Magento 2.3. They say:

“At Magento, we firmly believe that Progressive Web Apps (hereafter PWAs) are the future of the web, and that someday soon, the techniques that we call PWA today will become as mandatory for a good website as responsive design and image compression. And so, we entered into a collaboration with Google to make PWAs a part of the Magento story.”

Is it a straightforward process to become a PWA?

Afraid not. Progressive web applications represent modern-day best practices for websites, similar to when responsive web design emerged a few years ago, it is not a special trend of the moment, rather a right way to do things. There is no easy way to reach the end goal, though there are a number of ways that a website can officially declare itself as a PWA, but a progressive web application is built following the performance guidelines that have a website load progressively, is usable and immersive. Meaning, a sites architecture and optimisation needs to be reviewed and revisited.