Complete Guide To
PWA: Definition, Technology, Examples

ilustration

What Is PWA?

Why Should You Even Care?

Like most things in life, the web industry is subject to constant change, in a state of permanent search for better solutions. Today mobile device usage has experienced a tremendous increase, and the trend is only about to continue into the future.

Businesses are pushed to adapt to the highly competitive environment and rapidly growing expectations from tech-savvy users. Companies respond with a constant chase of innovation, spending fortunes on improving users’ web experience and maintaining different platforms, often facing fierce limitations.

And just as we thought the industry was already pushed to the limit, Progressive Web Apps (PWA), a new and incredibly promising technology, emerged to irreversibly change the way people interact with websites.​ Even though the technology has been around for a while now, we see that the popularity of PWAs has skyrocketed in the past couple years.

PWAs combine the best of the website with the best of what native apps have to offer, creating a phenomenal mobile user experience. They are special web applications that are accessed like normal websites but offer benefits like offline usability, push notifications, and access to device hardware – things that were previously only available to native apps.​​​

Now, as PWA is the hottest topic at tech conferences, it is crucial that every business understands the technology. It is your chance to win over mobile users by distinguishing yourself from the competition and offering a superior digital journey that translates into higher engagement, customer satisfaction, and conversion rates.

Below you will find a detailed overview of Progressive Web Apps, explaining the technology, its features, business benefits, as well as providing best practices and useful advice to help you get up to speed. Find answers to your questions, and learn why Progressive Web Apps are a truly revolutionary solution with such deep impact on today’s mobile web experiences.​​

So, what exactly is a PWA?

Simply put, a PWA is a website with all the benefits of an app. PWAs give you a faster, more reliable, and more engaging version of your website or eCommerce store.

PWAs can do most things that native apps can do, like having an offline mode, accessing your camera and microphone if necessary, GPS, and more.

Imagine a user browsing your online store with instant page loading speeds whilst flying at 35,000ft or using the subway—​and knowing once they get back online their order will be processed automatically!

What can PWA do for you?

​​ PWA technology packs an array of new powerful features, allowing for significant web experience improvements. Take a look at a few examples of what PWA can do for you, both as a store owner, as well as a user:

As a website or eCommerce store owner: ​​

  • Increase your conversion rate
  • Increase user time on your site
  • Provide better user experience
  • Increase your organic search traffic
  • PWAs are usually more affordable to create and maintain than native apps
  • Your most loyal customers can save your app on their home screen
  • All of the above means you will improve your profits

As a user:

  • PWAs are faster, loading in an instant
  • You can browse the website while being offline
  • Better, smoother experience
  • PWAs use less data
  • One-click access (save as an icon on your phone home screen)
​​

All in all, PWA are a fresh, future-proof technology, favored and promoted by Google, and proven to show break-through results by some of the biggest names in the industry: ​​

example

Features and Benefits

The rise of PWA has marked a paradigm shift in the way we interact with the web, bringing along a collection of features ranging from subtle to radical – each contributing to the improved overall experience.

A full list of features is far too long, so here are the ones we at Scandiweb are most excited about:

example

INSTANT LOADING TIME

If your website takes more than 3 seconds to load, 53% of visitors will bounce. Furthermore, a local App serves to remove any clunkiness and lag while browsing, which is an important customer satisfaction factor.

PWAs use an alternative method called Client-Side Rendering or CSR. With this approach, content is rendered in the client’s browser, using JavaScript.

Instead of sending an entire HTML document from the server every time, the user is only receiving a tiny string of data with JavaScript file that will request and render the necessary parts of the page in client’s browser, resulting in a significant website page load speed increase. Just check how fast is this PWA demo store.

OFFLINE BROWSING

“Offline mode” is not a fully native offline experience. Standard browser caching management can be overridden with custom rules, and cache storage is independent of the remote server.

If connection drops, browsing still remains possible: imagine browsing your favorite store while commuting on the London Underground or a rural area with spotty coverage.

When you hit the Back button, rather than seeing a 404 error, a cached page with the previously retrieved data is delivered and displayed.

It’s even possible to check out offline. However, the order would be processed after connection is reestablished.

example
example

OFFLINE BROWSING

“Offline mode” is not a fully native offline experience. Standard browser caching management can be overridden with custom rules, and cache storage is independent of the remote server.

If connection drops, browsing still remains possible: imagine browsing your favorite store while commuting on the London Underground or a rural area with spotty coverage.

