let me begin by saying that the following guide IS NOT working completely in my case (for some reason I cannot get the service worker to register on my site, but that's probably because I am not a developer and I am missing something important).
With that being said, the following steps are probably the best to follow if you want to convert your website to PWA (Progressive Web App) yourself without paying a monthly fee.
STEP 1 - generate the necessary files and images
go to http://manifoldjs.com/generator, insert your website URL and follow the guide to generate the necessary files
you may want to also go to http://appimagegenerator-prod.[spam].net/ and upload your site's logo to generate the necessary image sizes for all the different devices
download the files' package, open it and find these files (these are the only files you will need)
manifest.json
pwabuilder-sw.js
pwabuilder-sw-register.js (you wil only need the code contained in this one)
"Images" folder
STEP 2 - customize the manifest
Open manifest.json and add
Code: Select all
"theme_color": "#000",STEP 3 - add the manup.js file
get the file here: https://github.com/boyofgreen/manUp.js/ and upload it to your site's root
STEP 4 - upload manifest and service worker files
upload manifest.json to your site's root
upload pwabuilder-sw.js to your site's root
upload "Images" folder to your site's root
because you may already have an "images" folder in your site root, you may change the name of this folder, but in this case remeber to edit the manifest.json file (it contains the path to thsi folder)
STEP 5 - insert code in your website head
insert before the </head> tag
Code: Select all
<meta name="viewport" content="width=device-width, user-scalable=no" />
<meta name="theme-color" content="#000"/>
<link rel="manifest" href="manifest.json" />STEP 6 - insert code in your website body
insert before the </body> tag
you will find the following code also in the file pwabuilder-sw-register.js
Code: Select all
<script>
if (navigator.serviceWorker.controller) {
console.log('[PWA Builder] active service worker found, no need to register')
} else {
//Register the ServiceWorker
navigator.serviceWorker.register('pwabuilder-sw.js', {
scope: './'
}).then(function(reg) {
console.log('Service worker has been registered for scope:'+ reg.scope);
});
}
</script>Code: Select all
<script src="manup.js"></script>STEP 7 - create an offline page
create an /offline.html page and upload it to your site's root, it will be showed when a device try to visit your site without being connected to the internet.
If you want to test first you may go to the next step before doing this
STEP 8 - test your PWA
install "Lighthouse" chrome extension and test your website
This is the part where I get the error "service worker is not being registered" - I hope it will work for you!
These are all the necessary steps to convert the website to PWA, now if you want to add the possibility to send push notifications to your users you may do so, and this is probably the cheapest way.
I have not tested yet this method, so if you chose to give it atry let me know if it works.
How to add push notifications
1 - Sign up for https://onesignal.com/, they provide unlimited devices and push notifications free of charge - documentation is here https://documentation.onesignal.com/docs
2 - install an extension that can integrate OneSignal into your website (there is only 1 extension at the moment which provide such functionality, look for "One signal push notifications" it in the extensions directory
This is all I have to share for now, let me know if it works for you, as I said I am having issues but the general procedure should be fine.
Hope this guide will be useful to you!
