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 . There are some new things to master in the process, but nothing too complicated. set of requirements your web application must meet to properly function as progressive 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? 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. Platform: 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. Codebase: : Native apps give an unbeatable user experience due to native hardware access. PWAs give superior user experience through modern web standards. User-Experience Native apps implement additional security layers with the help of built-in device components, and PWAs offer HTTPs encryption. Security: : 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. Budget : Native apps need to be downloaded from an app store, while PWA provides “Add to Home Screen” prompts and runs directly in a browser. Installation : Native apps require more device storage space, while PWA requires very little space. Space : Native apps consume more data and networks. PWAs work well in slower networks and even offline. Connectivity : Native apps take longer to create and require verification from the app store. PWAs are quicker to create. Time to market : Push notifications are available for both iOS and Android with for Native apps, but running PWAs on iOS doesn’t support push notifications. Push Notifications : Native apps support inter-app communication while PWAs don’t. Inter-app communication Pros of PWAs : Since a PWA is accessed via a browser, it runs on any type of OS and mobile device. Compatibility : Because a PWA is still a website, you don’t need a large budget for its development. Lower Costs : 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. URL Access : Technically, PWA is a website. To this end, instead of launching a marketing campaign, you can rely on SEO benefits for its promotion. SEO benefits : Since a PWA is not installable, it needs only a small amount of memory. Memory-friendly : A PWA keeps users engaged with push notifications. User engagement PWAs feel like native apps. App-like UI/UX: : PWAs update without the user clicking any buttons – all new features are available automatically. Updates Cons of PWAs PWAs run on technologies that aren’t intended for the mobile environment. As a result, devices need to work harder to interpret the code. Battery Consumption: : Since PWAs are google’s “brainchild,” be prepared to deal with iOS devices not supporting all its features. Limited functionality : Such apps have limited access to software and hardware features. They don’t support features that are not maintained by HTML5. Limited hardware access How to Make a PWA To make a PWA, the development team can choose any of the following options: Create PWA from scratch, or 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 and entry into the production configuration of angular.json file. service worker:true ngswConfigPath:”ngsw-config.json” The same command will create two new files and manifest.webmanifest 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.

Exploring the Nature of Progressive Web Apps

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

10 Useful JavaScript Functions to Learn

10 Cool Angular Material Admin Dashboard Templates

13 Angular App Optimization Tips for Frontend Developers

25 Stories To Learn About Angularjs

16 JavaScript Protips [2020 Edition]

142 Stories To Learn About Angular

10 Useful JavaScript Functions to Learn

10 Cool Angular Material Admin Dashboard Templates

13 Angular App Optimization Tips for Frontend Developers

25 Stories To Learn About Angularjs

16 JavaScript Protips [2020 Edition]

142 Stories To Learn About Angular

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps