Attempt to convert a Joomla website to PWA (Progressive Web App) without spending a fortune failed

Relax and enjoy The Lounge. For all Non-Joomla! topics or ones that don't fit anywhere else. Normal forum rules apply.
Post Reply
oloccina
Joomla! Apprentice
Joomla! Apprentice
Posts: 44
Joined: Sat Oct 03, 2009 10:11 am

Attempt to convert a Joomla website to PWA (Progressive Web App) without spending a fortune failed

Post by oloccina » Fri Nov 24, 2017 4:46 pm

Hello everybody,

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",
change the color according to your site colors, this will be the color of the browser address bar when visiting your site via a mobile device

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" />
change theme color according to the value your inserted in 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>
insert also this code to call the manup.js file

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!
Last edited by toivo on Tue Feb 06, 2018 7:09 am, edited 2 times in total.
Reason: mod note: made the Subject more accurate on request

oloccina
Joomla! Apprentice
Joomla! Apprentice
Posts: 44
Joined: Sat Oct 03, 2009 10:11 am

Re: How to convert a Joomla website to PWA (Progressive Web App) without spending a fortune

Post by oloccina » Sat Nov 25, 2017 1:59 pm

oloccina wrote: (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)
when inspecting my site homepage using google chrome developer tools I can see this error in console

ServiceWorker failed to install: ServiceWorker failed to handle event (event.waitUntil Promise rejected)

I don't know what it means but it's probably the reason why my Service Worker is not being registered, for the service worker code I am usign the code generated by http://manifoldjs.com/generator

I would try a different servcie to generate this code, but as for now I cannot find any

dswartze
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Thu Dec 07, 2006 3:15 pm

Re: How to convert a Joomla website to PWA (Progressive Web App) without spending a fortune

Post by dswartze » Sat Nov 25, 2017 2:27 pm

Thanks for the post! I'll be following this closely. I don't have too much time to play with it right now, but I sure hope someone nails this for the rest of us!

lomas
Joomla! Fledgling
Joomla! Fledgling
Posts: 2
Joined: Fri Jun 14, 2013 6:10 pm

Re: How to convert a Joomla website to PWA (Progressive Web App) without spending a fortune

Post by lomas » Tue Feb 06, 2018 5:41 am

Thanks for digging into this. Curious if you have made any progress with Joomla to PWA exploration?


Post Reply

Return to “The Lounge”