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.

Peter
 

 


[1] Source – The State Of Retailing Online 2017: Key
Metrics, Business Objectives, And Mobile. Forrester
Research, Feb 28, 2017.