Heard about Progressive Web Apps?
Have you heard about Progressive Web Applications(PWA)? I got to know about this very recently and thought to write a small note about PWA.
Mobile application development has matured over the time, but cross platform application development is still evolving. Application development is becoming technically complex due to several reasons. Reasons such as device fragmentation, the parallel usage of several versions and possibly vendor-specific additions complicates application development. The need of applications to run on different devices such as smart phones, tablets, TVs, gaming consoles, wearables, or IoT devices make the developers life hard.
Several years ago, when you build a mobile application and if you want to support both Android and iOS, you may develop separate applications for Android and iOS. But today, if we are building a web application, we can still go with platform-centric or native development, or else there are cross platform application development, which has only one codebase, for multiple OSs. Progressive web apps is another approach that we can follow to build cross platform applications. If we talk more about these three types of mobile app development methods,
Platform centric or native apps are built only for one specific OS. As example, Android(Java, Kotlin), iOS(iOS, Objective-C and Swift) or Windows(C++, C#, Visual Basic and JavaScript)
Cross platform apps are providing uniform development interfaces to build applications that can run on multiple operating systems. (Frameworks: Flutter, React Native, Ionic, Xamarine, PhoneGap)
PWA combines Web technologies to achieve functionalities of native apps.
What are PWAs?
If we compare PWA with a basic web application, main differences is added functionality and UX that is provided by PWA, which is closer to the native applications. A regular web app requires a user to open a browser, type URL and wait for the content to be downloaded on every visit. So, this prevent the user to use the application offline. A PWA can download all necessary details, files and images and store them inside the user’s device, which allows the user to use the application offline or in a low connectivity area.
If we compare PWA with a native or cross platform application, the main advantage is PWA leaves a minimal foot print in the user’s phone. Other main difference between PWA and native apps is PWA is very small as half a size of native app.
If we speak technically, Progressive Web App is a regular Web site with a JSON-based meta data document (manifest), an Application Shell and a background script (Service Worker) written in JavaScript.
Service worker is the script which is written to handle all the network, caching logics, background tasks. And all the modern browsers support this service worker. You can see the service worker support for browsers from here.
To test these kind of applications, Google has released a developer-oriented PWA testing tool named Lighthouse.
Technical Limitations for PWA
Native or cross-platform development allow most of the open device APIs to be used in the native SDKs. For PWAs these APIs should be accessbilbe through the browser. But browsers are continuously increasing the support and introducing the supporting modules to them in-order to achieve them. Another limitation would be increasing number of OSs, versions of same OS, different browsers that are used. These kind of fragmentation make it harder to use PWA as a unified development mechanism for mobile applications.
Examples for PWA
- Medium
- Uber
- Spotify
PWA is still eveloving. It needs so much of improvements and most of the applications that provide PWAs do not support all the features given by the native applications. But we can hope that eventually PWA will be improved to be the unified development mechanism for mobile applications.
Finally, if you are wondering how to install PWA in your mobile device, here the steps to follow.
How can I install my Instagram PWA?
Open your browser and type instagram.com
Once the page is loaded, click on the three dots in the Chrome browser. And click on “Install App”
Then the application will be added to your home screen. Click on the app icon and open the application.
This is your Instagram PWA, it is pretty similar to the native application. And you cannot see the address bar at the top of the screen.
Hope you learnt a new thing from this. I think, as the next step, it is better to compare the performance of PWA with native or cross platform applications 🙂 🙃
Based on:
Majchrzak, Tim A., Andreas Biørn-Hansen, and Tor-Morten Grønli. “Progressive web apps: the definite approach to cross-platform development?.” (2018).
