Improve Digital Commerce Experience with Progressive Web Apps

Progressive web apps are a cost- and skills-effective way to reach a wide audience with a close-to-native app experience that supports the full customer life cycle. Application leaders for digital commerce technologies must plan for PWAs when designing digital commerce experiences.

Key aspects

1. Mobile is accounting for an increasing share of digital commerce transactions, but mobile web often doesn’t provide a satisfying user experience, while building native apps can be time-consuming, costly and lacking in adequately skilled developers.

2. Requiring users to download and install mobile apps from the app store is a big friction point in customer acquisition.

3. Digital commerce practices and technologies such as search engine optimization/marketing (SEO/SEM) and personalization either don’t work or work differently in native apps, creating operational challenges and administrative overheads to drive effective business outcomes.

PWAs supporting digital commerce customer lifeycle

Mobile is capturing an increasing share of digital commerce sales and attention. In the U.S., smartphones accounted for 31.8% of online retail sales in 3Q18, up from 27.8% in 2017. In China, 84% of consumers were using mobile phones to shop in 2017, up from 81% in 2016. Organizations want to serve mobile visitors more effectively, but building native apps can be time-consuming and costly, while mobile web apps don’t always provide a good user experience (UX).

At the same time, traffic generation, user acquisition, conversion and retention are top challenges facing application leaders for digital commerce. The need for customers to go to an app store to download and install apps is a big friction point in customer acquisition.

In addition, many commerce solutions were built using web-based technologies that deliver the most functionality to websites. Technologies such as personalization work differently in mobile apps, and practices such as SEO/SEM don’t even work for native apps. Application leaders are looking for ways that allow them to best leverage and reuse such technologies and practices on mobile devices as well.

PWAs provide an approach that can deliver a UX similar to that of a native app while making use of technologies powering the web experience.

PWAs bridge the gap between native and mobile web apps, and offer functionality that can support the digital commerce customer life cycle in terms of acquisition, conversion, engagement and retention (see Figure 1).

​

PWAs Support the Digital Commerce Customer Life Cycle

Figure 1. PWA Supports the Digital Commerce Customer Life Cycle

Application leaders should get their commerce sites ready for PWAs today if they haven’t started implementing them. Early adopters will gain advantages, or at least expertise to execute better when that happens. Follow the best practices in this research to take advantage of PWAs to deliver a good user experience while achieving business outcomes.

Understand the Benefits and Limitations of PWAs

PWAs enhance existing mobile web technologies by aligning the user experience closer to that of native apps. This will benefit digital commerce organizations as they try to acquire and engage customers with richer experiences and shorter time to market. The benefits of using PWAs for digital commerce include:

#1: An engaging user experience

1. Searchable and shareable content: PWAs work in a similar manner to webpages so the content can be searched via search engines, enabling organizations to leverage their SEO/SEM practices. Visitors can bookmark the page for future visit, send it to other users, or share it over social media. PWAs can also identify return visitors using cookies when users have cookies turned on.

2. Fast to install, easy to access: PWAs have a much smaller footprint than native apps (typically a few hundred KB compared to tens of MB for native apps), so can be fast to install. It doesn’t need to be downloaded from the app store, and can be installed directly from the browser, reducing friction in customer acquisition. It can also place a home screen icon on the mobile device, similar to what native apps do, for easy access in the future.

3. Modern, interactive UI: PWAs go beyond responsive designs to support smooth mobile navigation and animation, touch experience, modular UI components, and features such as full-screen view and splash screen. It can use mobile device functions such as the camera, microphone, GPS and Bluetooth (depending on the mobile OS) to enable features such as bar code scanning and location tracking.

4. Support personalization: Personalization engines deployed for commerce websites can function in the same fashion in PWAs, leveraging the capabilities already implemented in the commerce platform to support user conversion.

5. Push notifications: PWAs can send push notifications for order confirmation/status updates, offers, promotions and reminders, to enable organizations to better engage customers and encourage repeat purchases. The function works even when the PWA is not launched, so long as the browser is running.