When you hit the Back button, rather than seeing a 404 error, a cached page with the previously retrieved data is delivered and displayed.

It’s even possible to check out offline. However, the order would be processed after connection is reestablished.

example

PUSH NOTIFICATIONS

To keep the current users engaged and re-engage the ones that have visited the store, but abandoned their cart half checked-out, PWAs offer support for push notifications.

If done well, this feature will give the customers additional motivation to open the app and use it, ensuring even double the time spent on it and increasing your conversions up to 4 times.

Beyond the Rack achieved a 26% average increase in spend and 72% more time spent on their PWA from users visiting via push notifications.

Launching marketing campaigns, informing about order progress, news—it’s a unique communication channel to help your brand become a part of your user’s every day.

READY FOR APP & PLAY STORES

Having your app listed in app stores is valuable. It’s one reason why many businesses invest in (expensive) native app development for iOS and Android. PWAs can circumvent that need.

Thanks to technologies like Trusted Web Activity​, which wraps a web tab into an application, you can convert any Progressive Web App into a native app within a few hours. (There’s still a single codebase—the native app is partially a web view.)

It’s then possible to deploy it to both the Apple App Store and Google Play Store without the need to develop a native app from scratch.

example

READY FOR APP & PLAY STORES

Having your app listed in app stores is valuable. It’s one reason why many businesses invest in (expensive) native app development for iOS and Android. PWAs can circumvent that need.

Thanks to technologies like Trusted Web Activity​, which wraps a web tab into an application, you can convert any Progressive Web App into a native app within a few hours. (There’s still a single codebase—the native app is partially a web view.)

It’s then possible to deploy it to both the Apple App Store and Google Play Store without the need to develop a native app from scratch.

example
example

LIGHTWEIGHT

Progressive Web Apps are designed to provide the best possible user experience that is especially powerful for mobile device users.

Despite the numerous amazing features, Progressive Web Apps are extremely lightweight and can operate seamlessly even on low-bandwidth networks.

Just compare Tinder & Pinterest PWAs with their Android and iOS apps. Amazingly lightweight, isn’t it?​

example

HOME-SCREEN SAVE

Presence on the user’s home screen, which is essentially the most valuable digital real estate, puts your logo front-and-center and your site one click away.

Progressive Web Apps have a major advantage over both apps or websites —​ enabling potential customers to add your PWA to their Home screen directly from the browser. This makes them a lot quicker to deploy.

PWA allows to skip both bookmarking your webpage, and roaming around Play & App Stores to find and download your application.

This also means creating a full native-app experience without the hassle of coding and review process like it would be for a regular app.

Since the PWAs are native-app like, your shoppers won’t even need a browser once the web app is added and displayed on their Home screen. Once launched, it’ll open fullscreen and work independently.

example
example

HOME-SCREEN SAVE

Presence on the user’s home screen, which is essentially the most valuable digital real estate, puts your logo front-and-center and your site one click away.

Progressive Web Apps have a major advantage over both apps or websites —​ enabling potential customers to add your PWA to their Home screen directly from the browser. This makes them a lot quicker to deploy.

PWA allows to skip both bookmarking your webpage, and roaming around Play & App Stores to find and download your application.

This also means creating a full native-app experience without the hassle of coding and review process like it would be for a regular app.

Since the PWAs are native-app like, your shoppers won’t even need a browser once the web app is added and displayed on their Home screen. Once launched, it’ll open fullscreen and work independently.

example

PLATFORM AGNOSTICISM

Every platform has benefits and downsides, leaving you the unenviable task of overcoming platform-specific limitations.

Platform-agnostic apps are an efficient alternative to building and maintaining separate native apps for the web, iOS, and Android.

With PWA you can provide the same user experience to everyone., regardless of the platform they are using.

NO UPDATES REQUIRED

Updates are a chore for users and a liability for all involved. PWAs don’t require them, actively updating themselves in real-time, just like a website!​

example
example

NO UPDATES REQUIRED

Updates are a chore for users and a liability for all involved. PWAs don’t require them, actively updating themselves in real-time, just like a website!​

example

LINKABILITY & INDEXING

Same as any other website, Progressive Web Apps have URLs and can be crawled and indexed by search engines. Unlike native apps, users can find PWA pages directly in SERPs.

Faster load times keep both search engines and users happy!

The impact of PWA

Now that we have a solid understanding of the main features that can be uncovered with PWA, let us take a step back and explore the impact the technology is aiming to make on the web industry.

