How do you get a Service worker working on PWAs

For those making PWAs how do you get the service worker working??

Give this a go:

I checked this site out: Ringkasan pekerja layanan  |  Workbox  |  Chrome for Developers

Uploaded this as ‘manifest.json’, after entering the below in Notepad and saving as ‘manifest.json’, into Bubble’s ‘Upload to root directory’. Don’t forget to add your own URL and other bits (KEEP THE “”); check the directory path matches the manifest exactly.:
{
“name”: “Your App name”,
“short_name”: “App name”,
“description”: “Your description”,
“start_url”: “https://YOURURL”,
“background_color”: “#ffffff”,
“theme_color”: “#0091FF”,
“display”: “standalone”,
“scope”: “/”,
“prefer_related_applications”: false,
“icons”: [{
“src”: “/T192.png”,
“type”: “image/png”,
“sizes”: “192x192”
},
{
“src”: “/T256.png”,
“type”: “image/png”,
“sizes”: “256x256”
},
{
“src”: “/T512.png”,
“type”: “image/png”,
“sizes”: “512x512”
}
]
}

Bubble won’t let me post the above code, annoyingly!

You will also have to create a ‘blank’ sw.js file in Notepad and upload that into your root directory. Create the file and put a single space in it, otherwise it won’t work. Then save as sw.js and upload to root - you might need to check your folder structures to make sure it aligns - that’s a key thing, watch out for ‘/’ and ensure things are labelled exactly.

Also, it is version-specific - so watch out for your file structure in the root directory; you’ll need to update your manifest and code in body when you go Live

6 Likes

can you share a bubble link to an app with the sw installed ?

So I understand the above. However, how do you get it so you can send a person a link and it allows the recipient to simply copy it to their homescreen on their iOS or Android device?

What am I missing?

Also, this is probably obvious but when in development do we use the
“start_url”=“https://YOURDOMAIN.bubbleapps.io/version-test?debug_mode=true