Everything You Need to Know About Progressive Web Apps

When talking about web development, Progressive Web Apps have been a buzzword for a while. But will your company benefit from going down the PWA road? Read how and when you should use and should NOT use Progressive Web Apps now and in 2022.

Introduction to Progressive Web Apps (PWA)

Progressive Web Apps (PWAs) are a fairly recent trend in web and mobile app development. Coined by Google engineer Alex Russell in 2015, the term refers to web applications that use “progressive” design approaches to behave and function similarly to native apps. What that specifically means may not be perfectly clear, as there is no precise definition of what does or does not make a progressive web app.

However, there are some defining characteristics that are indicative of PWA design patterns. These include the use of ServiceWorkers (background scripts that run in the browser in order to provide features like push notifications) and app manifests (standardized JSON files that instruct the platform how to install and manage your app). There are also several common design themes that are often pointed to as being unique to PWA.

Benefits and Drawbacks of PWA

Employing progressive web app technology in an application’s development has many benefits, though there are also some drawbacks to consider. The main benefit of PWA design is that it is mostly platform-independent. This means that an app can be developed using a single codebase and deployed on several different platforms.

Simplifying the development in this way reduces the time and resources necessary to get an app to market. Platform independence combined with the fact that PWAs are inherently installable makes an app’s rollout onto multiple platforms easy. Users can download and install PWAs just like they can with any native app, rather than relying on a browser to access them, making the user experience seamless and intuitive.

PWAs also enjoy the benefits of modern website design in that they are responsive and lightweight. Modern web browsers allow developers to take advantage of design options that react to changing platforms and screen sizes to give users a consistent experience. The codebases of these modernized apps are smaller, and their ability to run in a browser (rather than as a native app) makes them lightweight. An added benefit of PWAs as distinct web apps is that they are discoverable by search engine indexing.

However, the major drawback to PWA design is that there are some limitations on platform and hardware support. Since PWAs run in a browser, they do not have direct access to all of the capabilities of a platform that a native app built using a platform’s SDK would have access to. Some platforms also have restricted support for these apps, though support and capabilities are constantly evolving.

Why Use PWA?

Ultimately using PWA design in an application is for those who want to get an app in the hands of users quickly and affordably. This design is great for early-stage startups with limited funds who want to get an MVP app to market as soon as possible. But any company wishing to take advantage of an evolving trend in modern app development will also see similar benefits from PWA.

Big Brands That Use Pwa

PWAs are not just meant for small companies and cash-strapped startups. On the contrary, many global corporations see tremendous results from switching to a PWA strategy for their users’ benefit.

Forbes and Pinterest also designed PWAs for their businesses, with Forbes seeing a 43% increase in sessions and a 100% increase in engagement. Pinterest’s PWA brought in a 44% increase in user-driven ad revenue. These are just a few examples of companies adopting PWA design in their apps, among other recognizable brands like Uber and AliExpress, who have done the same.

PWA Compared to Other Technologies

PWAs are most easily compared to either native apps or web apps, existing somewhere in between the two. But there is a long list of specific technologies that lie on the spectrum between web and native, which can also draw comparisons to PWA.

PWA vs. Native Apps

Comparing PWA directly to the general definition of native apps unveils a few differences. Namely, PWAs are built with lighter and simpler codebases (requiring only web languages rather than platform-specific SDK frameworks).

PWA vs. Cross-Platform Apps

Compared to more hybrid technologies like React Native, PhoneGap, or Flutter, there are certain details to highlight for cross-platform apps. For instance, React Native is made for building cross-platform native apps and achieves that with a single codebase, however usually it requires a broader skillset from your development team as they have to deal with various native controls and plugins which are written in different languages like Java or Objective-C (depends on the platform).

PhoneGap apps are somewhat similar as well. These are just web apps that are wrapped in a native container, which has access to various platform APIs through a set of native plugins. Despite the huge list of available plugins, you might need something custom and will have to implement it on your own, again with the help of Android and iOS developers.

PWAs are much simpler in this sense and are usually built just in JavaScript, utilizing modern frameworks like React, Angular, and Vue.