ON PERFORMANCE

First impressions matter! And the first experience your visitors get with your site is neither design nor content. It’s the page-load time.

The most polished user journey means nothing if you can’t get your visitors to the starting line. On mobile, around 53% of visitors abandon a page​that takes longer than 3 seconds to load.

​ PWAs scale down the volume of data requests to a fraction of its current level. PWA adopters commonly cite up to a 300% performance improvement. For sites that are already optimized for speed, this can lead to ​near-instant loading speeds, akin to those of native apps.

​ Even without integrating Accelerated Mobile Pages, PWAs help with first-page load by prioritizing the first meaningful paint and serving a light shell document with inlined resources.​

ON ACCESSIBILITY

PWA’s fast load times support accessibility for companies that operate in emerging markets or need to provide users consistent site access at all times.

For instance, Uber’s rapid expansion into new markets demanded a fast, device-agnostic ride-hailing application that worked well regardless of location. Hence, they opted for a PWA.

Requests came in at only 50kb, allowing the PWA to load in under 3 seconds on 2G networks!

ON USER EXPERIENCE

Historically, native apps have outperformed mobile websites in terms of user engagement. Progressive Web Apps can close that gap with features previously reserved for native apps, like no reload when switching between pages.

PWAs even beat native apps ​in a few instances – examples include elimination of app-install friction and decreasing web-to-app installs drop-offs.

And while we’re on the topic of UX, here is a study that looks into the way PWA can accommodate instant and smooth video handling.

HOW DO PWAs WORK? EXPLAINING THE TECH

We have mentioned that PWAs operate differently from both websites and native apps. Now is a good time to take a closer look at some of the underlying tech to help us gain a better understanding of the scope and true potential of PWA as a whole.

SINGLE-PAGE WEBSITE

A Single Page Application (SPA) interacts with the user by dynamically rewriting the page rather than loading an entire new page from the server. In other words, the browser is not sending a request to load the page fully when the user clicks a link. Instead, SPAs use JavaScript to manipulate the current page and make it look like the user has actually switched the page.

This feature is essential for Progressive Web Apps, as most are SPAs, because it ensures an instant content load and brings the “app-like” feeling.

example

WEB APP MANIFEST

The web app manifest​is a JSON file that tells the browser how your web app should behave when it is installed on a user’s mobile device.

Although the file only contains the general info about your app, it performs an important role in making your web app look and feel like a native app.

A typical manifest file includes information about the app name, icons it should use, the start_url it should start at when the app is launched, and more. Once certain criteria are met, the majority of browsers will automatically suggest your visitors to install your app.

Having a manifest is required by Chrome to show the Add to Home Screen prompt.

SERVICE-WORKERS

Instant page load, app-like experience, mobile conversions increase, offline browsing, and push notifications are just a few examples of PWA power.

But how exactly PWAs are able to provide such experience? A huge part of the credit should go to Service Workers. Although Service Workers are an integral part of Progressive Web Apps, there is often a lot of confusion surrounding it.

example

We all know how a website works—the codebase is stored on a server, and any person can access it via their browser by typing in the domain name or direct IP address.

When it comes to PWAs, there’s an additional element: the service worker. In essence, a service worker is a client-side JavaScript file that is added to your codebase. It resides between the server and browser, padding a new layer of background functionality to mimic app-like features (e.g., push notifications for food-delivery status from a restaurant website).

COMPATIBILITY WITH BROWSERS

Modern browser support of features like push notifications and home-screen save is integral to PWA. PWAs also require browsers to support service-workers, which almost all ​the modern browsers do. (Safari, frequently lagging behind, is often referred to as “the Internet Explorer of PWAs.”) ​

​ The lack of support for specific features doesn’t impede PWA use. Since PWAs are websites, they’ll still work in all browsers (although, sometimes – without the full set of features).

Some browsers, such as Chrome, are actually praising Progressive Web Apps! If your website meets the Progressive Web App installability criteria, Chrome will show an install button in the omnibox indicating that your Progressive Web App can be installed. If the user clicks the button, an install dialog box will appear, making it super easy for the user to install your PWA.

example

PWA AND SEO: the Controversy

Search Engine Optimization has always been a widely misinterpreted topic. The trend gains additional momentum when it comes to Progressive Web Apps. PWAs are different from “traditional” HTML-based websites, and it has caused a lot of myths and misconceptions over time.

