Progressive web app (PWA) settings

Another good resource is simplepwa.com which will give you a downloadable (from GitHub) boilerplate where you can get an idea for the structure of your files

1 Like

so invariably it isnt possible with bootstrap hosting through cloudflare. they can try and give this functionality anyway

thanks. I will look into this

@correspondent-y

You can have a service Worker on Bootstrap Studio hosting.

Make following folders in the pages from the options panel
assets/js
copy your html pages to the assets/js/ folder
make a dummy.html page in the root folder set the visibility for sw.js only on the dummy.html
hide in export the dummy.html

change your script to this. when you publish your site the sw.js will be sw.min.js

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('./sw.min.js', {scope: '/assets/js/'})
    .then(registration => {
      console.log('Service Worker registered: ', registration)
    }).catch(registrationError => {
      console.log('Service Worker registration failed: ', registrationError)
   })
 })
}

In your manifest.json change the start_url to "start_url": "/assets/js/",

When a visitor visit skillsverification.co.uk/ your app(site) will be served from the root
if a visitor install your app(site) then your site will be served from
skillsverification.co.uk/assets/js/

In your sw.js change the offlineFallbackPage to this
offlineFallbackPage = "/assets/js/index.html";

Good luck with your serviceWorker

@kuligaposten Thanks very much for this input, it sounds intimidating reading, but will take my time, read this and give it a try tomorrow, will get back with the results. :pray:

@kuligaposten

You should explain this part to me, what steps I have to take, I really can’t comprehend this part.

Also try and break this part down.

@correspondent-y

The dummy.html
dummyPage

visibillity of the sw.js
visibility

only on dummy.html
swvisibility

when you publish to Bootstrap Studio hosting all js-files are minified and gets .min before .js
so sw.js will become sw.min.js

1 Like