6. Dynamic app refresh: Changes and updates can be pushed to the client side without requiring users to download a new version, reducing friction in ongoing customer engagement.

7. Support offline and low-bandwidth usage: PWAs cache certain content for offline access so users without internet connectivity can access features such as orders, favorites, add to cart and payment. This also allows the content to load faster for return visits and over limited bandwidth. Each mobile browser differs in terms of the amount it can store offline, and the progressive aspect of PWAs is constantly impacting this amount. We recommend you check each mobile browser for the amount of local storage accessible prior to commencing your app build.

#2: Fast time to market

1. Simple app distribution: PWAs are distributed via web browsers so don’t need to go through the review and approval process of the app store. The downside is that users cannot discover you by searching the app store. The good news is that Microsoft App Store and Google Play now support PWAs.

2. Develop once and deploy across platforms: PWAs use a web-based technology and work in web browsers, so can be deployed on most mobile platforms, enabling a wide reach of audiences. Developers don’t need to build separate apps for each platform like they normally do for native apps.

#3: Lower TCO than native app build and maintenance

1. Development cost: PWAs can leverage assets built for commerce websites and don’t have to conform to the various rules of iOS or Android app stores. Since they support a “develop once and deploy across platforms” approach, the development cost can be one order of magnitude less than that of native apps. Among PWA implementations, those with complex topology and more resilience will cost more than those with simple topology and less resilience.

2. Easy update: Changes and updates in the presentation layer and core platform will automatically be reflected on the client side, and new features can be dynamically refreshed without the need to publish/download a new version.

3. Analytics: No separate tools are needed for PWAs — usage tracking and analytics can be gathered using the same set of analytics tools used for websites.

4. Developer skills: PWAs are a web app so developers with JavaScript and mobile web skills can develop the app, as resources are abundant and costs can be competitive. Organizations don’t need to look for developers with native app experience for iOS or Android.

While PWAs have many benefits, they also have limitations, including:

1. Browser support: This is the biggest concern because browser support for service workers is the key to enabling important features such as push notifications and offline support. Service workers are a modern browser feature that allows functionality to run in the background, independent of the main execution of the web app. Service workers enable the browser to support offline caching, push notifications and background synchronization.

The good news is that major browsers, with the exception of IE, support service workers (see Figure 2). There are regional differences, however, as some markets, such as China, have different browser preferences, and device OEMs often point to their own browsers by default.

​

Browser Support of Service Workers

Figure 2. Browser Support of Service Workers

A concern related to browser support is user configuration, as users can control browser configuration by turning off JavaScript, push notifications or service workers. This will significantly impact PWAs’ functions.

2. Gaps with native apps: Native apps are still ahead of PWAs in some features (for example, access to contacts, calendars, alarms, browser bookmarks, SMS, phone calls, get mobile number or cross-app interactions). Native apps offer better control of the UX design, security and integration to the back end, are faster and more reliable in terms of app performance, and consume less battery power as they load faster on the device.

1. Authentication: PWAs don’t support biometrics features such as face ID or fingerprint, so users will have to resort to the traditional ID/password format.

2. Payment: This can be challenging in PWAs as they don’t support cross-app interaction. Even when users have payment information stored in other apps (such as PayPal or Alipay), PWAs won’t be able to call those apps for an easier check-out experience. Instead, customers will either need to log into their payment accounts if those services are integrated into the commerce site, or manually enter the credentials on the mobile device, which is very cumbersome. Another challenge is offline payment. Although tokens have been used for making offline payments in native apps using white-box encryption, this is not possible with PWAs. Instead, PWAs can be designed to give a time limit within which the order remains valid and customers can pay when they regain connectivity.

3. Mobile UX skills: While PWAs can be implemented by developers with JavaScript and mobile web skills, the effective design and implementation of PWAs require additional skills related to the mobile UX. These include skills with service workers, app-controlled cache/synchronization strategies, push notification and app manifests.

Decide Whether You Need a PWA, Native App or Both

