Table of Content

Magento 2.3 PWA Studio: All Hail the Progressive Web App Revolution!

Magento PWA Studio

Magento 2.3 gave the community a lot of interesting features to play with. A native page builder, interchangeable WYSIWYG editors, 3 new API updates, and complex warehouse management support.

But most importantly with the you can now for your site with lots of cool features. But before we dive deeper, I have something to show you.

pwa1-company list

What do all these companies have in common? The answer is – all of them switched to Progressive Web Apps to make the user mobile experience as closely resembling a native app as possible.

While for the most part e-commerce giants and service providers haven’t really abandoned their native apps, can now serve as the main gateway into their shopping experience.

What Are Progressive Web Apps?

Progressive web apps are designed to offer users the same experience as a native iOS or Android app would. But instead of being a separate app on your phone, it’s just a regular website.The approach here is different from company to company.

Compare what The Washington Post looks like in a native Android app and as a PWA.

pwa2-wapo-android-app-pwa

It’s clear that The Washington Post is experimenting a lot with content delivery. The Android app is focusing on the visuals while the PWA is more about the message itself.

WP’s PWA offers a larger snippet that allows its users to invest in the story before they decide whether they want to see more or skip to the next piece.

AliExpress is more consistent with its presentation and the way it wants new users to receive their sales message. If not for Chrome’s iconic address header I would have no idea I was using a PWA at all.

And while AliExpress is pushing its app quite a bit, I am sure they would be just as fine with me shopping in Chrome (feel free to browse more ).

pwa3-aliexpress-pwa-vs-android-app

Now let’s take a look at Amazon. Can you even tell the difference?

pwa4-amazon-android-app-vs-pwa

It looks like Amazon is fully committed to creating the same experience both for mobile users and their native app shoppers.

Amazon dev team clearly has all the resources they need to create two different versions of the store. But instead, they commit to delivering an extremely focused UX for all platforms.Want to see more awesome PWAs? Here are you can check out.

How Many New Mobile Apps Users Install per Month?

On average, 0.That’s right. An average user installs zero new apps per month. And even when some apps get installed, most of them don’t survive more than 24 hours on the phone.

This is the trend that both iOS and Android share. Users don’t like new apps. On average, there are 20-25 third-party apps on a phone and this number is declining every year.

pwa5-comscore-stats-new-app-installs

After 3 months, they have downloaded. During the day an average user only opens 9 apps and spends 80% of their time in the top 3 apps they have.And as an avid smartphone user myself, I can relate. I’ve installed 2 new apps last month. I became a customer at a new bank so I got their app. And I discovered I can use an app to switch music on my player with hardware volume buttons, so I got that one, too.But that’s about it. Other than that I haven’t been using anything new for ages.

I’m an open-minded and forward-looking type of guy, but I despise the idea of cluttering my phone with more apps. If I add something, it’s a strict necessity and not an impulse thing.

Most users are tired and suspicious of unknown apps. They want a more holistic experience when things just work. This is a global trend we see among all consumer demographics.

And this is why the fight for user adoption is an uphill battle. But there’s another way to capture their attention.

How many websites per month an average user visits? Close to 100. So let’s capture more sales in e-commerce this way.

The hardest challenge for software is distribution. PWAs take the cake here because they don’t need to be installed or downloaded. They just work.

pwa6-native-apps-disadvantages

While native apps offer better performance, more functions, and prettier visuals, the effort to install a new app can often be too much for an average consumer. Most users will prefer to shop in their browsers.

PWAs vs Native Apps for Magento. Comparison

Native apps have all the cool features we like:

  • High reliability and performance
  • Improved security
  • Push notifications

But now PWAs can break the gap by offering comparable native app-like functionality while retaining the advantages of the Web. Take a look at what Magento PWA Studio can add to your mobile website right now:

1. Add Your Store Icon to the Home Screen

pwa7-magento-add-to-homescreen-splash

Make sure your users get a seamless experience indistinguishable from a native app. PWAs make it easy.

Adding a home screen shortcut is a single action, it looks exactly like a normal app, and launches with a splash screen making the user experience even more immersive. Take a look at these examples of Magento PWAs to learn more about what they are like.

2. Load to Splash Screen From Web Shortcut

pwa8-magento-splash-screen

