Progressive Web App (PWA): Future of the e-commerce industry

A few years ago, Progressive Web App (PWA) was considered the "revolution" in the technology world, especially e-commerce, by providing a strong mix of traditional websites and native mobile apps, serving all devices with a single solution. Google and Microsoft are like PWA patrons, which paved the wave for its growth, and there is no reason to give up on it any time soon.

The big question now is: "Will Progressive Web App be the future or just an overrated technology?". Let's dig deep into it in this article.

What is Progressive Web App (PWAs)?

PWAs are web apps developed based on web technology (HTML, CSS, JavaScript, and WebAssembly) that provides a similar UI as a native app. They work the same way as a regular website (web-based application) but provide features of a normal native app:

• Work offline: Ability to work when the mobile device is not connected to a network or connected to an uncertain connection.
• Send push notifications
• Access to the device feature: Camera, photo library, etc.
• Can be published to app-providing platforms (App Store, Google Play, Amazon Appstore, Microsoft Store, etc.)

Despite all these features, PWAs only require a tiny fraction of the storage space compared to official native applications fully downloaded from app stores (Twitter's PWA only takes 600KB to its account, while this figure is 214MB for iOS and 24MB for Android apps).

There are some of PWA's early adopters' successes:

• Twitter Lite: Reduce 70% of data consumption and increase engagement
• Alibaba: One of the largest e-commerce corporations in the world has increased its conversion rate by 76%.
• Forbes: The average audience spends double the time reading the magazine on the online platform thanks to PWA, which reduces loading time from 6.5 to 2.5 seconds and displays 20% more than just the browser.
• Best Western River North Hotel: Online booking platform has increased its revenue by 300%

Emergence of PWA

The concept of "Progressive Web App" was officially brought out by Alex Russel and Frances Berriman in the article: "Progressive Web Apps: Escaping Tabs Without Losing Our Soul". Since then, Google has paved the way for this emerging technology to grow and improve.

In 2018, Apple also announced support for PWA but still imposed limitations on the cache capacity and push notifications. This technology wave also swept along some large corporations like Twitter, Spotify, Starbucks, Alibaba, The Washington Post, etc.

Effect of PWAs on Businesses

User Experience

Without PWA, the customer usually purchases their first item on the official website, which is the result of searching via search engines. Most e-commerce websites will ask users to download the app from app stores corresponding to the device's OS, with 50% of them choosing "Later" and won't download them.

To solves this problem, we could use PWAs to reduce the process.

• PWAs reduce the space required to install, which may be the reason customers refuse to download
• Although using the web-based app, they still provide the same experience as the native apps do.
• More convenient for first-time purchase

Business Statistics

• Customer Acquisition Cost (CAC): Reducing the process of downloading the app leads to the growth of the chances that customers accept PWAs to be installed on their devices.
• Decreased Bounce Rate: PWAs are working offline (by caching resources on install, then fetching from the cache when used), so that poor network is now not the problem for dropping the sales index.
• PWAs also boost engagement, mobile conversions, and revenue.

Search Engine Optimization (SEO)

With native apps, SEO is hard to optimize. They are introduced on websites, links to app stores, or pay-for advertisements on search engines and stores. PWAs allow optimizing SEO for it, and they are server-side rendering that can perform Google SEO with technical SEO.

Operation and maintenance

For e-commerce SMEs, developing a website and IOS requires great development and operation costs with the involvement of 4 teams: front-end, back-end, IOS developer, and Android developer. In this case, PWA is the saver when only the front-end and back-end are needed to develop and operate. However, that will require more skill from each individual (understanding of mobile app UI, mobile-first design, etc.).

Drawbacks of PWAs

Despite many critical advantages, there are also some remained drawbacks related to the limitation in functionalities, permission, and performance.

Limitation in functionalities

PWAs are not fully accessible to the device's functionalities. Some of them are restricted to PWAs like contacts, calendars, NFC, Bluetooth, etc. This problem should be taken into account when considering whether your organization should use PWAs instead of native apps.

Permission

Although Apple has announced that they support PWA, but still obstructs PWAs permission to some of the features of devices with iOS. Currently, PWAs can't use Bluetooth, Siri, send push notifications, Face ID, and Touch ID.

Performance

The performance of native apps is much higher than PWAs. PWAs may be appropriate for SMEs, but for large companies that take part in a competitive market, native apps are still the prior choice.

Some tools for developing PWAs

You must develop a responsive website first using your favorite IDE or code editor. To make a good PWA, developers should bring user-centric performance metrics optimization to the top of the list, allow the app to work in any browser, be responsive to different resolutions (mobile-first is recommended), work with any input type (touch, mouse, keyboard, etc.), and provide a custom offline page. In addition, the app should be easily searched via search engines (SEO), fully accessible, that pass the WCAG 2.0 accessibility requirements.

When you finish the developing phase and deploy the app, the following tools can help you to evaluate your code before generating uploadable packages.

PWABuilder

Enables developers to generate store uploadable packages for Microsoft, Google Play, and iOS App stores.

PWABuilder requires your deployed web app's URL. After receiving the URL you provided, it will automatically analyze and evaluates the website's Service Worker, Web Manifest, and Security with its corresponding scores of PWA appropriation.

There are 3 attributes brought into the evaluation:

• Manifest: Detail information about the app's name, short name, description, display, and colors (can be changed after the evaluation process).
• Service Worker: Evaluate the use of the app in some common attributes (Offline page, Offline copy of pages, Offline copy with Backup offline page, Cache-first network, Advanced caching, Background Sync, Serving Cached media).
• Security

The tool also provides developers with sample codes of the service workers to configure in the source code of the app.

// This is the "Offline page" service worker

importScripts('https://storage.googleapis.com/workbox-
cdn/releases/5.1.2/workbox-sw.js');

const CACHE = "pwabuilder-page";

// TODO: replace the following with the correct offline fallback page i.e.: const offlineFallbackPage = "offline.html";
const offlineFallbackPage = "ToDo-replace-this-name.html";

self.addEventListener("message", (event) => {
  if (event.data && event.data.type === "SKIP_WAITING") {
    self.skipWaiting();
  }
});

self.addEventListener('install', async (event) => {
  event.waitUntil(
    caches.open(CACHE)
      .then((cache) => cache.add(offlineFallbackPage))
  );
});

if (workbox.navigationPreload.isSupported()) {
  workbox.navigationPreload.enable();
}

self.addEventListener('fetch', (event) => {
  if (event.request.mode === 'navigate') {
    event.respondWith((async () => {
      try {
        const preloadResp = await event.preloadResponse;

        if (preloadResp) {
          return preloadResp;
        }

        const networkResp = await fetch(event.request);
        return networkResp;
      } catch (error) {

        const cache = await caches.open(CACHE);
        const cachedResp = await cache.match(offlineFallbackPage);
        return cachedResp;
      }
    })());
  }
});

Then, PWABuilder generates the uploadable packages of the app. Developers can use these packages to upload to app stores or place an "add to screen" suggestion on the website.

Lighthouse

Lighthouse is an open-source tool for improving the quality of PWA created by Google, which works similarly to the PWABuilder, which measures multiple criteria of the websites to ensure the quality of PWA and check for potential issues before launch.

Ionic

Ionic is an open-source mobile toolkit based on Apache Cordova and some front-end frameworks (Angular, Vue, React) for building high-quality, cross-platform native and web app experiences.

The tool provides toolkits about PWA functionality like UI elements, unit tests, pre-build routing, etc.

Conclusion

PWAs have much convenient functionality and support from Google and Microsoft, therefore it in high demand in the past few years. Despite that, it is challenging to predict the future of technology. However, an undeniable fact is that this is a great solution for e-commerce companies (especially SMEs) compared to traditional websites and native apps.

For the big question I have mentioned at the beginning, "Will Progressive Web App be the future or just an overrated technology?". In my opinion, to be a great technology for the future, PWAs need a lot of work for improvement, especially app performance, getting permission from device providers to be fully functional mobile apps, and figuring out other problems that can be solved using this technology. For now, PWAs should just be an additional solution along with a native app instead of being its alternative solution.

So I wrap up this article by showing the comparison between PWAs and native apps: