Mobile PWA Progressive Web App

Progressive web apps (PWAs) are a relatively new type of application that uses modern web technology to bring traditional app-like experiences to users. PWAs allow users to interact with websites in similar ways that they can interact with apps, making it so websites feel more like native applications.

With PWAs, websites can offer many of the same features as mobile apps such as push notifications, offline access and device hardware integration. As more companies move towards developing PWAs, it is becoming increasingly important to understand the current state of this technology.

PWA interest 2017-2022
Interest for PWA has been stable for the last five years.

Studies show that the progressive web application market is expected to reach a value of 10.77 billion dollars by 2027, representing an impressive year-on-year growth rate of more than 30%. And according to Google, desktop installations of PWAs have grown with 270% since the start of 2021. 

But what's the current status of the technology? Let's take an essential look.

PWA Summit 2022 highlights

Google, Intel, Microsoft, and Samsung recently arranged their second PWA Summit. Highlights include:

How well do you know PWAs?

To begin building PWAs, it's important to understand what they are and what they aren't. They are web applications created with HTML, CSS, and JavaScript - the must-have trio - but can be given a native look and feel through modern APIs.

Not all browsers support all web features for PWA installation on desktops, yet such technology has already been utilized by brands like Pinterest who have combined native apps with PWAs in order to boost user retention due to its unrivaled reach.

From starter app to store package with PWABuilder⁠

With the growing popularity of PWAs, the mobile app development market has seen an influx of new technologies and tools, including the Microsoft-sponsored, open-source PWABuilder toolchain. This provides everything you need to create powerful PWAs from scratch or add PWA capabilities to an existing project.

With the PWA Starter code template featuring a fast stack and Workbox, plus PWABuilder Studio's Visual Studio Code extension with manifest management and PWA validation, your PWA is ready to be packaged on PWABuilder.com.

Plus, its open source nature means there's always somebody in the PWABuilder community available on Discord and contributing to projects on GitHub.

Challenges in storing large amounts of client-side data⁠

Working with IndexedDB can be tricky due to its inability to run advanced queries such as joins and aggregations. However, the web dev community has found solutions like absurd-sql and wa-sqlite to run SQL queries on top of local data stored in IndexedDB.

Additionally, inadvertent data loss is a threat that must be taken into consideration; the Origin Private File System API could provide high-performance access but browser support may be an issue.

See also: Why we are building our new website with Next.js and headless CMS »

Web apps for everyone, everywhere: PWAs to the rescue of people in low-internet areas

Offline support is key when it comes to accessibility, and the presenter's team needed to create an app for farmers in areas with low connectivity. In order to enable offline CRUD actions, the Background Sync API and IndexedDB became essential components.

For example, if a farmer tried to create a diagnosis survey while not connected to the web, IndexedDB would store this request as a JSON object; then, once they're back online, Background Sync would detect the connection and synchronize with the server.

YouTube’s PWA journey⁠

When YouTube understood that its users desired improved offline capabilities, they decided to make the web app installable. To tackle the issue of multiple tabs talking to the download server at once, leader election was implemented on the client via the Web Locks API.

Further upgrades to Cobalt included service worker support for reduced latency, Core Web Vitals optimizations, and progressive degradation to video playback that resulted in quadrupled metrics.

Building Flipkart Ads PWA – The journey⁠

With mobile use becoming increasingly popular, Flipkart recognized the need to create a PWA version of their Flipkart Ads desktop app. Network resiliency was a top priority, which they achieved through an altered version of the stale-while-revalidate⁠ strategy that used cached data.

To ensure a frictionless user experience, they employed app rich install via manifest, allowing them to customize the install prompt tailored to local heuristics—after creating an ad campaign, a campaign manager might be asked if they'd like to download the PWA.

Modern PWA: A winning combo for the best client experience

The Intel team continually works with developers to ensure both the necessary software and hardware are in place for creating powerful PWAs. An example of their progress is WebGPU⁠, which is 3.7X faster than WebGL, as well as the Compute Pressure API⁠ that monitors use of a client device.

Additionally, Intel's new chipsets utilize hybrid architecture, featuring two types of cores - Performance-cores and Efficient-cores - allowing PWAs to reduce power consumption without affecting performance.

Expanding developer control on PWA installation

As PWAs have become more immersive over time, installability remains a key feature. To that end, the Chrome team is exploring ways to give developers more control of the install process.

By supporting default offline experiences and eliminating the necessity of service workers for meeting install criteria, developers can rely on their knowledge of their PWA and users to create an effortless onboarding experience that will in turn build stronger relationships with their users.

Progressive Web App PWA Mobile Phone Smartphone

Microsoft at the front

Even though PWAs was initially spearheaded by Google, Microsoft has seriously assumed the mantle of PWA development.

To further encourage developers to create PWAs, Microsoft has released a suite of tools under the moniker “PWABuilder” (also mentioned above) which includes the App Shell architecture, an automated testing tool, and an optimization guide.

This suite of tools simplifies the process of creating PWAs while giving developers access to industry best practices. This development tool has also incorporated Google’s Bubblewrap technology, which provides developers with the necessary tools to package their PWA apps for distribution on the Google Play app store.

Another alternative is Microsoft's PWA Studio. Studio is a VSCode extension that provides powerful tools for developing Progressive Web Apps (PWAs). With the help of PWA Studio, you can quickly convert your existing web app into a PWA, generate a service worker, and audit it to make sure it is ready for publication on the app store.

To learn more about the PWA news in Microsoft Edge, read "What's New in Progressive Web Apps" on Microsoft.com.

Apple coming along

Apple has taken significant steps to adopt progressive web apps and capitalize on the growing trend of PWAs. Not too long ago, Apple announced support for Service Workers and Web App Manifest in its Safari browser.

This feature allows developers to create, distribute and update PWAs just like a native mobile app. Apple is also collaborating with Google to make it easier for developers to build PWAs that run across multiple platforms, creating a more unified experience for users.

There is however still some way to go for full compatibility for iOS users, as this comparison shows. But this is still way ahead of Mozilla, who doesn't support PWAs in the Firefox desktop application.

Three important PWA trends

The future of PWAs looks promising, with a number of trends set to shape the way businesses engage with their customers. Here are three major trends that could lead to significant advancements in the world of PWAs:

Increased mobile adoption

One important trend is the increased adoption of PWAs on mobile devices. As mobile usage continues to grow, companies are racing to build PWAs that can offer users an app-like experience while ensuring compatibility with a range of platforms and devices.

This will allow businesses to deliver more engaging experiences across more channels and reach more users than ever before.

Voice and AI

The second trend is the emergence of voice assistants and AI technology in PWAs. Google has already released tools such as a natural language processor which can be integrated into existing websites and applications to enable customers to interact with a website using their voice.

This convenience could prove majorly beneficial for businesses looking to engage with their customers on a deeper level, providing faster service and resolution times.

Gesture recognition

Finally, when it comes to PWAs, motion-based user interfaces are set for take off this year as well. With features such as gesture recognition available for web apps, users will no longer need to rely solely on clicks and taps for interactions; instead, they can simply use their hands or body movements for navigation and control in order to get the most out of their PWA experience.

Join the PWA community

If you want to make sure that you are keeping up with all the latest news and developments of PWA, join the PWA developer community. This is a gathering place for  developers sharing insights and where you can ask questions about PWA.

Handbook: Introduction to building a design system

First published 25 September 2019, updated 22 December 2022.

Related blog posts

Get some more insights 🤓


Get started with Enonic! 🚀