January 6, 2020

Convert a Website to Progressive Web App (PWA):Guide

In a very short span of time, Progressive Web Apps 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.

Benefits of PWAs: 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.

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 their website to PWA.

If you too are planning to convert the site to PWA and avail all the low investment cost benefit that the concept has to offer, you are the right place.

Here are the exact steps to How to convert your WordPress/PHP website to Progressive Web App (PWA), 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.

What You Need Before Looking into How to Turn a Website into PWA

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

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

Once you have these ready, get your HTTPS website out for migration.

Step 1: Load the URL

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.

Step 2: View the Site on your Mobile

In case you have 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 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

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

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

<head>

</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, 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 caches 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.

For abiding 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 a Web to PWA and if you followed the steps side-by-side, you have now even migrated your website into a Progressive Web App!

*Disclaimer*: While 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 take charge of the migration, I would say, don’t do it without having support of an experienced progressive web app development services provider.

While these steps are explanatory, 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 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 domain.

Karan Makan

Technology Engineer and Entrepreneur. Currently working with International Clients and helping them scale their products through different ventures. With over 8 years of experience and strong background in Internet Product Management, Growth & Business Strategy.

Convert a Website to Progressive Web App (PWA):Guide

Benefits of PWAs: Reasons to Convert Your Existing Website to PWA