Understanding Progressive Web Applications

What is a progressive web app? In short, PWAs are web apps that feel and behave like native apps despite being built with technologies like JavaScript, HTML, and CSS. 

Progressive web apps offer familiar features while avoiding data-intensive downloads. The beauty of PWA lies in its ability to deliver a fast and engaging experience, bridging the gap between web and mobile while reducing development complexity and cost.  

Here are the main characteristics of PWAs:

• Progressive enhancement. PWAs offer the same experience across devices and browsers, making sure that basic features are always available. Advanced features are available to users with modern or more advanced platforms. 
• Responsiveness. They adjust to different screen sizes and orientations, so the experience stays smooth whether it is on tablets, phones, or desktops. 
• Offline access. Users can stay connected even when their internet connection is poor or if they’re offline. Service workers cache essential data and keep users connected. 
• App-like feel. PWAs mimic native apps with smooth transitions and full-screen mode. Users can add them to their home screen for easy access.
• Browser compatibility. As progressive apps use standard web technologies, they work on all major browsers without any problems. 
• Easy to find. They’re SEO optimized, so they’re easy to discover and use and don’t need an app store. 

How do PWAs compare with mobile apps and traditional web development? Here is a quick overview:

Technical foundations of PWAs

If you haven’t worked with progressive web apps before, then here are the main technicalities behind it.

Service workers

Service workers are scripts that operate as the middle layer between the browser and the network. They enable PWAs’ advanced features, such as offline functionality, background syncing, and push notifications. Here’s a great visualization of their role between cloud-based CDNs, the server, and the PWA (so the app users see):

Service workers act as a “middleman”. When your app requests access to an asset, the service worker steps in as the proxy. Depending on the situation, it can decide to display a cached version of the resource (through Cache Storage API), serve it directly from the internet, or even generate requested data by using an algorithm.

The option to show cached content is frequently applied to repeat visits. It can cut loading times and significantly improve the user experience. 

As Jayanti Katariya, the CEO of Moon Invoice, told us: “Caching APIs smartly, that is, storing only frequently accessed data by PWAs, helps strike a balance between performance and storage efficiency. If you pair that with testing various offline scenarios to ensure your PWA works properly, you can create a truly resilient and reliable experience.”

Service workers also handle data synchronization and enable real-time notifications even when the app is running in the background. 

Web app manifest

Each PWA has a web app manifest, which is a file that defines how the content should be displayed and behave depending on the operating system. By referring to these rules, PWAs can adjust experiences for web and native-like mobile app experiences. Among others, it’s the manifest that makes it possible to:

• install the progressive web app to the user’s device home screen just like with a native application
• adjust app appearance, including elements like the app’s name, icons, and theme color, while maintaining cohesive branding across different devices
• improve usability and experience, with actions like setting site/app orientation and full-screen display.

Responsive design features

Responsiveness is one of the pillars behind progressive apps. Some of the features that ensure all content is accessible on any screen type include:

• Lightweight assets, which cut the time needed to load all of the app’s assets.
• Fluid layouts, thanks to flexible grids and percentages, adjust content dynamically across all devices.

PWAs also use responsive viewports, which guarantee proper scaling on different screens and orientations.

Business case for PWAs

Why do companies turn to PWA development? There are a few reasons. 

Since it’s possible to install PWAs on the device’s home screen without losing the native-like experience, user conversions from browsers to applications are much higher. For example, the PWA from Debenhams brought a 40% boost in mobile revenue and a 20% increase in conversion. 

Progressive apps are much faster than traditional websites. Thanks to app shell and content caching, pages load quickly, causing immediate responsiveness. This not only results in higher user satisfaction but also positively affects performance. 

We’ve already briefly mentioned that PWAs have better SEO support than traditional websites. This means that it’s easier to find them in search results. Why is that? It’s not a secret that search engines favor pages that load quickly and completely. PWAs are efficient, and Google bots can index their content even in offline conditions, which improves visibility in search results. After Kubota launched their e-commerce PWA, their daily visitors grew by 192%, while the average number of monthly visits improved by 26%. 

The cost-effectiveness of PWA development is also a strong argument. Building a progressive app is cheaper than creating two native apps for iOS and Android. PWAs use a single code base which lessens development and maintenance costs. They offer a seamless experience across platforms and devices without the need for platform-specific changes. Businesses can still cater to a larger audience without the need to build multiple app versions. 

Let’s now take a look at some PWA examples. 

TALLY WEiJL 

TALLY WEiJL, a global fashion retailer, decided to develop a PWA to better address Gen Z’s mobile-first shopping expectations and become more innovative. The brand faced challenges with a monolithic Magento architecture across 14 localized webshops. They wanted to find a flexible, mobile-friendly solution that allowed for frequent user experience updates without disrupting backend operations. 

PWA seemed the right choice. Since introducing the progressive app, TALLY WEiJL experienced a 131% increase in mobile revenue, a 140% rise in conversion rate, and a 45% growth in page views. Pretty impressive, isn’t it? And that’s not all. PWA’s agility and improvements in performance also led to more customer satisfaction and supported the brand’s omnichannel strategy. 