Splash screens help you mimic native app behavior to prepare the users for seamless online shopping and shape their expectations early.While appearing on screen for only a fraction of a second, splashes serve an important role. Instead of showing your customers the browser interface, the store greets them with a branded image showing users your attention to small details.

3. Enable Offline Mode for Improved Experience on Spotty Networks

PWA uses service workers, , and extensive but lightweight caching to offer users offline functionality. Usually, this was the sovereign territory of native apps, since only they knew how to keep the customer happy on a network that appears and disappears every so often.Service workers take the same job but they do it better. Lightweight caching means they use the same amount of data to store more content and smart caching ensures better predictions about future user behavior.

4. Use the Same Push Notifications as an App-Based Store

pwa9-magento-pwa-push-notification

Progressive web apps offer the same functionality for push notifications as normal apps – creating a single experience throughout desktop and mobile platforms.

pwa10-push-notifications-magento-pwa-desktop

Progressive web apps are all about inclusion and outreach:

  • No need to install anything, it just works.
  • User acquisition is cheap, you don’t need to convince shoppers to install an app.

Optimization is also there. PWA’s technological leap is even more impressive if you bear in mind that progressive web apps don’t just offer comparable performance. They are actually better than native apps.

PWAs have established new UX standards for everyone offering:

  • 10x improved data savings
  • 4x faster page loads
  • Better performance on bad networks
  • App-like navigation menus and scrolling

5. Get Single-Tap Login and Easy Checkout

There are numerous . Among them are using plain React or modifying toolkits such as the PWA Studio.

New APIs shipped in 2017/2018 made it possible to turn Magento PWA Studio into what it is now: a rising star-packed with cool features. These APIs are Web Payments API and Credential Management API.

Web Payments API enables easy checkout, one of the core e-commerce user experiences. It replaces the cumbersome Magento Checkout with a lighter version, more fitting to smartphones and mobile users' expectations of shopping online.In conjunction with Credential Management API, they offer one-tap login, fast payments, and automatic sign-ins for returning customers.So here are the major changes new APIs bring. From old to new:

  1. Username / password login >>> One-tap login
  2. Confirmation login for returning users >>> Autologin for users the system remembers
  3. Keyboard-based data input >>> Prompt-based data input

6. Get Better Speeds With the New Caching Mechanism

PWAs introduce a brand new cache management approach that consists of AMP, service workers, and predictive caching.

The new approach allows PWAs to be faster and more lightweight. Load order changes accommodate better content delivery:

  1. First AMP loads the main content
  2. Then AMP installs a service worker to manage subsequent content caching more efficiently
  3. AMP+serviceworkers are up to 4x faster than native apps

Google evangelized PWA development among the dev community with the help of early Google Chrome support and Google Lighthouse, a development hub where creators can test their apps and collaborate with others. Developers in our agency have been getting familiar with the tool to offer quality PWA development services to our customers the moment Magento 2.3 comes out.

Adapt to New Mobile Trends With PWAs

Magento PWA Studio got a major update in November 2018 introducing new API-powered features and better code. But the task to implement them all is on the store owners. And here’s why it’s important right now.

pwa11-time-spent-in-apps-comscore-analytics

The trend of using fewer and fewer apps marks the reluctance of ordinary users to spend time discovering, installing, and using new software. Instead, most smartphone users in their favorite top 5 apps. And the situation is not going to improve for native apps.

is one of the best ways you can invest in the future today. After all, are at times much more budget-saving than when developing native applications. Just like with the desktop browser feature explosion, PWAs pave the road to smarter, better mobile browsing experiences that will challenge more and more native apps. And then replace them.

Related Articles

13 Magento PWA Examples: No More UX\UI Mistakes
Alex Husar
Alex Husar, Onilab CTO

13 Magento PWA Examples: No More UX\UI Mistakes

18 min
Jul 19, 2021
How to Develop a Store Using Magento PWA Studio (Updated for 2024)
Alex HusarDmitry Gayduk
Two authors, Onilab LLC

How to Develop a Store Using Magento PWA Studio (Updated for 2024)

30 min
Aug 5, 2023
How to Build a PWA Storefront for Magento 2 in 2024: A Detailed Guide
Alex Husar
Alex Husar, Onilab CTO

How to Build a PWA Storefront for Magento 2 in 2024: A Detailed Guide

30 min
Jul 20, 2023

Let’s stay in touch

Subscribe to our newsletter to receive the latest news and updates.