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 this technology now and in 2022.

Introduction to 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 in order 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 are seeing tremendous results from switching to a PWA strategy for their users’ benefit. One major brand that raised a lot of attention by doing this is Twitter, which designed its Twitter Lite app with PWA in mind. Following the rollout of Twitter Lite, Twitter saw a 75% increase in tweets, a 65% increase in pages per session, and a 20% decrease in bounce rate.

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

When 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 skill set 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.

Data from caniuse.com, CC-BY 4.0 license

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.

Data from caniuse.com, CC-BY 4.0 license

The browsers that chose NOT to support PWAs are:

Also, there is a caveat with Safari. Although it provides basic support for the PWAs, not all features are included. Safari does not support push notifications, so the user should install the app manually in order to add it to the home screen.

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.

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 switch back 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 will 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 the 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 development of an 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 support of offline mode, or you need your legacy web application, for example, made with React, to be remade into PWA with the 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.

Another limitation which can prevent you from using PWA is that your app can’t be published in the AppStore, however it’s easy to list it on Google Play and already possible to make it live in the Microsoft Store.

At MobiDev, we start a project from the business analysis stage to identify the key product requirements and help a business owner understand which requirements may provide the most value to the business and which technology stack fits the project goals.

Progressive Web App Development at MobiDev

MobiDev’s web engineering team has gained significant experience in web application development, including progressive web applications, and we are eager to share the best practices we follow:

8 RECOMMENDATIONS FOR PWA DEVELOPMENT