AliExpress 

AliExpress, a global e-commerce giant, knew that mobile commerce was becoming more important, but it couldn’t optimize its website to provide the same experience as the native app. Although its app offered an engaging experience, many users hesitated to download it. To bridge this gap and convert non-app users, AliExpress turned to a Progressive Web App (PWA).

The PWA offered faster load times (just 3-5 seconds), smooth navigation, offline capabilities, and automatic updates that reduced user effort. The results were far more than satisfactory—a 0.4% increase in new users, an 82% jump in iOS conversions, double the pages viewed per session, and a 74% boost in session time.

PWAs can help brands improve in-app user experience 

The PWA examples above – and, particularly, the rise in return visits, session length, and number of conversions – are living proof that progressive apps are enjoyable to use. When you step into the end user’s shoes, a PWA offers a seamless experience. It delivers content quickly, works even without an internet connection, and adapts flawlessly to any device.

Also, when a user installs a PWA on their mobile device, they get access to push notifications, which adds to the user’s convenience. The app also updates in the background without sacrificing data security thanks to using PWAs’ must-have HTTPS protocol.

Tools and frameworks for smooth PWA creation

Here are the popular solutions used for PWA development, starting with the most famous frontend framework out there:

ReactJS

Almost 7 out of 10 frontend developers use React in their work, according to our State of Frontend report, so I’m sure React doesn’t need a formal introduction. It makes sense that this framework is a popular choice for progressive website development if we consider React’s component-based architecture and the ability to build interactive, dynamic interfaces. The latter is possible thanks to React’s virtual DOM, where developers can build UI components that automatically update when there is a change in data.

Here are some of the reasons why ReactJS is a good choice for Progressive Web Apps:

• It’s a lightweight JavaScript library
• It lets you create both single-page and multi-page apps, so it fits projects of various sizes
• ReactJS integrates well with other frameworks and website development tools, which introduces more flexibility into the development process
• It comes with extensive documentation, libraries, and a wide developer and support community
• It offers easy third-party tool integration, making React-based PWAs more versatile and scalable.

Next.js

It’s safe to say that Next.js is among the top frameworks for building Progressive Web Apps. Based on React, it offers useful features for PWA development, like server-side rendering. While it doesn’t have built-in support for service workers, developers can easily integrate them to enhance PWA functionality.

Developers can use Next.js to create a web app manifest, a JSON file that holds key details about the PWA, like its name, icons, theme colors, and other metadata. This file plays a crucial role in making PWAs installable, bridging the gap to native mobile apps.

It also boosts performance by automatically splitting code. This means each page loads only the JavaScript and CSS it needs, keeping things fast and efficient.

In addition, Next.js makes PWAs more SEO-friendly, which helps them rank higher in search engines. Better visibility leads to more users discovering the app and engaging with it!

Magento PWA Studio

Magento PWA Studio is a suite of tools that developers can use to build PWA with the support of the Magento eCommerce platform. It includes everything you need to create, deploy, and manage a PWA, such as creating user interfaces, managing data, and testing the application. The best part? You can use Magento’s existing infrastructure, saving you a lot of time and effort. Here are a few more reasons why it’s worth considering Magento PWA Studio:

• Optimized e-commerce features. Magento PWA Studio is specifically designed for e-commerce, offering ready-to-use components like product listings, checkout processes, and payment integrations tailored for online stores.
• Enhanced performance. It delivers faster loading times, offline functionality, and responsive designs, providing a seamless shopping experience across devices, even with slow internet connections.
• Customization and scalability. Magento PWA Studio provides a flexible architecture, making it easy to customize and scale the PWA as your business grows or customer needs evolve.
• SEO and marketing benefits. Built-in SEO optimization tools ensure better search visibility, while features like push notifications enhance user engagement and retention.

Performance optimization techniques

Service workers for caching, preloading, and prefetching

Service workers API is one of the main caching strategies you can use when building a PWA (right next to Fetch API and Cache API). Whenever your app requests a resource that’s managed by your service worker, the browser triggers a ‘fetch’ event. As Mozilla explains, “This event is fired not only for explicit fetch() calls from the main thread, but also implicit network requests to load pages and subresources (such as JavaScript, CSS, and images) made by the browser following page navigation.”

It’s the fetch event that lets service workers intercept requests and decide on the right response — be it serving a locally cached asset (which was preloaded and prefetched) or connecting to the network if the internet connection is stable and fast.

Lazy loading

In this performance optimization technique, images are only loaded when they’re in the app’s viewport. This allows postponing what’s defined as non-essential content (think of images or additional scripts) until they’re truly needed. As a result, the speed of the first loading is faster, which improves the overall in-app experience and lets users focus on the tasks for which they came to the app.

Asset compression and minification

You can minify CSS, HTML, and JavaScript to remove unnecessary characters in the source code. This can be done using tools like Rollup or Terser. It’s also worth compressing images to reduce file sizes (for example, using Brotli). You can turn them into a format like WebP and use lazy loading to show images only when a user has them in view. In essence, the smaller the assets and files in your app, the better your app’s performance.

Code splitting and tree shaking