The most popular myth states that “Google prioritizes PWA pages in their search results.”

Unfortunately, this is false.
Google doesn’t rank your page higher simply because you have a PWA, but Google does care about the enhanced user experience brought by PWA. The bottom line is, simply having a PWA won‘t help your SEO, but having a well executed PWA most likely will.

Another myth states that PWAs can’t be indexed by the search engines at all.

This is not true, obviously.
Progressive Web Apps can be indexed just like any other web page, although the techniques used to ensure that the search engines see and understand your website’s content will be different.

SO, WHY EXACTLY IS SEO A CHALLENGE?

​ PWAs are JavaScript-based sites, and their rendering mechanics differ from those of standard HTML-based websites. To understand the difference between the two approaches, you need to understand server-side and client-side rendering:

​ Traditionally, the majority of websites use Server-Side Rendering or SSR to “pre-boot” everything on the server-side. The way it works is pretty straight-forward: a user requests a page, then a rendered version is sent from server to their browser. Easy!

​ This, however, has some drawbacks. Even though the first meaningful paint loads very fast, this approach will require you to load the entire HTML every time a user switches pages. This can be a pain, especially when operating on a poor internet connection.

​ Progressive Web Apps and other Javascript-based pages use an alternative ​method called Client-Side Rendering or CSR. With this approach, content is rendered in the client’s browser, using JavaScript.​

​ Instead of sending an entire HTML document every time a user wants to go to a new page, only a tiny string of data is passed, containing JavaScript that requests and renders the necessary parts of the page in client’s browser, resulting in a significant page load speed increase.

​ Seems like a good idea, right? Still, many site owners are cautious about switching to CSR, trying to make sure that their content is properly exposed to Googlebot and search engine crawlers.

​ Comparing a “traditional” website against a JavaScript-based PWA, we see that, while the former clearly renders all the website’s content, the latter must rely on search engine’s ability to process JavaScript and get all the data you want search engines to index.
This has caused a lot of confusion, making people think that PWAs cannot be indexed at all.

​ The reality, however, is that CSR apps can be – and are – crawled and indexed by search engines, and Googlebot is currently the best among them at processing a Client-Side rendered JavaScript.

Is there a solid working solution?

​ The short answer is Yes. In fact, several of them.

​ An approach we’d like to discuss hereby is called DYNAMIC RENDERING. In a nutshell, it requires your webserver to understand the source of a request – whether it is a visitor, or a search engine crawler and serve different versions of content to different sources.

​ This allows you to provide a Client-Side Rendered version for your real visitors, and conditionally serve the server-side rendered version to search engine crawlers.

​ Dynamic rendering is a technique approved by GOOGLE, and should not be confused with s.c. “cloaking”, a common black-hat SEO technique to serve different content to search engines vs. users.

example

PRIORITIZE YOUR CONTENT & COMBINE SSR WITH CSR

​ Another neat way to solve this is to prioritize content by identifying the most important elements of your page that you definitely want to pass to search engines as soon as possible, and serve this content using Server-Side Rendering.

​ By doing this you can be confident that search engines will pick up the crucial information (like canonicals, titles, etc.) immediately after discovering your page, and the rest of the information will be processed via Client-Side Rendering during the second wave and eventually added to the index.

TIP: SEO BEST PRACTICES REMAIN UNCHANGED

​ Since PWA isn’t a ranking factor, all technical, on-site, and off-site SEO best practices apply to PWAs as well. Here are some of the usual SEO aspects you need to take into account if you’re migrating your site to a PWA:

  1. Implement self-referring canonicals for unique pages and canonicalize duplicates or set meta robots to “noindex, nofollow.” (This is especially important if you’re combining PWA and AMP.)
  2. Each page should have a unique URL.
  3. Make sure crawlers can access valuable content hidden in tabs, infinite scroll, etc. If you want crawlers to explore content behind buttons, images, etc., use an HTML link.
  4. Use Schema.org markup to help crawlers understand the content of the page and Open Graph markup so that URLs share nicely over social media.
  5. Don’t show different content to users than you show to Google (save for the caveat above).
  6. Make sure your page passes the Google Mobile-Friendly Test.
  7. Audit pages for speed on Google PageSpeed Insights.

When is the best time to implement PWA? NOW!

The biggest and the best are using PWAs already

