Converting an App to a PWA

The benefits of PWAs have made them popular, which is why everyone wants to use them stated Bahaa Al Zubaidi. A question you may have is – if you already have a web app can you covert it to a PWA. Let’s look at the answer to this question while understanding the challenges involved in the process.

Converting web app to PWA

A website or a web app that you already have can be converted to a PWA. Before getting into the steps involved, let’s look at the prerequisites:

• You need an Android device.
• Knowledge of ChromeDevTools and Git are essential.
• A text editor.

Here is how you can go ahead with the conversion:

1. The first step involved is to clone GitHub repository using the command line option. Once done, it creates a ‘Migrate to PWA’ folder.
2. In the next step, use your Android device and visit the url chrome://inspect. You can use this to set a port forward to port 8887. Your website will now be ready and can be accessed from http://localhost:8887/ through the Android device.
3. You now need to convert the website to an app. For this you must add a manifest that describes the site’s meta information. The manifest has to be saved in the manifest.json.
4. Now reload your page and choose the ‘Add to home screen’ option. You have now created your PWAs icon on the home screen of your mobile.
5. In the next step, you will need to add a service worker. The service worker is a script that works in the background. Even if the web page is not open, the service worker ensures the app is running. It is the service worker that allows the PWA to work offline and to send push notifications. You must create the service worker and then register it on the site.js file.
6. To enable your PWA to work offline you must make changes to the sw.js script and get hold of the cache object. Now you must update your code and move the entire website to cache.
7. Once your PWA is ready, you must test it to check if it is working well. You can use the Lighthouse utility to find out if your PWA works as per best practices. The score by Lighthouse will allow you to understand what change and improvement you must make.
8. Once all the changes and retesting is done, you are ready to deploy your PWA. You can just share the link with all your users to help them start using your PWA.

The blog has been authored by Bahaa Al Zubaidi and has been published by the editorial board of Tech Domain News. For more information, please visit www.techdomainnews.com.