In addition to the functional gaps of PWAs compared to native apps, application leaders should also consider the factors outlined in Table 1 that will influence your decision to choose a PWA or native app.

Table 1: Deciding Between PWAs and Native Apps

Customer Behavior and Preferences

Customer behavior and preferences are top considerations, as the goal in digital commerce is to acquire and engage customers as much as possible, so choose the technology that can best achieve that goal. Typically, PWAs can be offered to the following users:

1. Visitors who are new to the site and who are directed there via search or online marketing campaigns. PWAs can be very useful for new customer acquisition. For example, Flipkart saw 50% of its new customer acquisitions came from its PWA.

2. Casual users who just want the most basic features and don’t want to be bothered with downloading the native app to access all the functionality. In contrast, native apps can target heavy users who use the services at higher frequencies and want to access the full service.

3. Users who prefer websites. In markets such as the U.S., the U.K., France, Germany, Australia and Singapore, where customers prefer to use websites for repeat purchases, PWAs can offer a similar experience to that of native apps, thus increasing customer engagement. Starbucks reported that its PWA doubled the number of customers who ordered from desktops and who were ordering at the same rate as mobile app users.

4. Users concerned about device footprint. In markets such as Africa, South East Asia and Latin America where smartphone penetration is low, people have concerns about limited device storage and battery consumption. They would prefer to use apps that take up little phone storage space and are battery-efficient, and often uninstall apps to free up space for new apps or to slow down the battery drain. For example, 60% of Flipkart’s PWA visitors had previously uninstalled its native app. PWAs have the advantage of a limited footprint, but also have the disadvantage of consuming more battery life than native apps, as they need to communicate with the back end more often to fetch new content and data.

User Reach

PWAs have the advantage in that they work on most mobile devices so long as the browser supports service workers and the content is searchable and shareable, so can be especially helpful in acquiring new customers. However, due to limitations in browser support and the complication of user configurations, whereby people can turn off service workers, PWAs may not be available to all target users. Application leaders should spend some time understanding the browser capabilities in the target customer segment and geographical markets, and may need to consider native apps if the service worker support is low. In many cases, we see organizations offer both in order to target different demographics to maximize the reach.

Organizations often develop multiple commerce apps for different roles such as distributors, direct sales, store managers, in-store associates and customers. Building native apps for each role and each mobile platform can be very expensive and takes a long time, so organizations should consider a combination of PWAs and native apps. Given that direct sales, store managers and in-store associate often use company-purchased devices, applying PWAs on devices with known browser support is highly beneficial.

Time to Market and Development Budget

When organizations are pressed for time or have limited development budget, they should consider PWAs, because they reuse existing web assets and can be developed once and deployed across platforms. This is also helpful when you have limited resources for native app development.

Business Strategy

When organizations are entering new markets or trying to test new products in a market, PWAs can help to quickly gauge the market’s response before investing in native apps. This allows the organization to better understand the mobile infrastructure in the target market, users’ behavior and preferences, and what products and app functionality are needed to formulate more-specific business strategies. When organizations are committed to the market opportunity, have clear plans, and want to have deep engagement with the customers, they can invest in native apps.

Organizations that want to create a prestigious image of the brand or have a strong focus on security should consider native apps, which offer better controls for design, performance and security than PWAs.

Progressively Build PWA Capabilities

There are two approaches to launching PWAs:

1. Full launch: Organizations that are starting digital commerce for the first time or conducting a relaunch can incorporate PWA technologies into the entire site design, including service workers, cache/synchronization and push notifications. They can enjoy the full benefits of the PWA for all site functionality.

2. Modular launch: Organizations that want to employ PWA technologies onto existing sites can look to implement some functions first that help address UX pain points. Examples include a virtual customer assistant (VCA), loan calculator, store locator, bar code scanner and calendar. Customers can add those to the home screen for quick access, or get notifications about promotions. You can implement more features as required by the customer to progressively migrate toward a full PWA-ready site.

