Progressive web app (PWA) settings

Another good resource is 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


You can have a service Worker on Bootstrap Studio hosting.

Make following folders in the pages from the options panel
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 your app(site) will be served from the root
if a visitor install your app(site) then your site will be served from

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:


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.


The dummy.html

visibillity of the sw.js

only on dummy.html

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