To sum it up, the PWAs most closely resemble the hybrid apps built with other cross-platform technologies. PWAs most likely will be cheaper in terms of development and future support, as you might need a smaller team without any specific or unique skills. The downside to PWAs is that they are limited by browser capabilities and may have poor support of some core features required for your app.

PWA vs. Web Apps

When compared to pure web applications, PWAs show several advantages. This is because web applications are strictly limited by the capabilities of the browser. That also means web apps do not offer the kind of installability that makes a PWA so convenient for users. While they can offer similar benefits, such as the responsive and lightweight design seen in many single-page applications (SPA), the key differentiator is a PWA’s standardized approach to simulating the native experience.

PWA can also be compared to application frameworks like Electron and Flutter. Electron is strictly a web app framework with disadvantages in application size and security that make it generally unsuitable for PWA development. But Flutter is more similar to PWA. Both PWA and Flutter emphasize development in a single codebase with cross-platform native functionality. However, Flutter only uses the new Dart web language, whereas a PWA can be written in any language, with many older languages offering more support.

PWA Support from Major Platforms

One of the most important things to evaluate about PWA is what kind of support major platforms provide. While PWA generally allows the development of applications that are perfectly capable of running on any platform, there are some limitations to what exactly different platforms will support.

PWA Support on iOS

For iOS devices, PWA support is somewhat limited. Even though the term “progressive web app” was only recently coined by Google, the origins of PWA can actually be traced back to the very first iPhone. Before Apple provided an SDK for iOS devices, the only apps available on iPhone were web apps. This is a decision that Steve Jobs himself was very insistent on.

Of course, as developers asked for a more consistent workflow, Apple eventually released their SDK along with the App Store. This evolution went along with Apple’s notoriously strict regulations for developers around user experience and the security of apps available in the App Store. These regulations, unfortunately, severely restricted the ability of developers to provide PWAs for iOS.

As of iOS 11.3, however, PWAs are supported on the Apple platform. However, they must still be wrapped in native code and distributed via the app store. This limits some of the benefits of PWAs, like a simplified codebase and easy installation.

PWA Support on Android

Android has much more thorough PWA support. This is mainly thanks to Android’s open-source approach which gives developers the freedom and flexibility to write and distribute apps however they wish. Android also provides PWAs with access to some native platform functionality such as push notifications, enabling developers to provide a more seamless native experience within their apps.

Browser PWA Support

Although most of the popular browsers support PWAs now, there is no 100% compatibility.

The browsers that chose NOT to support PWAs are:

• Desktop Firefox
• Internet Explorer
• Facebook Mobile Browser

In addition to this, in 2020, the WebKit, Safari’s engine, announced that they are not going to support many of the APIs that give access to the native functionality. Examples of such unsupported features are Web Bluetooth, Web MIDI API, Magnetometer API, Web NFC API, among others. They say it’s for privacy reasons, but this hinders the evolution of PWAs on iOS.

However, the new coming Windows 10X plans to fully support PWAs soon.

The Current State of PWA in 2021

Progressive web apps are, by their nature, an evolving trend. As such, new developments and added support by major platforms are constantly contributing to the growth of PWAs. While the imprecise definition of PWA makes it difficult to track an exact market share, estimates based on Chrome web statistics put the current number of PWA-like page loads at about 19%.

A survey of e-commerce decision-makers revealed that 9% of e-commerce companies planned on investing in progressive web apps (PWA) in 2021. Additionally, 8% of e-commerce companies reported that they are already doing it, and 28% of companies did not have plans to invest in PWA in 2021.

Research suggests that the financial value of the progressive web application market will reach a value of 10.77 billion dollars by 2027, representing annual growth of over 30% between now and that time.

Current support for PWAs is fairly good though there are some limitations. Every major platform, including iOS, Mac, Android, and PC, now offers some level of PWA support. Android provides the best support, with iOS and Mac being the most limited. Apple’s strict control over the apps available on its platform is the biggest hindrance to PWA’s adoption on iOS.

Developers and project owners considering PWA in their own applications should consider these limitations. The PWA market is steadily growing, along with platform support, so early adopters may find themselves ahead of their competitors. But it is tough to tell exactly how long this growth could take.

Interestingly, earlier this year, Instagram Lite was rebuilt from PWA to a native Android app. The reason for this switchback is not clear, but there are some speculations that Facebook did this to test out their internal framework Bloks.

