Don’t lose your head with PWA
Preamble
PWA and Headless are hyping and everybody is talking about it. Unfortunately, both technologies get regularly mixed up. So what is the difference between PWA and Headless? And how can you achieve the best improvements with minimal investment? In this article, we’d like to bring a little light into the unknown.
Definition of PWA
PWA (Progressive Web Application) is a standard for next-level web applications. PWAs connect best practices of web development with the possibilities of modern browsers to give users the same experience of usability as native mobile applications have. PWA follows a set of guidelines and suggestions to be reliable, fast, and engaging.
The PWA core checklist defined by Google is:
- Starts fast, stays fast
- Works in any browser
- Responsive to any screen size
- Is installable
More details and an exemplary PWA checklist can be found here:
https://developers.google.com/web/progressive-web-apps/checklist
Google shares a tool called Lighthouse which allows you to test your web app in terms of being PWA.
PWA is nothing more than HTML + CSS + JS using best practices like responsive web design, while leveraging the capabilities of modern browsers to offer users native-like browsing or shopping experience. The game-changers are the web app manifest file and service workers. The first one allows you to add your web app to the home screen. The second is more complex but much more powerful. Service workers offer rich offline experiences, background syncs, push notifications and advanced-cache strategies. With these options, a PWA can give the user a much more seamless browsing experience, especially when using it under varying network strength.
Definition of Headless (Commerce)
A headless software does not have a graphical user interface. It receives inputs and provides output through APIs like REST or GraphQL. This means that Headless Commerce is a commerce application or platform without any user interface or frontend by default. The user interfaces, whether it is a web or mobile application, a chat robot or voice assistant or simply a dash button, is an independent application communicating with the Headless Commerce platform through an API. By separating backend and frontend, a headless web application can offer a high level of flexibility and scalability as well as high performance, but in general, initial setup of a headless architecture is often an enormous task — we will get into more detail on this later in the article.
The evolution of e-commerce web applications
While PWA adds features to web applications, Headless deals with the architecture of web applications. Below a simplified representation of the two terms.
Benefits of PWA
PWA enables a better and faster user experience on any screen size or device. From a business perspective, this means a higher turnover in your webshop, as there is a correlation between user experience and conversion rate.
Another benefit of PWA is the possibility to replace native mobile applications with it. With PWA, you’re able to reduce development costs by working on one single code-base for all platforms (iOS, Android, Windows, …). Besides that, companies like Netflix are going with PWA, because they want to become independent of Apple and the App Store fees.
The misunderstanding about PWA
Most often when people talk about PWA they take headless for granted. When you hear about PWA in commerce, there is the assumption that the Frontend UI has to be written as a React, Vue or Angular application. But why is that? You don’t need to reinvent the wheel for your webshop to introduce PWA and nobody ever said that headless is required to achieve that. Taking a look at the PWA checklist from Google, none of the points require you to switch from a traditional HTML, CSS and vanilla JavaScript frontend to React or Vue.
Vue Storefront vs. MageSuite
A very popular Headless Commerce Frontend nowadays is Vue Storefront. It has great popularity on Github (https://github.com/DivanteLtd/vue-storefront) and a universal frontend app for almost any commerce platform you like. Nothing wrong with that. And if you are really interested in going into Headless Commerce then you should definitely have a look at it.
Does Headless provide better performance?
The definition of good performance is blurry but there are at least two very popular benchmark tools that allow the comparison on a common denominator: Google PageSpeed Insights and WebPageTest.
So without any further words let’s have a look at the numbers. Let’s test the Mobile PageSpeed of the Vue Storefront PDP: https://demo.vuestorefront.io/gobi-heattec-reg-tee.html?childSku=MS04-XS-Black
A disadvantage of being heedless is that the whole frontend application is built in JavaScript. This requires more CPU and Memory on a mobile device. Users with older devices might experience even worse performance than on present server side rendered frontends.
In comparison the PageSpeed result of the non-headless PWA MageSuite demo store:
Does Headless provide a better native application experience?
As mentioned above, Lighthouse is testing many PWA aspects for you. So let’s have a look at the results.
Headless Test: https://demo.vuestorefront.io/gobi-heattec-reg-tee.html?childSku=MS04-XS-Black
PWA Test: https://demo.magesuite.io/nona-fitness-tank.html
As you see, not really. And in fact there is not much difference between headless and non-headless PWA in practise.
What are the disadvantages of Headless?
There are two major disadvantages to Headless applications, both of which result in a slower time to market and higher development investment.
First of all, there are only a few complete themes or frontend web apps available on the market, which you can use out-of-the-box and customize. This means that usually, you have to invest a lot of time to develop a customized frontend for your commerce web app.
Second, you can not use 3rd party plugins for your eCommerce platform that easily. You have to ensure the plugin has rich API support and write the frontend part from scratch. With every new release of the 3rd party plugin, a lot of maintenance is required to keep the plugin working in your headless application.
Another aspect is the uncertainty about SEO. There are still not enough best practices on how to write a headless application and ensure a good ranking in search engines like Google and co.
Who should use Headless?
Headless apps are great for unique web applications like Uber or Spotify, where you want instant interactions, preload content and keep it in your offline storage. Headless solutions can work great for you if you have large development resources or a large budget available in order to build a scalable and stable software, usually from scratch. If you are looking for a technology that enables you to integrate native app functions into your e-commerce solution without a massive investment, a Headless architecture might be the wrong choice for you.
Can you achieve PWA without Headless?
Yes, you can!
We’d like to show it to you by the example of our demo shop based on Magento 2, the MageSuite content commerce toolkit for Magento and our HTML5 theme called “creativeshop”.
Let’s go through the PWA core checklist from Google:
- Starts fast, stays fast
Google recommends, of course, Google PageSpeed as a benchmarking tool. Here we achieve a score of 48 on Mobile and 89 on Desktop for a product detail page. In comparison, a product detail page in the Vue Storefront demo shop performed at 30 on mobile and 71 on desktop. Both values are very decent and well on par with leading B2C shops. - Works in any browser
We ensured it works for every browser that our target group is using with tests by crossbrowsertesting.com - Responsive to any screen size
Well, this is pretty obvious. Every modern website should be responsible. Of course, our MageSuite and creativeshop theme are as well. - Provides a custom offline page
We did this as well. For our customer NKD, every page visited before is cached and can be browsed without a reliable internet connection. Additionally, our custom offline page is showing the hotline and the current advertisement leaflet. - Is installable
Because we fulfill all the requirements, users can choose to add the shop to their home screen which will make the shop display and behave just like a native application.
Google has another checklist for the ideal PWA user experience. Let’s have a look at that:
- Provides an offline experience
You can load a subset of content in the offline store. Of course, we need to keep the limitations in mind. Having hundreds or even thousands of products, each with instant stock updates makes it very challenging to provide a fully working shop. - Is fully accessible
Although we do not focus on accessibility too much yet, it’s basically even easier to fulfill the WCAG 2.0 standard with traditional HTML than with React or Vue. - Can be discovered through search
We achieve good rankings in Google and good scores in SEO on-page audit tools. Search engines are used to crawl content on HTML pages. It’s much more challenging to optimize a React or Vue app, especially without server-side rendering support available out of the box. - Works with any input type
The webshop is usable with a mouse, a keyboard, a stylus, or touch. - Provides context for permission requests
We ask for permissions only in a relevant context. For instance, the geolocation prompt will only appear when you explicitly want to localize yourself in the store locator section. - Follows best practices for healthy code
We follow the code review process and use different kinds of code analyses like W3C validator and Lighthouse report to ensure code is deployed only after passing the checks.
In addition to that, we also introduced further enhancements for the PWA experience.
- Push notifications
Once your order leaves the warehouse, you will get a push notification that it has been shipped. You will also get push notifications about price reductions inside your wishlist or basket and this is only the beginning of our journey with such features. - Preloading
By using the Service Worker, we try to preload content of a probably upcoming page. For example, once you’re on a product detail page, we preload the next product detail page for the user in the background to achieve instant loading performance.
What are the limitations of PWA?
The biggest one is the lack of support by Apple. Integrating Push Notifications or making the web app installable are not supported or very restricted on iOS devices.
Conclusion
You don’t need to lose your head for PWA. It’s possible to achieve great PWA experience by using modern web standards like the service worker and tweaking performance according to popular benchmarking tools. If you’re using Magento, we recommend taking a look at the OpenSource project MageSuite and MagePack. You’ll get a good out-of-the-box package for enhancing your webshop to PWA.