You may have heard that Amazon is using a PWA. And Alibaba. And Uber. However, what was once a technology leveraged mostly by digital giants, due to high costs of development and inescapability of custom solutions, is becoming increasingly democratized and accessible. Thanks to emerging ready-to-use PWA solutions and the widespread appreciation for PWA, the technology is now available to everyone.

PWA has already proved to be a game-changer, with businesses around the globe flocking to adopt it and reap the benefits it offers. In this light, it is important to understand what this new technology can bring for you.​

MOBILE-FIRST ERA IS HERE

The amount of traffic from mobile devices has been increasing year-by-year. It is safe to say that we got past the tipping point already a couple years ago with 2018 desktop-mobile traffic distribution showing that 52% of overall web traffic came from mobile devices during that period.

The trend continues to demonstrate steady growth in both usage volume, as well as rate of technological progress, changing the way people interact with the web. Among the best examples is mobile eCommerce, which has been booming over the past few years.

GOOGLE ANNOUNCES MOBILE-FIRST INDEXING AS DEFAULT

At the end of 2018, Google announced that it was already using mobile-first indexing for over half of the pages globally. Eventually, Google announced that mobile-first indexing will now be the default option for all new web domains as of July 1, 2019.

Google has made it clear that there is only one index for serving all search results, as opposed to separate “main” and “mobile-first” search indices. This means that you need to make sure your website is performing great, primarily, on mobile devices.

Even if you have a fully optimized website from the content and technical SEO perspective, this might not be enough to outperform your competition in 2020. By rolling out mobile-first indexing as a default method, Google made it clear that the company will continue to emphasize the importance of providing the best possible experience for mobile device users.

So, if you are looking at how to improve the user experience, especially for mobile device users, this is the right time to consider Progressive Web Apps.

MIGRATION TO MAGENTO 2

The average PWA project duration could take several months, however, the biggest eCommerce platforms like Magento offer going with ready-to-use applications, like the e-point PWA Commerce Accelerator. With these, the time spent on the project will drop even up to 1-2 months.

We can’t ignore the fact that as of June 2020, Magento, one of the most popular eCommerce platforms, will no longer support the Magento 1 version. If you want to continue receiving all the latest updates and consider Progressive Web Apps for your business, now is the right time to significantly save on development resources and migrate to Magento 2 while implementing the PWA technology.

The most cost-efficient way to do so is by leveraging ready-to-use PWA solution for Magento, that can be installed on top of Magento 2 store within just several dev hours.

Fighting Misconception

With all things said, understandable if you’re left with some uncertainty, wondering whether or not you have warmed up to the idea of implementing PWA yet. The multiple benefits offered by the technology present it in a very lucrative light, promising traffic and profit boost, increased levels of engagement and user satisfaction, competitive advantage with a future-proof platform.

“But what about the downsides?” you might be asking yourself, “Am I ready to put up with the logistics of implementation to get to the desired results?”

Let us try and clear these doubts by answering some of the most popular questions asked by people first coming to contact with PWAs.

Despite the countless benefits PWA offers it’s just SUCH a hassle, right? Wrong.

With ScandiPWA, convenience is principal and unlike other solutions on the market, ScandiPWA is a theme that is installable on top of any M2.3 project. No infrastructure changes, no middleware, no problems. Getting started is hassle-free.

Ok, but I’m short on manpower, how big should the dev team be? A team of 1 is enough.

A single developer in a couple of hours can have a functional PWA store up and running and ready for customization. ScandiPWA is installable via composer and doesn’t require any manual installation work with cloning. Thanks to composer, even the updates are automatic, meaning you always have the latest stable version.

Still… it will take a while for that dev to get familiar with ScandiPWA. Less than you think!

ScandiPWA is a Magento-first solution, so the countless benefits come on top of all Magento out-of-the-box features. Following Magento’s example in crucial aspects, e.g. doing rewrites, means your devs will feel right in their element.

Interesting, but can I trust ScandiPWA?

Results and feedback speak for themselves.
It’s open source, it’s celebrated for the technology, it’s spoken very highly of in the Magento community. The core team is constantly updating the theme, with weekly releases. What’s more there are several eCommerce projects in development, all contributing to the main theme.

I want one! What should my next steps be?

BE SURE TO PICK THE RIGHT PWA SOLUTION

Today PWA is more affordable than ever before, and is available to any business willing to adopt the technology. The fastest and most cost-efficient way to implement it is by leveraging a ready-to-use PWA solution.

Let’s take a look at some of the most popular ones offered on the market today.

PWA STUDIO

