A Guide on How to Convert a Website to Progressive Web App (PWA)

In a very short span of time, PWAs have made a very prominent mark in the mobile app industry.

The concept, which Google wants you know to know about, is a respite for the industry that continuously has been making the same complaints time and again –

With respect to Websites: Slow loading speed and Low Resonance Rate

With respect to Mobile Apps: Apps taking a lot of memory space, It is dependent on the network connection, and The long steps users will have to take from finding an app to starting to use it.

Since Progressive Web Apps (PWAs) are downloaded straight from a website and runs as a website as well, users get benefitted in three ways – 

• They get to save on the time that goes into first finding an app on the store, installing it and then feeding in information to get it started 
• Since Progressive Web Apps work as a website, they take up minimal device storage space, and 
• Because they work primarily as a website, the concept of cache holds true, which enables the app to run even where there is no network connection.

Reasons to Convert Your Existing Website to PWA

Besides giving these obvious benefits to the users, Progressive Web Apps – the ideal combination of websites and mobile apps – have emerged as the cost-effective formula of business success as well. This is why people are looking forward to convert website to app.

The benefits that PWAs bring to businesses by being easily discoverable, by taking up less memory space, by coming with low cost of development, and lastly by running offline on a great speed can be gauged by seeing the change in growth numbers of these famous brands –

Success stories like these and a lot of them in the industry are enough to make every modern day mobile business look for the best progressive web app development company and look for ways on how to convert websites to PWA.

If you too are planning to convert website to progressive web app and avail all the low investment cost benefit that the concept has to offer, you are in the right place.

Bonus Read- Progressive Web App Development Cost 2022

Here are the exact steps to How to convert PHP website to PWA or how to make a website into an app, as shared by Google to our Team of Progressive Web App Developers (one of the perks of being one of the official Google Developer Agencies). 

But first thing first. Know the elements you would need to create PWA from a website or if you want to turn webpage into app.

How to Turn a Website into PWA

To convert website into PWA, here are the three things required –

1. An attached Android device running Chrome 52 or above,
2. A basic understanding of Git and Chrome DevTools,  
3. The sample code, and
4. A Text Editor

Once you have these ready, get ready to convert web to PWA or convert website to web application.

Step 1: Load the URL

The first step in migrating your website to PWA is clone GitHub repository from command line:

$ git clone https://github.com/googlecodelabs/migrate-to-progressive-web-apps.git

Doing this will help develop a Migrate to PWA directory with the completed code for every step. For this specific codelab, upload the work file and then make the changes there.

Once your code has been checked out, use the ‘Simple HTTP Server Application’ for serving work file on the port 8887.

After this, you will be able to load the URL to convert site to PWA.

Step 2: View the Site on your Mobile

This is the second step to turn website into progressive web app. In case you have an Android device plugged in with your desktop, type in this in your URL – chrome://inspect. This will let you set a port forward with the help of the port that you wrote before to the same port on the device.

Press Enter for this to save.

Now you will be able to access the basic version of your website at – http://localhost:8887/ on the connected Android phone.

Step 3: Add the Modern Head Tags

To convert website into mobile app, the first thing that you will have to do is make the website mobile friendly and secondly you will have to add a Web App Manifest. The manifest will describe the meta information of the site in a way that it would appear on the user’s’ home screen.

If you don’t have a templating system in place, add these lines –

<head>

<meta name= “viewport” content=”width=device-width, user-scalable=no” />

<link rel= “manifest” href= “manifest.json” />

</head>

• Viewport – The first line consists of a meta tag which specifies the viewport. This element will help you with responsiveness. After writing the line of code once you reload the site, you will find the site fitting your device precisely.
• Manifest – In the second line of your code you have referenced the file – a movement that is needed to control how the site gets added to the home screens.

Once done, open a text editor. It’s time to write JSON. In the short_name section, specify what will show on the home screen and try to keep it within 15 characters.

Next, save your file as the manifest.json nomenclature and reload the page on Android device and go to the top right menu and opt for ‘Add to Home Screen’. Now you will be able to see your icon on the home screen!

Step 4: Add a Service Worker

Service Worker is the background script which the browser can run while the user is not on the page. It is the element that gives the offline support and gets active when the notification is pushed.

Create a Service Worker

Copy this code in a new file and then save it as sw.js.

/** An empty service worker! */

self.addEventListener (‘fetch’, function(event)

{

/** An empty fetch handler! */

});

And that’s it.

Register the Service Worker

You will have to register the code in your website’s code to turn webpage into app, for that, open up your site.js file and paste this –

navigator.serviceWorker && navigator.serviceWorker.register(‘./sw.js’).then(function(registration) {  console.log(‘Excellent, registered with scope: ‘, registration.scope);});

Now, the code will get executed on every single page load. Check if its working properly by reloading the page and then checking – chrome://serviceworker-internals/

Now your website will be able to prompt users to install it on their home screens and secondly, you will be able to make your site able to support push notifications and even work offline.

Step 5: Make the Site Work Offline

First step would be to open sw.js script and get hold of the cache object. Once you have that, update the code and app the entire website to cache.

Try out how it’s working now. Uninstall the present app and load it on Chrome. Next, refresh the page and select ‘Add to Home Screen’ in the right corner menu.

To abide by the rule that when Service Worker changes, the page should reload and reinstall it, all you will have to do is add a component which has the ‘version’ of the service worker. When that changes, the install movement happens again, caching the resources that would have changed.

Congratulations, you now know how to convert Web app to PWA and if you followed the steps side-by-side, you have now even migrated your website into a Progressive Web App!

*Disclaimer*: These steps will give you, the developer, an exact idea of how you will have to fill in the blanks and move from Point A in the process to Point C. If you are reading this as an enthusiastic entrepreneur who wishes to convert wordpress to progressive web app or want to make an app out of a website, I would say, don’t do it without having support of an experienced progressive app development services provider.

While these steps are explanatory in how to make website into app or convert web app to progressive web app, there are a number of elements that come up as part of the process when you sit with the actual development process. So, instead of trying your hands with the steps to make app from website and finding a different result because you weren’t sure of the between the line elements, give the job to a PWA development company who has specialization in the web app development services. The experts will answer all the questions related to how to convert a website to an app, how to make a website into an app.

THE AUTHOR

Sudeep Srivastava

Co-Founder and Director