Progressive Web Apps (PWA) are growing and so is the demand of PWA developers. This article is an introduction to PWA and talks about why PWA and PWA advantage over traditional web and mobile apps.
The number of web and cloud apps is growing every day. Today, there are 2 billion websites in the world and among them, 400 million are active. Mobile apps are growing at an even faster pace. There are close to 4.2 billion mobile apps in the world consumed by 4 billion mobile internet users. If you look at the global mobile app market, it is captured by two companies, Google, and Apple. The global mobile operating system market is dominated by Google’s Android with a 74% share and Apple’s iOS is 23%. Native apps are not confined to mobile. Windows has always had a rich native application eco-system. Windows applications are typically written in C#, C++, or even C. Other platforms, like Linux, cannot be excluded. We can classify these as desktop or workstation-based applications.
There are several technologies to build mobile apps and native apps are the most common way to build mobile apps. Apple’s Swift is used to build native iOS apps and Java/Kotlin are used to build Android native apps. Third-party tools including Xamarin, Reactive Native, Flutter, and NativeScript are some of the popular platforms used to build native apps. Hybrid platforms are another popular way to build mobile apps that use HTML, CSS, and JavaScript to build hybrid mobile apps. The newest technology in this field is progressive web apps.
PWA or Progressive Web Apps is a technology for building modern Web applications for mobile. Technically, a progressive web app is a web application written in HTML, CSS, and JavaScript and runs in a Web browser. A PWA can also be written using popular web frameworks such as Angular, React, and ASP.NET Core.
Why PWA?
Typically, languages used to develop Web applications are different than native mobile apps. No one language or technology covers both native and web. The application layer where a web app and native app differ is the front-end side. For example, HTML, CSS, and JavaScript are used to build web applications. Native requires one of the previously mentions platform-specific languages.
Other common technologies used to produce web applications are Angular, React, Vue, Ruby, Node, ASP.NET Core, and PHP. Those technologies reside either above the UI or on the server/cloud.
Java and/or Kotlin is the most common technology to build native Android apps and Swift is now the technology to build iOS native apps. Even when using a third-party platform like Xamarin the code must be transpiled to these native languages as they are compiled.
A classic web application/site has the following limitations:
- Served from a web server and web pages are served via a web browser.
- Requires internet connectivity.
- Runs within the visible confines of a browser.
- Does not support native notifications.
- Has limited access to device resources.
- The performance of a web application can be bad on a slow internet connection.
The above limitations of web applications lead businesses to build native mobile apps.
Even with latency in implementing the latest native APIs, the web has almost 100% feature parity with native. It does depend on the browser. Edge and Chrome are the leading browsers with Apple’s Safari lagging several years behind.
Even with Safari’s limitations many features can be polyfilled or ignored, as they are often not critical to an application’s success.
Now, here comes the biggest challenge for a business. To support both mobile and Web, a business must build and maintain two different technologies, one for Web and one for native. Native is then split among multiple platforms for many applications (iOS, Android, and Windows).
Not only it leads to a longer development period but also it becomes a costly affair. Post-deployment is not cheaper either. A business must maintain two or more different code bases and experts from separate technologies. For example, if a business builds a Website in Angular, and native mobile apps in Kotlin and Swift, it requires developers from all three technologies.
The idea behind PWAs was to have one technology that can make a Web application function, like a mobile app that not only gets developed cheaper. but to maintain and support it the business only needs experts in one technology.
Progressive Web Apps vs Native Apps
Swift and Objective-C are two programming languages to build iOS targeted native apps. Java and Kotlin are two programming languages to build Android targeted native apps.
Native apps have their own benefits. The key advantages of native apps are the following:
Key Features of Progressive Web Apps
The key features of PWAs include native app user experience, work offline, push notifications, and device hardware access.
1. Progressive and Responsive
PWAs support the majority of the modern browser with newer capabilities. The responsiveness of PWAs makes them fit and display well on mobile phones, tablets, laptops, and desktops. That means, once you build a PWA, you don’t need to worry about what browsers or devices users use.
2. Native Experiences
The key functionality that separates a native app with a browser Web app includes native user experience, app icon on the mobile device screen, search in the app store, and push notifications. PWAs support all these key features.
3. Service Worker
A service worker is a key component of PWAs that allows an app to provide offline sync, local caching, push notifications, and communication between the worker thread and the main browser thread. A service worker cannot access local storage and DOM directly. To support local storage and DOM access, there are different workarounds.
4. Supports a wide range of web technologies
The only key difference between a PWA and native apps is the technology and where the app runs. A PWA is a web application and is served from a web server. A native app runs on a local device.
A well done PWA can run locally, just like a native application. On Windows and Android, the add to home screen process even compiles the PWA to a native app on the platform.
While PWAs are written in web technologies, native apps are often written in proprietary technologies designed for a specific platform only. For example, Apple iOS apps are written on Swift and Objective-C, and Android apps are written in Java and Kotlin respectively. PWAs can be written in any web technologies such as a combination of HTML+ JavaScript, React, Angular, or ASP.NET Core.
Limitations of Progressive Web Apps
The idea of PWAs sounds amazing. So, why isn’t every mobile app a PWA then? Here are some of the PWA’s limitations.
PWA is not native. Some app developers and users just love native. Native user interfaces are often changed when a new operating system is launched. Most of the native functionality is backward compatible.
PWA needs and runs in a browser. It is still a Web application and you need to be a Web developer to write PWAs.
New OS features support is often delayed in PWA as they matriculate through standard committees and browser teams.
Advantages of Progressive Web Apps
Besides the above key features, some additional advantages of PWAs include the following:
Faster development. PWA is only one application that functions as a web app as well as a mobile app. It is a Web application hosted on a web server and runs in a web browser.
One codebase. Web and mobile apps can be developed as the same codebase and support all devices and browsers.
Low maintenance. It's all developed and deployed on a web server, it has centralized control over the deployment and updates.
What is a Service Worker in Progressive Web Apps?
A service worker is a vital part of progressive web apps. It is a web worker that runs in the background thread without impacting the main browser thread. It is a JavaScript file that is responsible for intercepting network requests, caching, offline storage, push messages and notifications. A service worker helps improve performance of an app by using caching and offline storage.
If you have worked with web workers in the past a service worker will have a familiar feel. The key difference is a service worker intercepts all network requests and allow you to determine how that request will be handled.
Service workers use the following four APIs:
- Push Notifications API (not available on iOS) that allows app to work with operating system’s native notification system. Push messages handled by a service worker and does not need to run a browser.
- Background Sync API that syncs app in the background without impacting the main browser thread’s performance (limited to Edge and Chrome).
- Channel Messaging API allows web workers and service workers communicate with each other and with the host application.
How Does a Progressive Web App Work?
To make a web app a progressive app, a web app manifest, service worker and using HTTPS are the main requirements. Beyond these features it is up to you which enhanced web APIs you leverage to deliver the user experience.
Web App Manifest
A web app manifest adds native mobile app experience to a web application that includes a home app icon, splash screen, and launching an app from the icon in full-screen mode without a browser URL bar. The manifest also manages the app rotation and typography on different mobile screens.
The manifest file for a web application is a JSON file named manifest.json that is used to how an app will appear on the home screen, how it can be launched, what images and icons to load for what sizes, start URL, display mode, background color, and theme color.
Here is an example of a simple manifest.json file:
Sachin SinghPosted Oct 20, 2020, 10:35 AM
Thanks a lot sir for sharing this, very helpful and now i have no doubt on this topic.
Vipan SharmaPosted Sep 29, 2020, 2:08 AM
Thanks a lot for the information sir
Atul SharmaPosted Sep 9, 2020, 4:10 PM
A Great package of information. It gives a complete overview of PWA. I had some idea but this completes my lacking knowledge on the topic. Thanks for the nice write-up Mahesh Chand
vivek kumarPosted Sep 9, 2020, 12:55 AM
Hi Sir, Link for www.mindcracker.us. not working.
Bhasker DasPosted Sep 8, 2020, 1:13 PM
Revolutionary information.