In January 2019, Magento announced the release of the PWA studio​. An anticipated announcement, welcomed with great enthusiasm by the community, although it doesn’t strictly offer a ready-to-use solution. Rather, it is a set of tools for building PWA stores.

A few proof-of-concept demo stores have been released to display its functionality, notably, by Magento themselves and another one by Inchoo. These demos made it clear that, while PWA Studio boasts some impressive features, it is also fairly complex in terms of integration and setting up in production, suggesting that additional infrastructure adjustments are required.

SCANDIPWA

ScandiPWA​ is the first open-source PWA theme for Magento. Unlike other solutions on the market, ScandiPWA is not a storefront, but a theme that is installable on top of any M2.3 project without changes to infrastructure. It doesn’t have any middleware that can slow down or cause bugs and it is easy to upgrade and maintain.​

As an open-source solution with detailed documentation available and consistent architectural solutions, it can be used to deliver a fully functional PWA store with the help from only one developer, in a matter of a few hours. Moreover, maintaining a website built on ScandiPWA is convenient, as it updates to the latest stable version via composer update and doesn’t require manual updates and checking for the latest stable version.

A Magento-first solution, ScandiPWA allows the use of all Magento out-of-the-box features, already familiar to developers, and adds the multiple crucial benefits provided by PWA technology.

Magento feature support, integration of admin interface, data caching, community support, the simplicity of installation: ScandiPWA is actively developed, with new features being added and improved on a regular basis.

VUE STOREFRONT

A platform-agnostic storefront PWA solution created by Divante was one of the first PWA solutions available on the market.

Vue Storefront offers an open-source storefront solution under the MIT license. At the core of its value proposition is the ability to connect various eCommerce CMS or third party software to the storefront via API.

While such an approach provides a one-size-fits-all solution, mind that an additional middle layer will require extra maintenance resources.

OTHER SOLUTIONS

Apart from the above mentioned, there are several other PWA solutions worth mentioning, such as DEITY Falcon, Front Commerce, Spartacus, Angular Storefront.

While every PWA provider has its own value proposition, different PWA solutions use different architectures, which may be crucial when choosing a solution for your business: we recommend to book a free consultation​ and learn which solution works best for you.​

PWA EXAMPLES FOR INSPIRATION​

Since digital titans like Twitter, Forbes, Uber, AliExpress​ switched to PWA, we see a constantly growing collection of case studies​ that show the positive effect of Progressive Web Apps on all major KPIs​: conversions, revenue, time spent, engagement, re-engagement, leads, etc.​ We have compiled these PWA case studies for your inspiration:

FORBES

  • Scroll depth increase by 3x
  • Sessions per user increase by 43%
  • 6x increase in readers completing articles
  • 2x increase in engagement rate​
For Forbes, a global media company, focusing on business, technology, entrepreneurship, leadership, and lifestyle, customer engagement is vital.​

With the increasing amount of mobile users, Forbes saw a huge potential when launching their own PWA in 2017. With ultra-fast page load times, push-notifications, instant transitions, and light design, Forbes managed to increase user engagement and increased conversions:

example

FORBES

  • Scroll depth increase by 3x
  • Sessions per user increase by 43%
  • 6x increase in readers completing articles
  • 2x increase in engagement rate​
For Forbes, a global media company, focusing on business, technology, entrepreneurship, leadership, and lifestyle, customer engagement is vital.​

With the increasing amount of mobile users, Forbes saw a huge potential when launching their own PWA in 2017. With ultra-fast page load times, push-notifications, instant transitions, and light design, Forbes managed to increase user engagement and increased conversions:

example
example

ALIBABA

  • 76% higher conversions across browsers
  • 14% more monthly active users on iOS; 30% on Android
  • 4X higher interaction rate from Add to Home Screen
Alibaba.com, the world’s largest online business-to-business (B2B) trading platform, serving more than 200 countries and regions, found it difficult to build an engaging experience for the mobile web. As the mobile web is their primary platform for discovery on mobile, Alibaba.com looked at the mobile web as a platform to shift non-app users to the app, but many preferred to stay within a browser.

They recognized that to build an effective mobile presence, they needed to understand how two different user segments—native app users and mobile web users—interacted with their business. They wanted to deliver a great user experience for both first-time visitors (in the hopes of re-engaging them) and repeat visitors (who are more loyal to the site). As a result, Alibaba.com built a PWA that led to a fast, effective, and reliable mobile web experience.

