PWA — Core Functionality
Before we get started, what does PWA means ?
PWA means Progressive Web Apps. It is just a term referring to couple of features we add to our existing web application/web pages to make it more interative and feel like a native application.
We add features and functionality to make our simple web page/application as progressive web app.
What makes a simple application to PWA ?
1. Adding web pages as native application (icon to Home Screen).
When we visit a site, a pop up appears to add site as application in home screen of our device.
Why do we need this? It is simple, to increase user interaction and help users to avoid constant changing URL’s and bookmarks and make user to feel like a native application.
2. Working in Offline mode.
Even when there is no internet connection, users should be able to view certain content and application should be interactable. We achieve this with the help of “Service Worker”.
Service Workers are javascript files which run on separate single thread. They are decoupled from normal HTML pages and live in backgroud even when we close our application. In one line,
Background processes attached to our application.
3. Push Notifications
Push notifications notifies users with important event. It drives the user engagement and provides native mobile like experience.
Push Notifications has two parts: Push — Some servers pushes information to our application and Notifications — which is what we want to show to the users.
First of all, we need permission from user to enable this feature with some prompts. It is a one time process. Once permission is granted, we set up a new subscription in our application. A subscription is a browser device combination. Each browser vendor will be having their own push servers. We don’t configure these push servers and we don’t own them!
Once we set up a new subscription, javascript will automatically reach out to these push servers and fetches the end point URL for us. This end point URL is to which we can send new push messages and our browser vendors will forward it to our application.
At our backend server, we get all the subscription sent by the service worker from our application containing the end point url. Later, we send the messages to the end point URL in the subscription and push servers delivers to our web applications.
4. Accessing Native features
Native features implies fetching of geo location data, accessing device camera, accessing microphones for voice inputs and much more.
“mediaDevices” in navigator is the API which allows us to implement native features in our web application.
“Progressive web apps are progressive enhancement”
Summary
The above mentioned functionalities are hard to do in previous browsers. Now we get browser support for these and we can use that!
If we have a modern browser, we can provide “Awesome experience” to the users.
Our aim is to make application more reliable, load fast and respond quickly to user interactions. Provide offline functionality and more engaging to feel like a native applications.