Exploring the Nature of Progressive Web Apps

What Are Progressive Web Applications and Why Are They Important?

Progressive Web Application (PWA) or Progressive Web App is a type of application software delivered through the web. It is built using common web technologies like HTML, JS, and Web Assembly. PWAs are websites that look and behave exactly like native mobile applications, which means that they can be added to the home screen on a smartphone, send push notifications, access device hardware, and; most importantly; work offline by caching content.

It’s been more than a decade since Steve Jobs introduced the idea of web apps that look and behave like native apps, and it’s been half a decade since the term “PWA” was coined. Developers can just publish the web application online, ensure that it meets baseline “install ability requirements” and users will be able to add applications to their home screen.

To run a native mobile application, a user must follow through 6-7 steps like opening the app store, searching the app using a search bar, loading the app page, determining whether the app is what you are looking for, loading and installing, all before the user even starts using app. This is not the case with web applications where you just need a URL to gain access.

At this point, it is important to note that “Progressive Web Apps” is not a technology or framework, or programming language. It’s more like a set of requirements your web application must meet to properly function as progressive. There are some new things to master in the process, but nothing too complicated.

When a PWA is launched for the first time, it immediately puts all the static resources that its app shell is built off into the cache. The next time the app is launched, it serves the static content from the cache, dramatically improving response time.

What’s all the Fuss About PWAs?

Pinterest rebuilt its mobile site as a PWA and noted a significant hike in core engagements. They also noticed a 1/2x increase in user-generated ad revenue and average time spent. Uber’s PWA takes less than 3 seconds to load on a slow network. BookMyShow PWA is nearly half the size of an android app and 180 times smaller than an iOS app.

How it is Different from a Responsive Web Application?

• Experience: Responsive web design ensures consistent UX across various devices and platforms. PWA is an advanced form of Responsive web design with a mobile-specific environment.
• Codebase: Responsive Web apps share a single code base for web and mobile platforms, and PWAs share a single code base with a mobile-first environment.
• Adaptability: Responsive Web apps provide automatic adaptability according to screen sizes and resolutions, while PWA shares an extra benefit of “Push Notification” and “Add to home screen” prompts.
• Performance: Performance varies based on different platforms and devices

How it is Different from Native Mobile Applications?

• Platform: A native app is specially built for one platform, PWA is an app that runs in a browser and behaves pretty much like a native app.
• Codebase: A native app needs a separate codebase for each platform (Android, iOS). A PWA doesn’t need a separate code base as you don’t need to install it from Google Play or the App store.
• User-Experience: Native apps give an unbeatable user experience due to native hardware access. PWAs give superior user experience through modern web standards.
• Security: Native apps implement additional security layers with the help of built-in device components, and PWAs offer HTTPs encryption.
• Budget: Native apps require a higher budget to write platform-specific code. PWAs are relatively cheaper than native apps as they run on multiple platforms with a single code base.
• Installation: Native apps need to be downloaded from an app store, while PWA provides “Add to Home Screen” prompts and runs directly in a browser.
• Space: Native apps require more device storage space, while PWA requires very little space.
• Connectivity: Native apps consume more data and networks. PWAs work well in slower networks and even offline.
• Time to market: Native apps take longer to create and require verification from the app store. PWAs are quicker to create.
• Push Notifications: Push notifications are available for both iOS and Android with for Native apps, but running PWAs on iOS doesn’t support push notifications.
• Inter-app communication: Native apps support inter-app communication while PWAs don’t.

Pros of PWAs

• Compatibility: Since a PWA is accessed via a browser, it runs on any type of OS and mobile device.
• Lower Costs: Because a PWA is still a website, you don’t need a large budget for its development.
• URL Access: You don’t need to download and install a PWA to start using it. You only need a URL to access it via a browser.
• SEO benefits: Technically, PWA is a website. To this end, instead of launching a marketing campaign, you can rely on SEO benefits for its promotion.
• Memory-friendly: Since a PWA is not installable, it needs only a small amount of memory.
• User engagement: A PWA keeps users engaged with push notifications.
• App-like UI/UX: PWAs feel like native apps.
• Updates: PWAs update without the user clicking any buttons – all new features are available automatically.

Cons of PWAs

• Battery Consumption: PWAs run on technologies that aren’t intended for the mobile environment. As a result, devices need to work harder to interpret the code.
• Limited functionality: Since PWAs are google’s “brainchild,” be prepared to deal with iOS devices not supporting all its features.
• Limited hardware access: Such apps have limited access to software and hardware features. They don’t support features that are not maintained by HTML5.

How to Make a PWA

To make a PWA, the development team can choose any of the following options:

1. Create PWA from scratch, or
2. Convert your existing application into a PWA.

The following steps will help you convert your existing application to a PWA.

Let’s assume you are running some weather application that gives you weather updates based on the location you entered. We would need to configure “service worker” into our existing web application to make it behave as PWA. Before we proceed let’s talk about the service worker.

An important feature of PWAs that we discussed earlier is their ability to work offline and cache content. This caching is performed with the help of a service worker, which is basically a JS file residing in your app but running in a separate thread so that it doesn’t terminate when your app is closed in the browser. In addition to caching, it can send notifications, push messages, synchronize local cache, and can even mock responses (if programmed). A service worker is useful for always keeping your app up-to-date, and is a major advantage compared to mobile apps which you must remember to update.

My application is an angular application and to make this it a PWA, the developer must run the following command.

ng add @angular/pwa

This command will add service worker:true and ngswConfigPath:”ngsw-config.json” entry into the production configuration of angular.json file.

The same command will create two new files manifest.webmanifest and ngsw-config.json

Finally, build the application with production configuration. ng build --prod

This will create a create production build for the application.

Now deploy this application to HTTPS hosted server (as we discussed earlier PWAs run on HTTPS). Users can click on “Add weather-app to Home screen” or “Add to home screen” to install the application to their devices.

Summary

If we compare PWAs with Native mobile applications, we can find a significant difference between the problem one approach tries to solve over the other. In my view, PWA will be a good option if you want to launch your existing web application as a native mobile application in a very short duration and you don’t have enough budget or time to develop the complete application from scratch as a native mobile application.

PWAs also help you to analyze the “what if” of launching your application as a native mobile application. As we already discussed a few limitations of PWA, there are high chances that developers prefer to approach native mobile application development over PWA depending on business requirements and needs.

P.S.: Information has been collected from various sources and after visiting numerous blogs and posts and sharing what I understand and my personal viewpoint. Feel free to share your thoughts and comments below.

Also published here.

Featured image source.