​After upgrading their site to a Progressive Web App (PWA), they saw a 76 percent increase in total conversions across browsers.​

LANCÔME

  • 17% increase in conversions
  • 53% increase in mobile sessions on iOS
  • 8% increase in conversion rates on recovered carts via Push Notifications​
A French luxury perfume, and cosmetics brand saw mobile traffic eclipse desktop traffic for the first time in 2016. Despite a growing number of mobile site visitors, mobile conversion rates didn’t match those for desktop. While 38% of shopping carts led to orders on desktop, the mobile web conversion rate was only 15%.

This conversion rate disparity revealed that consumers were experiencing significant obstacles when trying to purchase on mobile. As the mobile web became a core focus area, Lancôme struggled to build a fast and engaging experience for their mobile web shoppers.

At first, they understood how shoppers on Lancôme’s mobile site behave, and that they wouldn’t return to an eCommerce app weekly, let alone daily. The company needed a fast-loading, compelling mobile experience, similar to what they could achieve with a native app—but one that was also discoverable and accessible to everyone via the mobile web.

Instead of minimally updating their underlying site, Lancôme looked to PWA technologies to provide an immersive, app-like experience.

example

LANCÔME

  • 17% increase in conversions
  • 53% increase in mobile sessions on iOS
  • 8% increase in conversion rates on recovered carts via Push Notifications​
A French luxury perfume, and cosmetics brand saw mobile traffic eclipse desktop traffic for the first time in 2016. Despite a growing number of mobile site visitors, mobile conversion rates didn’t match those for desktop. While 38% of shopping carts led to orders on desktop, the mobile web conversion rate was only 15%.

This conversion rate disparity revealed that consumers were experiencing significant obstacles when trying to purchase on mobile. As the mobile web became a core focus area, Lancôme struggled to build a fast and engaging experience for their mobile web shoppers.

At first, they understood how shoppers on Lancôme’s mobile site behave, and that they wouldn’t return to an eCommerce app weekly, let alone daily. The company needed a fast-loading, compelling mobile experience, similar to what they could achieve with a native app—but one that was also discoverable and accessible to everyone via the mobile web.

Instead of minimally updating their underlying site, Lancôme looked to PWA technologies to provide an immersive, app-like experience.

example
example

DEBENHAMS

  • 40% increase in mobile revenue
  • 20% increase in conversions
  • Above-market online growth
Debenhams is a British fashion, beauty and home retailer founded in the 18th century as a single store in London and now operating over 240 stores across 27 countries. The company chose to go the PWA way to Improve mobile customer experience and accelerate shoppers’ path to purchase.

With mobile representing 57% of all traffic to Debenhams​, investing in customers’ mobile experience was vital for the company. The strategy they developed was to concentrate on speed and building a fast path to purchase for shoppers.

Since the mobile web was attracting more customers than the Debenhams app, the team made a strategic decision to build a Progressive Web App​ experience for users rather than maintaining the app.

They monitored conversions, revenue, funnel performance, speed and bounce rates – all of which improved since the PWA’s launch. The team measured the user journey time from browsing to purchase and found it was 2 to 4 times faster. During the peak trading period, Debenhams’ mobile revenue overtook desktop revenue. Overall, the PWA helped to deliver a 40% increase in mobile revenue and a 20% increase in conversions, which has driven above-market online growth.

UBER

As Uber, a multinational ride-sharing app expanded to new markets, the company realized the potential of enabling all users to quickly request a ride, regardless of location, network speed, and device. With this in mind, Uber rebuilt their web client from the ground up as a viable alternative to the native mobile app.

Compatible with all modern browsers, m.uber​ offers an app-like experience for riders on low-end devices, including those not supported by the native client.

The company made sure to make their PWA lightweight—the core ride request app comes in at just 50kB, enabling the app to load quickly even on slow 2G networks.

example

UBER

As Uber, a multinational ride-sharing app expanded to new markets, the company realized the potential of enabling all users to quickly request a ride, regardless of location, network speed, and device. With this in mind, Uber rebuilt their web client from the ground up as a viable alternative to the native mobile app.

Compatible with all modern browsers, m.uber​ offers an app-like experience for riders on low-end devices, including those not supported by the native client.

The company made sure to make their PWA lightweight—the core ride request app comes in at just 50kB, enabling the app to load quickly even on slow 2G networks.

example
example

