Previously, we discussed Progressive Web Apps : what it is, what it means for businesses, its importance over mobile apps and website, its features, etc. Now, we would like to introduce to you how you can migrate from a normal website to a progressive web app as per Google norms without having intense knowledge in development.
Step 1:
First, you must know the important elements required for migration. These are:
- Chrome 52 or above
- Connected Android device running Chrome 52 or above
- A sample code
- A text editor
- Fundamental knowledge of Chrome DevTools and git.
Step2:
Use the below command line to clone GitHub repository
$ git clone https://github.com/googlecodelabs/migrate-to-progressive-web-apps.git
Running this command will create a Migrate to PWA directory which will have the complete code for all the steps. If you want to make changes to a particular codelab, then you can upload the work file to make the necessary changes.
After the code has been checked out, serve the work file using ‘Simple HTTP Server Application’ on the port 8887. This will enable you to load the URL.
Step 3:
If the android device is connected with your desktop, type “chrome: //inspect” in the URL. With this command, you can set a port forward, using the port that you wrote earlier, to the same port on the device.
Save this with “Enter” key. Then after you can see the basic version of your website at “http://localhost:8887/” on that connected Android device.
Step 4:
The next step is to add web App Manifest if your website is mobile friendly. However, if the website is not mobile friendly then you must first make it mobile friendly before adding the Web App Manifest. This would describe the website Meta information in the same way as it would be on the user’s home screen.
You can use this command line if there is no templating system:
<head>
<meta name=”viewport” content=”width=device-width, user-scalable=no”/>
<link rel=”manifest” href=”manifest.json”/>
</head>
The first line specifies the viewport and helps with responsiveness. The site will fit in a mobile device precisely after applying this line of code. The second line of code has referenced the file that will be responsible for controlling as to how your site will be added to the home screens.
Step 5:
The next step includes writing JSON using a text editor. Specify what you will show on the home screen on the short name section. Try to keep the maximum length of the name to 15 characters. Save this file as manifest.json.
Step 6:
Once the file is saved as manifest.json, follow it with reloading the page on android device and adding it to the home screen (with the menu available on top-right). It makes the icon visible on the home screen.
Step 7:
Service worker is a background script which works for offline surfing. It runs when the user is not on that page and is active with the push notification.
To create a service worker, add the below code to a new file and save it as sw.js:
/** An empty service worker! */
Self.addeventListener(‘fetch’, function(event){
/** An empty fetch handler! */
});
Step 8:
Register the service worker by writing this line of code to the site.js file:-
navigator.serviceWorker && navigator.serviceWorker.register(‘./sw.js’).then(function(registration) {
console.log(‘Excellent, registered with scope: ‘, registration.scope);
});
The code will be executed every time the page is loaded. You can check it after reloading the page in chrome: “//serviceworker-internals/”
Your website is now ready to prompt users for installing it on their home screen. Your site can also work offline and it now supports push notifications.
Step 9:
Now open the sw.js script and hold all the cache objects. Once done, update the code and move the entire website to cache.
Step 10:
Now let’s check how it is working. First, uninstall the present app and load it in the Chrome browser. Go with the “Add to Home Screen” option.
If you want the page to reinstall changes when Service Worker changes, all you need is to add a component having the “version” of the service worker. Now whenever Service Worker is changed, the page reloads and installs the changes that you have made.
With this step, your website will be migrated to a Progressive Web App. Though these steps would turn a website to PWA, you shouldn’t do it without a person who has good knowledge in this area. There are so many elements that may come along during implementation, and you may not be aware of those. To avoid any misleading results, you must consult an expert in Progressive Web App development.
Do you want to build a Progressive Web App for your business? If yes, then contact Queppelin today and let us know about your requirements.