In the modern world, most web applications are getting converted to a PWA (Progressive Web App) because it provides features like offline support, push notification, background sync. PWA features make our web application more like a native app and give a rich user experience.
What is a PWA?
PWA is your same Web App(HTML+CSS+JS). It works the same as your Web App on all browsers as it previously did. But it can have native features when your website loads on a modern browser. It makes your web app more powerful than before and it also makes it more scalable because we can able to prefetch and cache assets in the frontend, it reduces requests to your backend server.
How PWA is different from Web App
Installable: Your Web App can be installed like a native appProgressive: Works same as your web app but with some native featuresNative App Experience: User can use and navigate Web App like a native, once installed.Easily Accessible: Unlike our web app, there is no need for our users to type web addresses each time they visit. Once installed, it can be opened with a single tap.Application Caching: Before PWA, the only caching mechanism our web app implemented with is, by using HTTP cache which is only available to the browser. But with PWA we can cache things by using client-side code itself which is not available in a web app.(App/Play) store publishing: PWA can be published in Google Play Store and IOS App Store.
Converting your application to PWA will only make it more powerful.
Why buisness should consider PWA
While most of our clients reach us and ask to develop the Web App solution first and then they ask for Android and iOS apps. All we are going to do is build the same functionality in web App to Android/IOS App by a separate team which takes more development cost and more time to market. But some client has a limited budget or some client may think time to market is more important for their product. Most of the client requirements can be satisfied by PWA features themselves. For them, we suggest PWA only and give them an idea to convert their PWA as an Android App using TWA if they want to deploy in Playstore. If your requirement truly needs native application features which can’t be satisfied by PWA. Clients can go and develop both Applications as they wish. But even in that scenario. They can deploy the PWA in the play store until Android development is completed. Example: Titan Eyeplus Initially, they developed a PWA app and deployed it in the play store using TWA(Trusted Web Activity). Once they completed their Android application development. They deployed their real Android Application in the play store. They achieved both time-to-market using PWA and the Cost of the development.
PWA features
PWA gives our web applications native app-like features. The main features are:
Installable: A web application installed like a native app.Caching: Application caching is possible, which gives our application offline support.Push Notification: Push Notification can be sent from our server to engage our users to our website.Geofencing: The application can be notified by an event whenever the device location change.Payment Request: Enable payment in your application with a great user experience like a native app.
And many more features to come in the future. Other features are:
Shortcuts: Quickly accessible URLs added in the manifest file.Web Share API: Let your application receive shared data from other applications.Badge API: To show notification count in your installed PWA.Periodic Background Sync API: saves your user’s data until it’s connected to the network.Contact picker: Used to pick contacts from the user’s mobile.File Picker: Used to access the file on local system/mobile
Advantage of PWA over Native Application
The native app performs better than PWA and has more features than PWA. But still, it has some advantages over the native app.
PWA runs on cross-platform like Android, IOS, Desktop.It reduces your development cost.Easy feature deployment as compared to a native app.Easily discoverable because PWA(website) is SEO-friendlySecure because it works only on HTTPS
Disadvantages of PWA over native app
Limited functionalities are available compared to a native app.PWA features are not guaranteed to support all devices.The branding of PWA is low because it’s not available in the app store or play store.
You can deploy your PWA as an Android app in the play store using android Trusted Web Activity(TWA). It will help your branding.
Things needed to convert Web App to PWA
For converting, any Web App or Website to PWA.
Service-Worker: the core of any PWA app for Caching, Pushes Notification, a proxy for our requests.Manifest file: It has details about your web application. It used to download our application like a native app on the home screen.App Logo: High-Quality image 512 x 512 px for your app icon. App logo needed for PWA on the home screen, splash screen, etc. So we have to create a set to 1:1 ratio images for our APP using any tools.Responsive Design: The web app should be responsive to work on different screen sizes.
What is Service Worker:
A service worker(client-side script) is a proxy between your Web APP and the outer side, delivering push notifications for our Web App and supporting Caching. Service Worker runs independently from the main javascript. So it doesn’t have access to DOM API. It can only access IndexedDB API, Fetch API, Cache Storage API. But it can communicate with the main thread with a message. Service provided by service worker:
Intercepting HTTP requests from your origin domain.Receive Push Notification from your server.Offline availability of our application
The service worker controls your application and can manipulate your requests, but it runs independently. So for that reason, the origin domain must be enabled with HTTPS to avoid a man-in-the-middle attack.
What is the Manifest file
A manifest file(manifest.json) has details about our PWA app to tell the browser.
name: Name of the applicationshort_name: Short Name for our application. If provided with both property name and short_name, the browser will take short_name.description: Description to describe our application.start_url: To specify the homepage of the application when our PWA launched.icons: Set of images for PWA for Home screen, etc.background_color: To set the background colour of the splash screen in our PWA application.display: To customize our browser UI to show in our PWA app.theme_color: Theme colour of PWA app.scope: URL scope of our application to consider for PWA. Defaults to the location of the manifest file located.shortcuts: Quick links for our PWA application.
Convert Web App to PWA
For the demo purpose, I have created a Geekflare website folder structure with static files.
index.html – home pagearticles/ index.html – articles page authors/ index.html – authors page tools/ index.html – tools page deals/ index.html – deals page
If you already have any website or Web App then try to convert it to PWA by following the below steps.
Create Required images for PWA
Firstly, take your app logo and crop it in a 1:1 ratio size in 5 different sizes. I have used https://tools.crawlink.com/tools/pwa-icon-generator/ to get different image sizes quickly. So you can use it too.
Create a manifest file
Secondly, create a manifest.json file for your Web application with your app details. For the demo, I have created a manifest file for Geekflare Website.
Register Service-worker
create a script file register-service-worker.js and service-worker.js in the root folder. The first one, register-service-worker.js is the javascript file that will run on the main thread which can access DOM API. But service-worker.js is a service worker script that runs independently from the main thread and its lifetime is also short. It runs whenever events call service workers and run until it finishes the process. By checking the main thread javascript file you can check whether the service worker is registered in it. if not you can register the service worker script(service-worker.js). paste the below snippet in register-service-worker.js: Paste the below snippet in service-worker.js We didn’t concentrate on how to enable cache for offline support. We only talk about how to convert Web apps to PWA. Add manifest file and script in the all head tag of your HTML page. Refresh the page after you added. Now you can install your application like below on mobile chrome. On the home screen, the app gets added. If you are using WordPress. Try using the existing PWA converter plugin. For vueJS or reactJS you can follow the above method or use the existing PWA npm modules to faster your development. Because PWA npm modules are already enabled with offline support caching, etc.
Enable Push Notification
Web push notifications are sent to the browser to make our users engage/interact with our application more often. We can enable it by using
Notification API: It is used to configure how our push notification should be shown to the user.Push API: It is used to receive notification messages sent from our server to the browser.
The first step to enable push notification in our application is to check Notification API and get permission from the user to show a notification. For that copy and paste the snippet below in your register-service-worker.js. If everything went correctly. You will receive a notification from the application. ‘Notification’ in window will tell us that Notification API is supported in that browser. Notification.permission will tell that the user has been permitted to show the notification. If the user permitted our application the value will be ‘granted’. if the user has rejected the value will be ‘blocked’.
Enable Firebase Cloud Messaging and Create Subscription
Now the real part begins. For pushing notifications from your server to the user we need a unique endpoint/subscription for each user. For that, we are going to use firebase cloud messaging. As a first step, create a firebase account by visiting this link https://firebase.google.com/ and press get started. Then go to the project settings and click cloud messaging and generate keys. From the above steps, you have got 3 keys.
project server-keyWeb push certificates private-keyWeb push certificates public-key
Now paste the below snippet in register-service-worker.js: Paste the below snippet in service-worker.js. Now all set in the front-end. By using the subscription you can send push notifications to your user whenever you want until they were not denied the push services.
Push from the node.js Backend
You can use the web-push npm module to make it easier. Example snippet to send push notification from nodeJS server. The above code will send a push notification to the subscription. The push event in the service-worker will get triggered.
Push from the PHP Backend
For PHP backend you can use the web-push-php composer package. Check the example code to send push notifications below.
Conclusion
I hope this gives you an idea about converting web applications to PWA. You can check the source code of this article here and demo it here. I have tested the push notification by sending it from the backend with the help of example code too.
