Progressive

Web App Primer

for Early Adopting
Merchants
 Progressive Web App Primer
for Early Adopting Merchants 3

The Current Limitations of Mobile 4

Responsive Web Design 5
Native Apps 5

Progressive Web Apps Enable

Must Haves of Mobile Experience 7
PWAs are the Future

Table of
of Mobile Commerce  8
Experience Enhancing Power 8
Benefits to Merchants 9

Contents Industry is Embracing

the Mobile Moment  10

Magento PWA Studio 11

Mobile Sites Reimagined  12

The Financial Times Invests
in Mobile-First 12
Sephora’s Mobile Makeover 13
Wyndham Hotels Checks In 13

Consideration for
Early Adopters of PWAs 14

pg.2
 Progressive Web
App Primer for
Early Adopting
Merchants
Web traffic is rapidly shifting to mobile,
expanding to 52 percent worldwide in
2019 according to Forrester Consulting. As
mobile influence over digital commerce
continues to grow, so have expectations of
on-the-go consumers who demand lighting
fast, app-like browsing experiences.

While existing technologies have long

supported mobile interactions, Progressive
Web Apps are poised to radically evolve
how consumers utilize their mobile devices.
Promising a powerful, app-like browsing
experience, this emergent technology
is set to blow away the experiential
demands of todays’ tech-savvy shopper.

We’ve put together this educational primer to

provide an overview of Progressive Web App
technology and how it’s being positioned to
transform the way consumers – and merchants
– conduct business through mobile.

pg.3
The Current
Limitations
of Mobile
The majority of mobile experiences are enabled
by Responsive Web Design (RWD) via your mobile
browser or by downloading and installing native
app. Both technologies were developed in response
to the impracticality of replicating the desktop
experience on mobile.
The Current Limitations of Mobile
Responsive Web Design
Responsive Web Design (RWD) is based on a fluid “one
size fits all” grid system. RWD scales itself to the user’s
screen, resizing site elements in relation to one another,
which allows smoother, contextual browsing.
Experience Limitations of RWD
It’s Just Not Desktop
RWD is essentially folding down a desktop site into a
condensed form factor for mobile and navigated with the
infamous “shrink and squeeze” method. This reliance on
maintain a connection to desktop is out of synch with mobile
users who have differing expectations, interactions, and intents.
Functionality Without the Frills
The web-based orientation of RWD is unable to tap smartphone
features which enhance the customer experience, such as
the camera, microphone, and GPS-based location services.
Same Code, Different Platforms
RWD downloads the same code to display a site on
mobile as it would via desktop. This code weight
increases mobile load times and can quickly drain data
if a dedicated internet connection isn’t available.
Native Apps
Native apps are purpose-built smartphone applications
installed on a user’s device through an application
store such as Apple’s App Store. Their simplified visual
orientation and navigation motivate user engagement and
they can tap mobile features like the camera, microphone,
and GPS, to offer immersive user experiences.
Experience Limitations of Native Apps:
Downloads are a Drag
A main detractor of native apps is their initial time investment
to load onto a device. Login into the app store, find the app,
download and install the app, login to the app, register to
use the app, then finally start using said app. Is it any wonder
why most mobile users see native apps as a hassle?
Data Drains
Most native apps require a significant investment of cellular
data for download if a dedicated WIFI connection isn’t
available. Many apps also consume cellular data when
they’re running in the background. For example, Gmail,
the calendar, and contacts are synced in background
and need “background data” = on, weather apps need
background data to update the forecast, etc.
pg.5
The Current Limitations of Mobile
Costly Development
Development and maintenance of a native app can be costly,
especially if compatibility across multiple platforms and mobile
device types is required. For a smaller start-up the cost is
estimated at $50-100k and rise upwards of $500k+ for
larger enterprises.

No Guarantee of Acceptance
Getting listed in an app store can be a long process with no
assurance your app will be accepted for listing. Even if your
app does clear the rigorous review process, there’s no
guarantee it will catch on with users or drive traffic
to your brand.

Despite improving the consumer mobile experience, Forrester

Consulting revealed only 4% of mobile commerce transactions
in 2018 came from mobile apps.

Comscore also reports 49% of US smartphone users

download zero apps per month, while Quettra reveals 90
days after apps are downloaded they’re almost never used.

Scott Wilson, VP of eCommerce merchandising at United

summarizes the native app experience best by saying “Apps
are a temporary necessity in the development of better
mobile experiences.”

pg.6
Progressive Web
Apps Enable Must
Haves of Mobile
Experience
Consumers are turning to mobile in undeniable
numbers, but conversions and revenue are lagging.
Mobile web – which accounts for 49% of online
traffic – is converting poorly at just 1.7%.

While native apps are expensive to develop

and make up for just 5% of online traffic, they’re
converting at 2.8%, debunking the theory that screen
size is the reason consumers will never transact as
much on mobile.

The public is hungry for an app-like experience

