Daily ArchivesJune 18, 2020

What are Progressive Web Apps (PWAs)?

Let’s begin by answering the question – what is PWA? PWA stands for Progressive Web Apps. Progressive Web Apps are a pattern for building web applications using HTML, CSS, JS and modern web browser APIs to bring a native-like experience. PWAs combine the best of 2 worlds: web and native apps. Like other mobile applications, PWAs are easily installable and make development work simpler for any merchant trying to reach as many customers as possible.

While the feature parity between Progressive Web Apps and native apps is not 1:1 just yet, PWAs have come a long way since inception. Features like instant loading, push notifications and offline navigation/purchase are now widely available no matter which PWA implementation you choose. 

They won’t be the right approach in every case – for example, if you need a feature that’s not available on a Web browser or through an API, you will likely need to go the native route. But PWA capabilities are continuing to expand and what may require a native app today, might be PWA-worthy tomorrow. Project Fugu is a good place to see what’s coming and what’s being worked on right now.

Why are PWAs such a big deal?

PWAs come with an incredible set of features that were once reserved for native mobile apps alone. While regular web apps have tremendous reach in every device with a browser, at the end of the day these apps are just a webpage in a browser. 

Native apps are another way to reach mobile users but they must be developed for one platform / operating system at a time. PWAs enable development of a single app for multiple platforms. This streamlined approach is something mobile developers have been anxiously waiting for – easily reaching every potential customer no matter what operating system they are using. 

They also solve one of the most challenging issues developers face: distribution. Since you don’t need to publish these apps in a marketplace, you can just add a few lines to your manifest and make PWAs easily installable with a couple of clicks. Results drive a consistent customer experience that they expect through a native application but with PWA, they get a standalone experience, completely separated from the Web browser. 

This means a full-screen experience with no URL bar, the ability to install the PWA and dock it to your device home screen instead of visiting a regular webpage plus everything a Service Worker has to offer. 

Instead of the legacy way of updating via form submission and waiting for approval and publishing of the new version to the App Marketplace, changes made into any PWA are immediately available the next time you are connected to the Internet and open the app. PWA installation is now a standard feature available in all major mobile browsers, as well as Chrome and Edge on desktop.

How does PWA help Magento merchants?

Let’s face it: the Magento 2 frontend was already old when it was released and we’ve seen how that plays with frameworks like Prototype.js and Knockout.js. 

The JavaScript ecosystem evolves quickly and constantly following the hottest frameworks, developer trends, and updated best practices. This makes it challenging to keep up when having to maintain separated codebases. 

PWAs are particularly attractive to merchants using Magento 2 because it reduces front-end development complexity, giving you flexibility, extensibility, and opportunity to deploy resources to develop new features. Developers can implement almost everything in the regular Magento 2 frontend at a fraction of the cost and time by using any of the available APIs.

How can customers run a PWA on Hostdedi?

We’ve made it easy to run PWA on the Hostdedi platform. We’ve created a step-by-step guide for how to install Magento’s official PWA PoC, Venia storefront. This resource outlines how to build, compile and transfer this PoC to one of our servers without the need to start and maintain middleware services.