Progressive Web App – Websites that took all the right vitamins !
Progressive Web Apps are those Web Apps which combines the best features of Web and Native Apps.
Frances Berriman (Designer) and Alex Russell (Engineer at Google) came up with the concept called Progressive Web Apps.
One recent survey shows that there is a dip in a number of app users. People are turning away from Android/iOS apps because not all apps are good at user experiences. Some people simply don’t want any apps in their mobile and there are many who hesitate to download any.
If you take a look at the apps installed on your mobile right now there might be at least a dozen apps that you do not use frequently. Sometimes apps only work in good internet connection or else they are just memory acquirer.
The irony is that most of the apps have a fully responsive website performing the same functions. So why waste your precious memory space and your internet data on your smartphone by installing the native app?
The average size of apps that we install from play store/app stores would range from 30–200 MB. Moreover, these app needs to be updated every week! However, Progressive Web Apps are within some KB and are automatically updated.
In short, Progressive Web apps combines everything that is good about a native mobile application with everything that is great about a mobile website.
If we describe it in simple words then it would be like: The best of the web, plus the best of native apps!
Or, in the founder, Alex’s words:
Just websites that took all the right vitamins
Features of PWAs:
- Progressive — The word progressive means it works for every user, regardless of browser choice because they’re built with progressive enhancement as a core tenet.
- Responsive — Automatically adjustable to any form: desktop, mobile, tablet etc.
- Load Time — Progressive Web Apps are instantly available with a very low load time.
- App-like — Feels like a mobile app with app-style interactions since it’s built on the app shell model.
- Fresh — Always up-to-date so you don’t need to update it again and again like any other Android/iOS apps.
- Safe — Served via HTTPS to ensure content is securely delivered
- Engaging — Features like push notifications, etc. makes it very engaging.
- Install-able — Allows users to install the website as an app on their home screen without the taking user to an app store.
- Linkable — Easily shared via a URL and do not require complex installation.
Benefits of making a Progressive Web App rather than building a fully functional Android App?
- Cost Effective — For an app publisher, the biggest advantage is the cost saving in terms of app development and maintenance. Because it is assumed that making a website is a lot easier than making an Android App.
- Cross-Platform — Unlike any other apps, Progressive Web Apps are not restricted to any specific platform. That means you do not need to develop separate versions of the app for different platforms.
Some renowned organizations that make use of Progressive Web Apps-
- Ola
- Flipkart
- Alibaba
- BookMyShow
- MakeMyTrip
- OLX
- The Weather Channel
- Forbes
- JioCinema
- Trivago
Testing your PWA
To check if your site is working as a PWA you can use Lighthouse.
Lighthouse is a chrome extension that will tell you if your site is a good PWA and if it isn’t I will provide you with ample information on how to improve it. Once installed, open your website and click on the Lighthouse icon in the top right of your browser, ‘Generate Report’.
Register Service Worker
A service worker is another file we add to our project, it will allow the site to work offline. It is also a requirement of a PWA, so we need one.
Offline Support
Apps should be able to work offline. Whether that be displaying a proper “offline” message or caching app data for display purpose.
Web App Manifest
The web app manifest provides information about an application (such as name, author, icon, and description) in a JSON text file. The purpose of the manifest is to install web applications to the home screen of a device, providing users with quicker access and a richer experience
Service Worker
Service worker could be mentioned in Offline Support, but it really deserves its own section. Service worker provides a programmatic way to cache app resources. Be it JavaScript files or JSON data from an HTTP request. The programmatic API allows developers to decide how to handle caching and provides a much more flexible experience than other options
Now Microsoft is supporting Google’s Progressive Web Apps platform and that’s a great news for everyone.
Microsoft recently announced that Progressive Web Apps (PWA) will soon be supported by the Microsoft Edge web browser. Moreover, a few apps trending in the Windows Store — like Slack and Trello — are now mixing PWA with Electron and elements of the Universal Windows Platform (UWP)!