transcending the limitations of native apps but
when will a solution present itself? The good news
is a fresh alternative has been quietly making its
way into the mainstream the last few years.
PWAs Enable Must Haves of Mobile Experience
PWAs are the Future of Mobile Commerce
PWAs pair the best of website and mobile app
functionality, resolving the major pain points which
have harried mobile commerce for so long.
PWAs provide a reliable, fast, and engaging experience
proven to boost user engagement, increases
conversion rates, and electrify revenue growth.
Experience Enhancing Power
Combining the fluid experience of RWD with an app-like interface,
Progressive Web Apps are here to revolutionize mobile commerce:
Inviting Interface
PWA’s deliver only the most essential content to the
user, supplemented by smooth animations, fluid
scrolling, and intuitive navigation experiences. This
“mobile first” visual environment encourages active
user engagement and expansive site exploration.
Fast, Responsive Browsing
If your mobile pages are taking longer than two seconds to
load, shoppers are likely taking their business elsewhere.
PWAs are engineered so pages load quickly with fast
transitions with no funky rendering or page reflows.
The Magic of Service Workers
PWA’s are enabled by Service Workers, a script your browser
runs in the background to intercept and handle network
requests and store data locally. This allows secure, offline
browsing during momentary lapses in network connectivity,
lowering dependence on consistent internet connections.
Respectful to Emerging Markets
PWAs are beneficial to individuals living in emerging mobile
markets where data is often at a premium. PWAs respect
low bandwidth and limited data plans, they avoid heavy
upfront data usage associated with an app download, and
their functionality is resilient on unreliable networks.
Low Data Commitment
PWA’s use a fraction of mobile data compared to native
apps, benefitting individuals with limited data plans. PWA’s
also have minimal storage requirements, ensuring you won’t
undercut performance on your customers mobile devices.
Ditch the Download
PWAs are right at the user’s fingertips via any web browser
without the need to download or install a separate
app before use. Web install banners allow users to
seamlessly add your web app to their home screen.
pg.8
PWAs Enable Must Haves of Mobile Experience
No Updates, No Problem
PWAs actively update themselves in real time
like a website, eliminating the need for periodic
updates from an application store.
PWAs Welcome Here
Nearly all modern web browsers for iOS and Android
support PWAs including Firefox, Chrome, and Safari.
Benefits to Merchants
From boosted customer engagement and higher conversions
to lowered development costs, early adopting merchants are
enjoying the contributions PWAs are making to their bottom line.
Enhanced Customer Experience
The app-like layout of PWAs minimizes required
touch points, allowing faster browsing and checkout.
By streamlining the purchasing process in this way,
PWAs can boost shopper engagement, leading
to higher conversions and revenue growth.
Increase Average Order Value
PWA layouts and navigation encourage increases in
average order value since shoppers can quickly browse
products and related merchandise categories. Merchants
can thus provide more opportunities for shoppers to
add additional items to their cart prior to checkout.
Single Web Codebase for Mobile and Desktop
With PWAs a separate desktop solution isn’t required
while eliminating the substantial investments of time and
resources associated with native app development. This
lowers the total cost of ownership and a shorter time to
market once development standards are established.
Ability to Attract Top Front-end Talent
PWAs are a new frontier in technological innovation which
is attracting the talents of qualified developers. UX and
front-end developers want to work at the forefront of
emerging web technologies and PWAs offer an exciting new
avenue for skills acquisition and career development.
Freedom to Deploy
PWAs enjoy unrestricted, flexible distribution since
they don’t need to be listed in an app store. This
means freedom from the terms of service and revenue
share agreements imposed by these entities.
pg.9
 The biggest names in technology are implementing initiatives to
transition PWAs into a new mainstream standard for mobile:

• The Microsoft Store is making a growing number of PWA apps available

and has defined a set of submission guidelines for developers.
• As of July 2018, Google is now prioritizing page speed
as a ranking factor in its mobile searches. With their fast
performance, PWA-driven sites obviously stand to benefit.
• With their release of iOS 11.3, Apple has quietly included support
for PWA, expanding opportunities for merchants looking to tap
engagement and revenue opportunities with the iOS crowd.

Industry is Across the board, globally recognized brands are updating

their mobile experiences to meet modern expectations for

Embracing
engagement and performance. The list of mobile commerce
innovators is a who’s-who of multinational enterprises, all of whom
either have PWAs deployed or currently in development:

the Mobile
Moment

pg.10
 The Magento PWA studio is a dynamic, developer-centric platform
allowing Magento Commerce solution partners and UX developers
to deliver fast and fluid front-end experiences on mobile devices.

The core features of Magento’s PWA Studio include:

• Tools to personalize content and add local preferences.
• Build and manage all channels and experiences via

Magento one code base, one deployment and app.

• Intuitive user experience with innovative commerce and CMS theming.
• Purpose-built developer tools for fast prototyping, helpful

