Simple Step By Step On How to Turn a Website to PWA(Progressive Web App)
What is PWA?
A progressive web application is a type of application software delivered through the web, built using common web technologies including HTML, CSS and JavaScript. It is intended to work on any platform that uses a standards-compliant browser. (Wikipedia)
They are websites that look and feel like a mobile app. It is lightweight, users can access a website by clicking on the app installed on their phones.
Why do you need PWA?
If you do not have the budget to build a mobile app for your website, PWAs are cheap and fast to develop.
PWAs have fast loading time, a good user experience and lightweight.
Simple Steps to Turn Your Website to PWA
Before you proceed, your website have to fulfill some requirements;
- Your website must be running on a secure domain (https), if you don’t know how to make your domain secure, check my article here
- Follow the below steps;
a. Use Google LightHouse (A chrome extension)to check and Improve your website.
b. Use realfavicongenerator.net to generate all the necessary icons that will be used on different mobile devices, this platform will also generate the manifest.json file that you will need later.
c. Follow UpUp tutorial to generate Service Workers’ files
d. Once you’re done with the above steps, edit the manifest.json or site.webmanifest you downloaded in step b, here is an example of how the man
e. Add the files from steps c and d above to the root of your website folder (You might need to FTP into the root of your website)
f. Include the UpUp script at the bottom of the <body> tag of your page.
g. Add the codes given by realfavicongenerator.net in the <head> tag of your page
3. Use Google LightHouse (A chrome extension)to check and Improve your website.
4. Visit your website on your mobile browser and see what happens.
Enjoy!!!