What to Expect of PWAs in 2022?

The bright side is that there are some significant improvements in the PWA market. One recent positive development for PWAs is a partnership between Microsoft and Google. Microsoft recently announced that PWABuilder would be using Google’s Bubblewrap technology. PWABuilder is Microsoft’s development tool that makes writing PWAs easier, and Bubblewrap helps developers package their apps for distribution on the Google Play app store.

This announcement came along with the introduction of support for new features, including native app shortcuts and advanced Android features now available through PWABuilder. The collaborative efforts of tech giants like Google and Microsoft are extremely promising for the future of PWA adoption.

Should you use PWA in 2022 and beyond?

The answer is YES if your product strategy requires fast market entry and coverage of multiple platforms with a single codebase. Progressive web apps allow startup companies to quickly and easily develop and distribute a progressive web app and benefit from the minimal time and money needed to roll out the app in the case of limited resources. Encouraging first-time users to revisit the application and getting them engaged with the help of push notifications and in-app banners make PWAs the powerful tool for marketing strategy implementation.

Larger corporations can also benefit from providing value to their users with limited access to high-performance platforms or who prefer a more streamlined, lightweight experience. PWA can be a choice for the development of enterprise software tied to a selected single platform to benefit from the important native features supported exactly by this platform.

Other frequent use cases for PWA are when your application requires the support of offline mode, or you need your legacy web application, for example, made with React, to be remade into PWA with minimal time in comparison to building a new app from scratch, for example, in Flutter for Web.

When You Should NOT Use PWA

While there are some drawbacks of PWAs, these are minimal and mostly outweighed by their benefits. The biggest restriction for PWAs is their limited support on iOS, which obviously comprises a significant portion of the mobile app market share. There is some support, however, and Apple’s changing stance on PWA in the past shows that they are willing to evolve with it.

8 Recommendations For PWA Development

1. The PWA should feel like a native app – it’s a good practice to show splash screens during the application startup; the app should have a set of icons of different sizes that will be used on the home screen as the app logo and a properly configured theme.
2. Some browsers still do not have the complete support of manifest.json, so you have to fall back to meta tags, e.g., to specify theme or tile colors in Safari or Microsoft Edge.
3. Make sure to always promote the app installation. The app installation or “add to home screen” functionality along with push notifications are the killer features that dramatically improve conversion rate and users re-engagement.
4. If your app needs offline mode support or you simply want to use enhanced caching strategies in order to reduce the network traffic and decrease page load time – we’d recommend you to check out the official set of libraries from Google, which is specifically designed to solve these problems and ease the PWA development.
5. Whenever the new version of the PWA app goes live, we must let the user know about the available updates. We may achieve that by displaying custom in-app banners or notifications, prompting a user to update the application. Please note that the ServiceWorker won’t automatically update until all the application windows or tabs that are using the previous version are closed. If we don’t show the banner, the user might not know about the updates for quite some time.
6. As we said, some users might not update the app right away and will be using the old versions. In this case, it’s absolutely crucial to have backward compatible APIs on the server.
7. Make sure to thoroughly test the code, especially the app initialization logic. In case the app crashes during its initialization and it hasn’t yet established a subscription for the incoming ServiceWorker updates, the user’s device might be stuck with a buggy app version until it’s manually reinstalled. It’s recommended to always create some fallbacks to automatically unregister the active ServiceWorker in case of unhandled application errors – in this case; you’ll be able to quickly deliver fixes to the end-user.
8. The PWAs should be fast. You may test and debug the performance using Lighthouse and other Chrome DevTools.

Of course, we are following all other best practices applicable to regular web app development:

• Create responsive and adaptive web applications that properly work on all platforms regardless of whether it’s mobile, tablet, or desktop.
• Follow the established code style in the team, or establish it yourself by configuring the pre-commit git hook, which will invoke code linters and formatters.
• Write strictly typed code if possible (e.g., using TypeScript).
• Design component-based applications. Decouple UI and business logic. Create simple and reusable components that are easy to compose into a complex UI.
• And, of course, perform code reviews and help each other!

Written by Evgeniy Krasnokutsky, AI/ML Solution Architect at MobiDev.