PWA Studio debugging, rich feedback, and increased productivity.

The Magento approach with PWA Studio through open source on Github
will allow development teams to familiarize themselves with additional
resources and technology required. Frontend development –
often 25% of effort – will be easier with the introduction of real-time
updates and guided development from Webpack in PWA Studio.

“PWA Studio will provide developers and merchants with the

tools they need to compete and deliver the convenience and
utility of a mobile app combined with the searchability and
buying experiences they get from their desktop experiences.”
Jason Woosley, SVP of Product & Technology at Magento, an Adobe company

pg.11
Mobile Sites Reimagined
In their July 2017 report “Our Favorite Websites,
And How They Did It”, Forrester Consulting profiled
several business organizations who reinvented their
mobile sites to deliver a more app-like experience.

In each instance, these businesses saw

significant gains in user engagement and revenue:

The Financial Times Invests in Mobile-First

With slow page loads and a visually impaired site layout
affecting readership, the Financial Times needed to rework
their mobile platform to keep pace with surging
web traffic.

The Results: A cleaner site interface reworked into an app-

like layout lets users locate their preferred news items
faster, with articles now much easier to read. Coupled with
faster page load times, user engagement has risen sharply,
dramatically boosting ad revenue in the process.

“One of our key metrics was speed. We determined if

we made the site just one second faster, it increases
engagement by 5%, and would ultimately add millions
of dollars to our bottom line due to increased ad views.”
Cait O’ Riordan, Chief Product and Information Officer

pg.12
Mobile Sites Reimagined

Sephora’s Mobile Makeover

As the latest Sephora beauty products debut on social
media, each release triggers significant spikes in web traffic,
straining the capabilities of the beauty chains mobile site.

The Results: Sephora’s mobile experience has transformed

into a clean client entry point configured to accommodate
unpredictable web traffic. With a focus on product-specific
presentation, the app-like interface encourages discovery of
new products and enhanced exploration of in-store services.

“The benefit to customers is having better discovery

through lightweight engagement.”
Lisa Kueffel, VP of Client Experiences

pg.13
Mobile Sites Reimagined

Wyndham Hotels Checks In

With a mobile site defined by a crowded layout and
poor navigation, Wyndham hotels initiated a usability
overhaul so travelers can quickly and conveniently
find accommodations from their mobile devices.

The Results: By reducing site clutter and nonessential

elements, travelers can now quickly conduct location-
based searches to book hotel accommodations. The
introduction of enhanced design elements ensures the
mobile experience remains responsive and consistent
for users across desktop, mobile, and tablet formats.

“Our mobile website visits have gone from 37%

to 58% of all web traffic in the past few years, and
it’s 70% on weekends. We’ve done all this work just
to get to a level playing field. Now we can start to
have some fun with it.”
– Barry Goldstein, Executive VP and Chief Marketing Officer

pg.14
Consideration for Early Adopters of PWAs
The benefits of PWAS will see early adopters
outpacing their competitors as this technology
continues its march into the mainstream.
If you’re considering deploying your own PWA, it’s
important to assess your business needs and how
reinventing your mobile experience with satisfy them.
Is Your Site Due for a Refresh?
Walk through your site to see whether it’s ready for a
front-end refresh. Does your site readily communicate its
purpose? How does the site view across various platforms
and browsers? Is your site easy to navigate? Is content
presented in a clean, straightforward manner?
Is Traffic Dictating Demand?
Your mobile sales and traffic numbers are a key
barometer for gauging whether or not to push towards
a mobile makeover. If >50% of your web traffic is from
mobile or >25% of your online orders already from
mobile, you might be ready to graduate to PWA.
Is PWA Development in Your Budget?
Does your budget make allowances for you to move forward
with development? Overall cost for a PWA with Magento will
vary based on time and complexity of your current commerce
platform. Over time as more Magento storefronts are created
using PWA including Marketplace-ready extensions, the
overall cost of development will be significantly reduced.
Can I divert app development budget
and/or resources to PWA?
If initiating PWA development is a stretch for your budget, take
a look at what you’ve got cooking on the stove. If you have
a native app currently in development, consider offsetting a
portion of its budget and resources towards your PWA instead.
pg.15
 About Magento Commerce
Magento, an Adobe company, is a leading provider of cloud commerce innovation
to merchants and brands across B2C and B2B industries and was recently named
a leader in the 2018 Gartner Magic Quadrant for Digital Commerce. In addition
to its flagship digital commerce platform, Magento boasts a strong portfolio of
cloud-based omnichannel solutions that empower merchants to successfully
integrate digital and physical shopping experiences. Magento is the #1 provider
to the Internet Retailer Top 1000, the B2B 300 and the Top 500 Guides for Europe
and Latin America. Magento is supported by a vast global network of solution and
technology partners, a highly active global developer community and the largest
eCommerce marketplace for extensions available for download on the Magento
Marketplace. More information can be found at www.magento.com.