Application leaders should start with an app that works with minimum browser support. Use methods such as user surveys and analyses of current app access data to determine the level of support for PWAs in your users’ browsers. If all of your users are running modern browsers that support PWAs, great. If not, determine the lowest browser support that still represents a significant set of users and establish that as the minimum browser support. Design the app that works well with that minimum even if the browser doesn’t support PWA features, and progressively take advantage of PWA capabilities when the browser supports them. Alternatively, you can design for a specific mobile platform first, such as Android, or for a specific browser, such as Chrome, to learn from it and then apply more broadly to other browsers and OS.

Align PWA Experience with Customer Expectations

PWAs support some native app experiences such as full-screen view, push notifications and home screen icons. Application leaders should take the time to understand customers’ expectations for these functions, as such capabilities don’t always make sense for all digital commerce use cases.

1. Full-screen view: Customers may not want this during a chat session with customer service because they want to be able to refer back and forth to product details and the transaction record. But it can be useful when customers are viewing product details with rich content, such as image and video.

2. Push notifications: Customers can get annoyed with the overuse of push notifications and may only want to be alerted about specific events, such as an order shipment or change of delivery time. Consider allowing customers to opt in to receiving certain messages while keeping the push notification function turned on.

3. Home screen icon: Customers who repeatedly use the function/service can find the home screen icon useful, but those who only use the function once may not need it. Decide when and how to prompt customers to add to the home screen. One option is to prompt users only after they have been using the site for some time, such as 60 seconds. Another option is to track the number of visits to the site and only prompt after a number of visits.

4. Offline access: Implementation of this capability needs to be carefully thought through to balance the UX with security. There are a few decisions to make:

1. Should authentication expire in the offline mode? This means customers may have limited access to some account-specific features.

2. What functions can customers use when they are not authenticated? Besides browsing the generic content, can they use functions such as add to cart, save to favorite and even order details? For example, airlines can allow passengers to access journey details and boarding passes when offline. Such design allows customers to use the most needed functions anytime.

3. How will changes be synchronized when the app is back online? Is a new authentication required before synchronization takes place? To reduce friction, application leaders can consider setting a time period, such as one day, within which no new authentication is needed. Or, to enable more security controls, they can set a trigger, such as the user exiting the browser, for the expiry of authentication.

Understand customers’ expectations for the mobile commerce experience and prioritize PWA functionality accordingly. For example, if most customers don’t care much about the full-screen view or will disable push notifications, these may not worth be implementing.

PWA Checklist

To make a site a PWA, ensure the following is in place:

• Webpages are responsive: This ensures the site works on mobile devices. Most commerce platforms use page templates that enable responsive design by default.

• Pages are served over HTTPS: Service workers are subject to interceptions, so the site or functions that will be presented as PWAs need to be secured.

• Each page has a URL for deep linking: PWA pages are shared as links, so each page has its own URL.

• URLs load offline: Pages are cached for offline access.

Acquire PWA Skills and Tools

While PWAs leverage traditional web development skills, effective implementation of PWA techniques does require additional skills. Developers need to have not only cumulative knowledge of modern web apps, mobile app development and responsive design, but also skills specific to PWAs. These include knowledge of service workers, app manifest, app shell, app-controlled cache, local storage and push notifications.

Application leaders can look to the following three resources for help with PWAs:

1. JavaScript frameworks: They help simplify the work by enabling implementation of PWA features as part of the development process. These frameworks support service workers and cache/synchronization management. Examples include Polymer, Angular, Ionic, React and Vue.js.

2. PWAs solution providers: They focus on PWA enablement and adapt websites to PWAs with optimized customer experience. Sample vendors include Mobify, Moovweb and Lumavate.

3. Digital commerce providers: Magento now offers a PWA Studio that also comes with a concept storefront that supports basic check-out flows, including payment, and runs on Magento 2. Elastic Path offers a reference PWA storefront using React framework, and works on Elastic Path Commerce via its Cortex API.

Monitor the development of JavaScript frameworks and the vendor space. They are adapting quickly to support PWAs and more UX elements, such as payment, coupons and favorite, that can be readily applied to digital commerce.

​

​

​