Code splitting lets you break your code into smaller chunks so you can load the necessary parts of code only when you need them. Here’s an example of how to run code splitting if your PWA app is built using Magento PWA Studio. 

Meanwhile, tree shaking, as the name implies, is about removing unused code from your codebase. The lighter the code, the less lag time your app will experience, making it load and run more efficiently for users.

Cross-browser and cross-device compatibility considerations

Each browser has a dedicated rendering engine and may interpret HTML, CSS, and JavaScript differently. Cross-browser compatibility guarantees that your PWA works well and offers a consistent experience across all browsers. Without compatibility, your PWA might look good on Google Chrome, but a lot worse on Safari. This could result in a loss of users.

Here are a few aspects to consider to ensure your PWA is compatible with different browsers and devices:  

Browser support and compatibility

Each browser may support different web technologies like service workers, web app manifests, and push notifications. To ensure compatibility, you’ll have to test your PWA across browsers using tools like BrowserStack or Sauce Labs and use polyfills or feature detection to handle unsupported features.

Responsive design

PWAs need to be responsive. Implementing flexible grid layouts, media queries, and mobile-first design ensures that the app provides an optimal experience regardless of the used device.

Offline and slow network performance

PWAs should work well even when the internet connection is poor or non-existent. Service workers can cache key assets for offline access. However, to enable this, you need to ensure proper caching strategies and fallback mechanisms to deliver a smooth experience on devices with inconsistent network conditions.

Marin Cristian-Ovidiu, CEO of Online Games, said that successful PWA development isn’t just about technology—it’s about creating delight.

“Treat connectivity as a bonus, not a default. Games must load instantly, even if players are on a plane or in a basement. Pre-cache assets smartly to ensure a seamless experience and prioritize lightweight, efficient data use. Beyond technical benefits, this strategy builds user trust, as players know your app won’t fail them. In gaming, lag kills. In PWAs, dependency on connectivity is just as deadly,” adds Cristian-Ovidiu. 

Performance optimization
PWAs must be optimized for both high-performance desktops and resource-constrained mobile devices. This includes strategies like lazy loading, asset compression, and minimizing JavaScript to improve load times and responsiveness.

Elisa Branda, CEO at Nuvole di Belleza, said that it’s necessary to prioritize performance from the start.

“In one project, we noticed sluggish load times during testing. By using lazy loading for images and third-party scripts, we reduced initial load time by 40%. A fast PWA not only improves user experience but also boosts engagement and retention. Test early and often using tools like Lighthouse to identify bottlenecks. Small adjustments can dramatically impact usability. Readers should remember, speed isn’t optional—it’s expected,” added Branda.

Browser-specific CSS issues
Different browsers may render elements differently, so using normalization libraries like Normalize.css or employing CSS feature queries can help guarantee consistent design. Tools like Autoprefixer also add vendor prefixes to handle differences in CSS property support across browsers.

PWAs will continue shaping the future of web development

A vast majority (84.1%) of the frontend developers whom we surveyed for our SOFE report said that they don’t expect groundbreaking changes for PWAs in the foreseeable future.

35.1% believe that its popularity will slowly increase, 32.2% – that it will stay the same, and 16.8% – that it will slowly decay. 

Another statistic that speaks in favor of PWAs’ role in development is that 1 in 5 developers use them to build mobile apps, making them the third choice after native and React Native. 

To understand developer sentiment towards PWAs, it’s worth referring to Apple’s controversial (and now reversed) decision to remove PWA capabilities in iOS in the EU. Early in 2024, they met with heavy criticism from the web development community, who underlined the importance of PWAs for their businesses and building enjoyable in-app UX. 

But why did Apple assume they could step away from PWAs in the first place? This is likely due to the numerous limitations that have come to light in recent years. 

As Marek Gajda, COO at The Software House, said, having one codebase operating over multiple platforms and offering a native-like experience without needing app store approvals looks great—on paper. However, developers might often build apps that are too complex and try to run too many processes at once. He raised the question: “If a simple website or native app could more efficiently meet the user’s needs, why invest in a hybrid solution that introduces additional layers of complexity?” 

Using PWAs in this manner would contradict the very idea that this technology was supposed to offer and could make it difficult to achieve the expected return on investment.

So, how can developers continue using PWAs in a manner that brings forward their capabilities and biggest strengths? Dane Nk, Founder of That VideoGame Blog, shared his bold take on the topic: 

“Stop chasing ‘native app-like performance’ and start embracing the browser’s strengths. PWAs excel because they’re universally accessible, lightweight, and update-free. Instead of mimicking apps, lean into progressive enhancements, prioritize offline capabilities, and master service workers for smooth caching,” Nk says, leaning into a gaming analogy. “Think of it like a great game—optimize the core experience before adding flashy features. The result? A PWA that feels better than native apps, not just similar to them. For gaming and beyond, that’s the future users deserve”.

In summary, while PWAs aren’t likely to disappear in the coming years, it’s going to be interesting to see how they stand the test of time (and rising competition from new web development technologies). We’ll surely revisit PWA usage statistics and their role in the next edition of our State of Frontend report.