PWA (Progressive web application) is a new way to design web application with the best of Mobile & Web. This app does not require any installation, it loads extremely quickly in distributed network, and quickly sends push notification. It has home screen icon with full screen experience. For browsers supporting “Service Worker”, “Web Push Notification” and “Add to Home Screen banner”; the PWA rocks and it provides native like experience to the user.
In past many attempts were made for offline web application success with enabled APP catch, Local storage/Index DB. But, all these solutions failed to handle complex requirement of Web App. PWA is a new guideline to handle such requirements and scenarios which is developed by Google. One key point added by Google in application criteria is “Serve via HTTPS to prevent snooping and to ensure content hasn’t been tampered with.”
As per my understanding main parts of PWA are as following:
1. Service Worker
2. App Shell
3. Installability & App Manifest.
Let us discuss in some detail about above three parts.
1. Service Worker: It is a scriptable & programmable proxy which controls our network requirement. It can run in background even when browser is closed and it does not need any UI to execute. It also powers many things like push notification, offline functionality, background content updating.
It does not allow to access DOM directly with javascript worker. It can communicate only to pages and pages can communicate to DOM if needed. It does not have access of Index DB too. It can be terminated when not in use and restarted when it is needed.
Its core responsibility is to install static caches whenever required by application. After completion of Installation; activation stage opens and here we have great opportunity to manage or handle old cache. Once activation stage is completed all pages from caches are controlled by service worker. But, those pages or assets which are loaded first time are uncontrollable and are required to reload to manage that. This component also provides the facility to control each request made by application for resources. This all can be managed by events provided by it.
2. App shell: These are UI of our application and it is stored in cache with help of service worker. It contains minimal HTML, Javascript and CSS. Normally these are the blank skeleton of the application which are stored in cache. So, if user opens application in offline mode; they do not have to wait for loading of all content from server and instead these fix parts are loaded from cache and there they wait for the dynamic content. Here user will feel like app, because this app shell is open as full screen, if it is opened from home screen by adding it.
3. Installability & App Manifest: Historically, we can see that Web apps are not able to provide the installation facility like native app. OS provides the facility to “PIN” web app to their home
screen but the experience is second grade. Recently, Chrome on Android added support for installing web apps to the home screen with native install banner, just like the native app banners. The web app manifest file is Json file, providing developer facilities to put their metadata centralized regarding application. This file contains app’s displayed name, icons, as well as splash screen. If we link to the manifest file in our index.html, browsers will detect that and load the resources.
Google has defined following characteristic of progressive web app.
Progressive – Work for every user, regardless of browser choice because they’re built with progressive enhancement as a core tenet.
Responsive – Fit any form factor: desktop, mobile, tablet, or forms yet to emerge.
Connectivity independent – Service workers allow work offline, or on low quality networks.
App-like – Feel like an app to the user with app-style interactions and navigation.
Fresh – Always up-to-date thanks to the service worker update process.
Safe – Served via HTTPS to prevent snooping and ensure content hasn’t been tampered with.
Discoverable – Are identifiable as “applications” thanks to W3C manifests and service worker registration scope allowing search engines to find them.
Re-engageable – Make re-engagement easy through features like push notifications.
Installable – Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store.
Linkable – Easily shared via a URL and do not require complex installation.
We have seen some benefits of their characteristic. Now, let see some of the disadvantages of same.
1. Limited Browser support.
2. Limited Native API access.
3. No App store entries.
4. Cross Application login are not supported.
5. Most important is cache management is tedious. If developers do not manage cache properly then mismatch of cache may occurred with old and new cache. In that situation debugging is also tedious and mind hammering.
Conclusion.
The Progressive Web Application still needs to go a very long way but it is very sure that this will be the future. In the journey of application, it might bring mobile forward, bring equality in web and native app. Developer has to be streamlined with the new developments and need to be more accurate while dealing with cache and service worker. They also need to be provide maximum characteristics as defined by Google. This will be a new and enjoyable journey for developers.
