Okay first things first: most readers of this blog post are probably already asking themselves, “What’s a PWA?” The buzz around PWAs or “Progressive Web Apps” has been building since designer Frances Berriman and Google Chrome engineer Alex Russell coined the term back in 2015. These mobile apps that progressively load and run in a web browser promise to blur the lines between native apps and the mobile web by bringing (almost) all the advantages of native mobile apps to the mobile browser.

PWAS SOLVE TWO PROBLEMS AT ONCE

To understand why PWAs are important we must take a closer look at the state of the mobile web today. According to Forrester and Shop.org, average conversion rates on native mobile apps are 6%, on desktop 4.2%, while the mobile web lags behind at only 2.3%[1].

What we can conclude from these stats is that well-designed and well-built native mobile apps (think Amazon) provide such a fantastic and frictionless shopping experience that they provide a superior digital shopping experience to the venerable desktop. The problem, however, is that mobile apps are a) very expensive to build and maintain and b) consumers only download and use apps from brands with which they have regular interactions. Native apps, therefore, are great for enterprise organizations with seven figure mobile development budgets, mature loyalty programs or customers that engage and purchase multiple times a month, but for the average merchant, a native app strategy rarely makes commercial sense.

This is where PWAs play their trump card: the ability to deliver blazingly fast and slick “app-like” experiences in the mobile web browser using open web technologies. It is an intriguing proposition for online merchants faced with an existential shift of traffic from desktop to mobile devices. PWAs promise to solve two problems at once. They offer improved performance and usability (vs a traditional responsive mobile site), thus promise to have a big impact on mobile web conversion rates while also alleviating the need for merchants to invest in developing expensive native apps.

PWAS ARE BUILT WITH OPEN WEB TECHNOLOGIES

So, now that we’ve covered the “why” let’s take a closer look at what PWAs are and how they differ from existing responsive web design (RWD) sites that dominate the mobile web today. It’s key to remember that PWAs are an evolution of open web technologies. Unlike native apps that require a different development skillset from the web, PWAs are built 100% using JavaScript, HTML, and CSS. The secret behind PWAs lies in a new set of API’s that have been recently added into web browsers themselves called “Service Workers”. Service Workers allow JavaScript to run in the background of the PWA and process important functions such as predictively pre-loading content, sending push notifications and synchronizing and receiving data. Effectively Service Workers empower developers to build app-like capabilities using open web technologies. This means that mobile web users now get to experience:

• Faster Browsing – PWAs are much faster to interact with as well as provide smoother scrolling and transitioning of pages as the experience “progressively” changes thus removing the need for pages to “re-load”. Early adopters such as AliExpress have seen 100% jump in conversion rates since making the switch and Google even provide a testing tool (Lighthouse) so you can benchmark your PWA’s performance[2].
• Instant “App” Gratification – PWAs are instantly discoverable and usable via the browser, thus eliminating the need to “download” or “install” an app before use.
• Push Notifications – An exciting proposition for online marketers is that PWAs support push notifications in the browser, extending the opportunity for marketers to send real-time, contextual and personalized communications with a simple “one click” opt-in directly from the PWA site.
• Offline Usability – PWAs can detect the state of the mobile network and thus developers can design them to be tolerant of poor network conditions. For example, a PWA may proactively pre-fetch catalog content to ensure an uninterrupted and usable product discovery experience during those 60 seconds when the commuter train enters a tunnel.
• Rapid Re-Engagement –  Just like a native app, a PWA can be “saved” to the home screen (on Android devices), allowing for rapid repeat access without the need to open the browser and type in a URL. Furthermore, PWAs operate in “full-screen” mode, hiding the browser URL bar on the top and the browser navigation tools on the bottom of the screen for a native “app-like” look and feel.

PWA ADVANTAGES FOR MAGENTO MERCHANTS

PWAs mean more mobile visitors, usage, and better conversions. What’s the catch? While there have been some concerns about ubiquitous browser support, SEO rankings, and support on desktop, these perceived drawbacks are quickly being addressed which means that PWAs are:

• SEO Friendly – PWAs are not like conventional sites as the pages progressively adapt as the user navigates and performs actions (essentially, pages rarely reload, hence the URL stays constant). Luckily all the major search engines have mechanisms of crawling the JavaScript of a PWA site just as they would a conventional responsive site. The key is maintaining good SEO practices such as using canonical URLs and maintaining a crawlable sitemap.
• Desktop Friendly Too – PWAs are not exclusively for the mobile web. In fact, desktop browsers support Service Workers too, which is important as PWAs can and should be developed responsively to support varying screen sizes across mobile, tablet, and desktop.
• Coming to Safari – Apple recently announced that development for support of Service Workers on the Webkit engine (on which Safari is based) has started, so in the near future PWAs will work not only on Android phones and desktop browsers (IE, Chrome, Firefox, Opera) but on iOS phones and MacBook’s too.

THE MAGENTO PWA STUDIO

Magento believes that PWAs represents a seismic advancement in the web, similar in magnitude to the transition that happened five years ago from conventional desktop sites to responsive web design (RWD) sites. We know however that this is not a small change and that Magento merchants and our solution partners will need help making this migration. That’s why at Magento we are collaborating with Google and our broader community to develop the Magento PWA Studio—a suite of tools for building online stores as Progressive Web Applications. I strongly recommend to all our merchants to:

1. Take a PWA Experience Test Drive – PWAs are real and I encourage you to try some of the early trailblazer sites like wego.com, housing.com, aliexpress.com and Twitter Lite. Note: As you try these sites, if you’re an iPhone user, just remember to use a Chrome browser (don’t worry, support for PWAs in Safari is coming).
2. Get Your Front-End Development Teams Engaged – The Magento PWA Studio is still in the early phases, but we have recently defined the architecture, frameworks, and tools that The Studio will be based on. I recommend your front-end developers and architects read the DevBlog post of Magento Lead Front-End Architect James Zetlen to learn about our plans and engage with us to provide feedback.
3. Start Budget Planning for 2018 – As 2017 draws to a close, we encourage commerce leaders to make sure that PWAs are on your 2018 Magento roadmap and start planning for a migration from your current RWD site to PWAs next year.

PWAs are an exciting journey for Magento, our merchants, and our partners. Stay tuned for more information throughout the remainder of 2017.