PWAs and Magento: Creating Next-Gen Mobile Shopping Experiences

1
16068
PWAs and Magento | MageWorx Magento Blog
Reading Time: 7 minutes

This is a guest post by Viesturs Abelis, Content Lead at Scandiweb.

Progressive Web Applications. Everybody’s talking about them and even if you’re unsure about what exactly they are, you’re probably already using the technology. Twitter, Starbucks, AliExpress, and countless others have successfully implemented PWAs, which are used by millions of people every day.

And the results are in. Twitter saw a 65% increase in pages per session, a 75% increase in tweets sent, and a 20% reduction in their bounce rate. AliExpress doubled the number of pages visited per session and saw a 104% increase in conversion rates. Google has amassed an astounding portfolio of PWA success stories

What was, a couple of years ago, a technology leveraged mostly by digital giants, due to the high costs of development and inescapability of custom solutions, is today becoming increasingly democratized and accessible. Thanks to emerging PWA solutions and the widespread embracement of PWA, the technology is now available to everyone. 

PWAs look like a game-changer and, as more and more merchants are jumping onto the bandwagon, it’s important to understand what’s going on and what this new technology means for you.

What is a Progressive Web Application?

Progressive Web Applications are a new type of web development technology (although the idea has been around for a while) that combines the best of the web and native apps and creates superior app-like digital experiences right in the user’s browser. So, when you hear PWA, think ― a mobile website with the features and full functionalities of a native app.

What features exactly are we talking about? First and foremost, PWAs are fast. With demonstrated 300% increases in page load speed, highly optimized pages reach near-instantaneous load times, making them as responsive and pleasant to use as native apps. 

Other features include full-screen UI, home-screen save, push notifications, hardware accessibility, and even offline mode. Made possible by the wondrous Service Worker, about which you can learn more here in this talk by the Google Developer Community, PWAs bundle a variety of modern digital developments to deliver a truly app-like experience. 

They’re even deployable to app stores if you wish to do so. However, unlike the native apps constrained to these platforms, PWAs function like regular websites and are indexable on Google, making them not only discoverable but also giving you a potential SERP boost due to the faster load times and better experiences offered. This also means no bulky downloads and automatic updates making for frictionless initial engagement. 

The rising popularity of PWAs can be attributed to the emergent opportunity gap between how native apps and mobile web are used – mobile web gets more visitors, yet apps offer better experiences and outperform web in terms of engagement. PWAs deliver the experience people want right where they’re looking for it. 

PWAs and Magento: Creating Next-Gen Mobile Shopping Experiences | MageWorx Magento Blog

PWAs: Hype or Future?

As with any emergent technology, caution trumps adoption. Highly dependant on browser support, volatile in their infancy, and still, in continuous development, PWAs don’t yet offer the certainty and peace of mind for surefire adoption. There’s an air of mystery surrounding PWAs as merchants are scrambling to understand them.

However, one thing’s certain ― it’s not just hype. The technology is sound, early adopters have been greatly rewarded, and, as knowledge spreads, so does adoption. 

PWAs Positively Influence Almost Every Marketing KPI

Real-life case studies have demonstrated PWAs’ ability to positively impact almost every marketing KPI ― performance, engagement, time spent on site, leads generated, re-engagement, conversions, and more. 

In a mobile-first era, it comes as no surprise that such transformative technology outperforms more traditional digital channels, and the importance of prioritizing mobile experiences is still trending upward. Mobile shopping is increasingly dominating eCommerce; Google recently announced mobile-first indexing, with it being enabled by default for all new websites as of July 1st, 2019; and a significant amount of new internet users begin their digital journey on mobile. 

Hence, delivering above-par mobile experiences is welcomed with open arms and their rising importance is likely to push marketers around the world to put increased focus on doing so, to remain competitive. 

And it’s not just about delivering a better digital experience to your customers, but reaching new ones, as PWAs play an important role in terms of accessibility. With the light-weight data demands of PWAs, an accessible digital experience is enabled for those with suboptimal network coverage, without UX compromises. For instance, Uber’s expansion initiative went hand-in-hand with a PWA, to ensure rural and other areas with slower connections could still experience an engaging and responsive experience. 

And, now merchants around the world can do the same for their current and future customers, as worldwide PWA adoption is underway. 

Magento is Welcoming PWAs with Open Arms

Magento has had their eye on PWAs for a while. Introducing PWA studio back in September 2017, it finally saw the light in January 2019, and by the time Magento Imagine 2019 rolled around in May, PWAs were on everybody’s mind and certainly the hot topic of the conference.

While Magento dives head-first into PWAs and numerous other solutions have been developed showcasing the capabilities of PWAs, the community is somewhat reluctant to follow, as there’s no definitive solution merchants and extension builders can rally around. In turn, this leads to custom development attempts, which end up being costly and unsustainable, particularly when it comes to heavily modified and highly customized storefronts, disparaging adoption. 

Nevertheless, PWA storefronts are being developed at this very moment for a plethora of Magento merchants. Magento is investing heavily in PWAs and so is the rest of the world. 

For Magento merchants, it’s not a question of what’s going to happen with PWA? PWA is here. The question is ― how to get started? 

3 PWA Solutions for Magento

PWAs and Magento: Creating Next-Gen Mobile Shopping Experiences | MageWorx Magento Blog

