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 manifest (standardized JSON files that instruct the platform on how to install and manage your app). There are also several common design themes that are often pointed to as being unique to 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.
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.
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 which have done the same.
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.
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).
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 that 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.
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.
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.
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.
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.
Although most of the popular browsers support PWAs now, there is no 100% compatibility.
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, and Web NFC API among others. They say it’s for privacy reasons, but this hinders the evolution of PWAs on iOS.
Progressive web apps are by their nature an evolving trend. As such, new developments and added support from 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.
By Siddarth Kheni
April 11, 2024
More from Beact Infotech
Siddarth Kheni
How to Learn React-Redux
Siddarth Kheni
Why node js ?
Siddarth Kheni
5 Reason Why You Should Learn HTML & CSS
Siddarth Kheni
Introduction to PWA
Siddarth Kheni
Things You Need To Know About ChatGPT
Siddarth Kheni
10 Main Core Concept You Need to Know About React
© Copyright 2024 - Beact Infotech. All Rights Reserved
