How to convert a Joomla website to PWA (Progressive Web App) without spending a fortune - Joomla! Forum - community, help and support

hello everybody,

let me begin saying following guide not working in case (for reason cannot service worker register on site, that's because not developer , missing important).

with being said, following steps best follow if want convert website pwa (progressive web app) without paying monthly fee.

step 1 - generate necessary files , images
go http://manifoldjs.com/generator, insert website url , follow guide generate necessary files

you may want go http://appimagegenerator-prod.[spam].net/ , upload site's logo generate necessary image sizes different devices

download files' package, open , find these files (these files need)
manifest.json
pwabuilder-sw.js
pwabuilder-sw-register.js (you wil need code contained in one)
"images" folder


step 2 - customize manifest
open manifest.json , add

code: select all

"theme_color": "#000",

change color according site colors, color of browser address bar when visiting site via mobile device

step 3 - add manup.js file
get file here: https://github.com/boyofgreen/manup.js/ , upload site's root

step 4 - upload manifest , service worker files
upload manifest.json site's root
upload pwabuilder-sw.js site's root
upload "images" folder site's root
because may have "images" folder in site root, may change name of folder, in case remeber edit manifest.json file (it contains path thsi folder)

step 5 - insert code in website head
insert before </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 value inserted in manifest.json

step 6 - insert code in website body
insert before </body> tag
you find following code in file pwabuilder-sw-register.js

code: select all

<script>
if (navigator.serviceworker.controller) {
  console.log('[pwa builder] active service worker found, no need register')
} else {

//register serviceworker
  navigator.serviceworker.register('pwabuilder-sw.js', {
    scope: './'
  }).then(function(reg) {
    console.log('service worker has been registered scope:'+ reg.scope);
  });
}
</script>

insert code call manup.js file

code: select all

<script src="manup.js"></script>

step 7 - create offline page
create /offline.html page , upload site's root, showed when device try visit site without being connected internet.
if want test first may go next step before doing this

step 8 - test pwa
install "lighthouse" chrome extension , test website

this part error "service worker not being registered" - hope work you!


these necessary steps convert website pwa, if want add possibility send push notifications users may so, , cheapest way.
i have not tested yet method, if chose give atry let me know if works.

how add push notifications
1 - sign https://onesignal.com/, provide unlimited devices , push notifications free of charge - documentation here https://documentation.onesignal.com/docs
2 - install extension can integrate onesignal website (there 1 extension @ moment provide such functionality, "one signal push notifications" in extensions directory

this have share now, let me know if works you, said having issues general procedure should fine.

hope guide useful you!

oloccina wrote:(for reason cannot service worker register on site, that's because not developer , missing important)

when inspecting site homepage using google chrome developer tools can see error in console

serviceworker failed install: serviceworker failed handle event (event.waituntil promise rejected)

i don't know means it's reason why service worker not being registered, service worker code usign code generated http://manifoldjs.com/generator

i try different servcie generate code, cannot find any