Magento is one of the most powerful eCommerce solutions on the market ― it powers 12% of all eCommerce stores on the internet and adoption continues to grow year after year. With such a market share, becoming a PWA platform can help Magento fundamentally redefine the internet and they’re doing just that, by ensuring any merchant interested in getting a PWA for their store can do so. 

If you’re looking to get a PWA for your Magento store, there are several options available to you. Here are three that deserve your attention. 

Magento PWA Studio

Magento PWA Studio is Magento’s answer to the new craze and has been in the works for a few years. Released along with Magento 2.3, it’s a suite of developer tools for building PWA frontends for Magento. Empowering your developers with everything needed for development, deployment, and maintenance, and complemented by rich documentation, Magento PWA studio is likely to become the go-to tool for Magento merchants looking to take their store into the future. 

Take a look at this demo store (note: please do so on a mobile device), developed by Inchoo using Magento PWA studio tools to demonstrate what can be achieved

ScandiPWA

Unlike Magento PWA Studio, ScandiPWA (developed by Scandiweb) is an open-source Magento-first theme, rather than a set of tools or a storefront. This means it’s directly installable on your Magento 2.3 store without any changes in infrastructure and can be extended to match your needs, in a way that’s familiar for any Magento developer. Much praised by the community, ScandiPWA’s ready-to-use theme has garnered a lot of attention for being hassle-free and a splendid solution for those looking for a high-performing ready-made PWA solution. 

Explore the ScandiPWA demo store (note: please do so on a mobile device) or the GitHub repository

Vue Storefront

One of the most popular PWA solutions on the market, Vue Storefront is an open-source platform-agnostic Progressive Web App for eCommerce written in Vue.js. With a booming community, it’s one of the biggest PWA hubs. Given its large scale, it’s a rather complex solution. Being platform-agnostic, rather than Magento-first means that some Magento functionalities are missing, however, one can expect this to be fixed as development continues. 

Explore the Vue Storefront demo store (note: please do so on a mobile device) or the thriving GitHub repo

Benefits of Magento-First PWA Solutions

PWAs and Magento: Creating Next-Gen Mobile Shopping Experiences | MageWorx Magento Blog

If you’re a merchant on the Magento platform, a Magento-first PWA solution can be the easiest way to join the PWA race. Such solutions come with the additional benefits of familiarity, lower development costs, and improved performance, keeping merchants and developers happy. 

Here are three examples of how the Magento-first PWA solution ScandiPWA leverages the Magento stack to deliver a spectacular PWA experience. 

No Middleware

ScandiPWA is a Magento-first PWA theme, which means it’s installable directly on top of your Magento store, which, in turn, has the benefit of having a direct relationship with your Magento back-end. This saves merchants a lot of hassle, as any middleware adds an extra layer of complexity ― features have to be rebuilt, extra data structures – developed, customizations – adapted. 

Here’s an example: solutions built as separate PWA storefronts speak only with the website’s database. This affects such common issues as handling redirects. Rather than hitting the Magento core installation and then being redirected as specified in the backend, separate storefronts have to develop a solution for ensuring the users land where they’re supposed to. 

Middleware comes with its fair share of advantages for more universal PWA solutions such as Vue Storefront, as it allows to link a single powerful solution to multiple platforms, however, the downside is that it demands extensive adaptation and, oftentimes, reinventing the wheel, so to speak. Magento-first solutions circumvent this by leveraging the readily-available Magento features resulting in savings on development costs for your business. 

Familiarity with Magento & Saving Time

A significant benefit of Magento-first PWA solutions is familiarity. The continued use of an environment familiar for your devs will make adoption easier for them and you, streamlining the development process. 

Magento has proven themselves as one of the most advanced eCommerce platforms in the world and the community that has grown around the platform is indicative of that. This means you can find Magento specialists in every corner of the world, and despite the novelty of PWA, onboarding should be far smoother, when compared to working with an entirely new environment. Magento’s tools are well-known by developers and merchants alike and have a demonstrated history of success. 

Hence merchants opting for a Magento-first PWA solution can expect lower costs and be more in-the-know of what’s going on.

Easy and Low-Cost Migration

ScandiPWA is a ready-to-use theme for Magento. Any Magento-first solution brings significant advantages when it comes to implementation. Rather than having to entirely rework and recreate your front-end from the ground up, a plug-and-play Magento solution lets you tap into the benefits of PWAs without undertaking the risk of jeopardizing your business. 

As established, adding middleware and having a wholly custom front-end introduces a level of complexity not usually present in Magento-first solutions. This entails additional overhead, maintenance, and support costs. 

Conclusion

Progressive Web Apps are here to stay. Despite a cautious outlook towards adoption, merchants around the world are nevertheless keeping a finger on the pulse of what’s going, scouting the solution right for them and seeking to replicate the many successes of PWA pioneers. 

For Magento merchants looking to get a foot in the door as soon as possible, there are several options – developing their own solution using Magento PWA studio, opting for a platform-agnostic PWA solution such as Vue Storefront, or going with a Magento-first theme such as ScandiPWA. The easiest and most cost-efficient way to get started is the latter, as it enables your business to leverage the full range of PWA benefits without straying too far from the familiarity of Magento. 


Viesturs Abelis is a Content Lead at Scandiweb and a spirited ScandiPWA evangelist, Viesturs always keeps two eyes to the future, keen to make the latest digital developments accessible to everyone.

1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here