FLIPKART

  • Users’ time on the site with Flipkart lite vs. previous mobile experience: 3.5 minutes vs 70 seconds
  • 3x more time spent on site
  • 40% higher re-engagement rate
  • 70% greater conversion rate among those arriving via Add to Homescreen
  • 3x lower data usage
Flipkart, India’s largest eCommerce site, found it harder and harder to provide a user experience that was as fast and engaging for their mobile users. With 63% of Flipkart Lite users reaching the site via a 2G network, a fast user experience was essential. The company sought a solution to provide features that made the mobile web run instantly, work offline, and re-engage users. As a result, the company launched Flipkart Lite, a Progressive Web App that combines the best of the web and the best of the Flipkart native app.​

BOOKMYSHOW

  • 80%+ increase in their conversion rates
  • PWA 54x smaller than the Android app and 180x smaller than the iOS app
  • Less than 2.94 seconds to load and checkout within 30 seconds
BookMyShow, India’s largest ticketing firm with 50+ million monthly visitors, encountered high bounce rates because their mobile website’s load speed and user experience weren’t optimal. Their native app also posed problems as it required heavy data and memory usage to be effective.

To overcome the issues, BookMyShow launched a PWA to deliver the best mobile web experience possible for their users. A PWA would provide a smooth, seamless movie-booking experience that would optimize speed and remove data constraints for existing customers, without sacrificing the user experience.​

BookMyShow managed to create a super-light app. They also took advantage of service workers to deliver reliable performance on slow or unreliable networks. Data consumption is also substantially lower, thanks to optimization. When a user asks for a particular page, only assets required for that page are loaded, conserving data. On 2G networks, the initial load time is just 4 seconds. Even for personalized movie suggestions, the PWA takes less than 2.94 seconds in subsequent loads. All of these changes resulted in an 80+% increase in conversion rates, a huge difference in BookMyShow’s bottom line.

example

BOOKMYSHOW

  • 80%+ increase in their conversion rates
  • PWA 54x smaller than the Android app and 180x smaller than the iOS app
  • Less than 2.94 seconds to load and checkout within 30 seconds
BookMyShow, India’s largest ticketing firm with 50+ million monthly visitors, encountered high bounce rates because their mobile website’s load speed and user experience weren’t optimal. Their native app also posed problems as it required heavy data and memory usage to be effective.

To overcome the issues, BookMyShow launched a PWA to deliver the best mobile web experience possible for their users. A PWA would provide a smooth, seamless movie-booking experience that would optimize speed and remove data constraints for existing customers, without sacrificing the user experience.​

BookMyShow managed to create a super-light app. They also took advantage of service workers to deliver reliable performance on slow or unreliable networks. Data consumption is also substantially lower, thanks to optimization. When a user asks for a particular page, only assets required for that page are loaded, conserving data. On 2G networks, the initial load time is just 4 seconds. Even for personalized movie suggestions, the PWA takes less than 2.94 seconds in subsequent loads. All of these changes resulted in an 80+% increase in conversion rates, a huge difference in BookMyShow’s bottom line.

example
example

GEORGE

  • 3.8x faster average page load time
  • 2x lower bounce rate
  • 31% increase in conversion rate
  • 20% more page views per visit
  • 28% longer average time on site for visits from Home-screen
George.com​ is a leading UK clothing brand, part of ASDA Walmart. Site speed was the most crucial part of the initiative. Following PWA’s best practices, in accordance with Google, Asda George reduced page load time for shoppers by 3.8x times. The business also saw a 31 percent increase in conversion and 20 percent more page views per visit.

By implementing site-wide HTTPS, Asda George now offers a more secure end-to-end shopping experience for customers, enabling modern browser capabilities, like Service Worker, and therefore allowing consumers to stay in touch with the brand whilst offline.

In addition, the brand implemented an “Add to Home Screen” prompt, which resulted in an increase in customer time on site by 28 percent, truly creating a native app-like experience on the web.

LET US HELP YOU

Recognizing the huge potential of PWA technology in eCommerce early allowed Scandiweb’s team​ to immediately begin crafting and building a PWA solution for Magento, aiming to become the trendsetting pioneers. And we sure did.

In 2018 ScandiPWA​ was developed as the first ready-to-use PWA eCommerce solution for Magento-based stores.​

Step into the future by making your eCommerce store a digital paragon of what mobile commerce should be with an open-source Magento PWA theme that improves performance, boosts engagement, and increases conversions.​

GET A FREE ESTIMATE