Progressive Web App

Bootstrap Studio Help
1

Hello all! I was working on a PWA and came across an issue, and I’m not sure if others have bumped into this either.

Upon adding app.js and sw.js to my project to register a service worker. It seems that sw.js needs to be at the root of my domain, as described in multiple tutorials I have watched, and read. However, I can’t seem to figure out a way to move sw.js to the root as it stays locked in original folder " www.[domainName].com/assets/js/sw.js " when I need to be in " www.[domainName].com/sw.js ".

It is hosted through Bootstrap Studio on Cloudflare.

Any help would be gladly appreciated. If it’s not possible, then I understand and can manage without it.

2

I should have added a question mark somewhere. But is there a way to place a JavaScript file at the root of the domain using just Bootstrap Studio as my host?

3

I host my website, https://gilmarwebdesign.com.br on Cloudflare without using wordpress publishing.
If you do it this way, just export the project, open the folder with the vs code and edit the path to this file, then send everything to cloudflare.

4

I appreciate the response. Im hosting through Bootstrap Studio, which is connected to Cloudflare.

I’m looking into possibly Github Pages, or if there’s another free alternative I can use that would give me access to the root folder.

5

If it is just to have a pwa to enable to install the app you can have it on Bootstrap Studio Sites, but you can’t have any server side services like notification, geo data…
Bootstrap Studio has thier own service worker and you domain is not in thier scope for serviceworker
here is a simple example

@gilmar

Your site isn’t a pwa app you have error in your manifest.json and you have not a service worker

6

@kuligaposten
I really didn’t know how to do this part, pwa only works if you click on the three dots, browser menu and click on add to home screen.
I tried to find a solution to this error, but I couldn’t.

7

I tested 10x to make a PWA example project through BSS, it didn’t work, is there any secret technique?

Rasengan

I use Windows 10 and my BSS version is 6.1.1

2 Likes
8

So a PWA requires a Service Worker sw.js at the root of the domain.

Then it requires an app.js which can be placed in a sub directory.

However the Service Worker that im trying to accomplish is one where you can install the website as an application on Android Devices, just like the BSS forum. Which if you goto the Chrome Browers on Android, it gives you the option to install it like an app.

Then on a PC, on Chrome, it will give an install button in the URL bar. Which you can find an example here: Add to Home screen - Progressive web apps (PWAs) | MDN, which there you can see the “Install” and “Install App”.

This is what im trying to recreate. Sadly however I see BSS hosting doesnt support moving a JavaScript file to the root of the domain. Which was the issue, after hours of looking, along with sending a message to Martin. So now im debating moving to Github Pages, or even a different hosting service that allows me to access the root directory.

9

You also have the options to create a PWA that just “Adds to Home Screen” through BSS by going to Settings → PWA, and then filling in the details.

The issues is adding Service Workers.

10

Progressive web applications, PWA, work with *.bss.design sites, the big problem is that you really have to click on the browser menu to perform this installation.
I searched and didn’t find any way to code a button on the site to perform this function, it’s a fact that each hosting has its workers, but I believe that on *.bss.design sites, the bss team could provide a tutorial on how do this process.

11

@GregoryAM

Here is your example on a BSS hosting with a add to home screen button. It works on chrome I didn’t test it on other browsers. If you install the app it will work when you are offline as well.

You can inspect the site to see how it is done

3 Likes
12

How the !?

Would you be able to share the BSS.design file with me? :star_struck:
That’s exactly what I’m trying to accomplish.

Edit: I inspected the page, and the only issue I found is that I’m confused on the how the service worker get’s called. Since it mentioned service-worker.min.js when the only file there is script.min.js.
Also with how the Manifest file is called. Since it’s in a separate folder, I believe it’s a custom Head Content code.

Edit 2: Looking deeper, I found the service-worker.js. I just had to input the full path to see the code.

Edit 3: Nevermind, I lost it after realize the index.html was located in assets/js/ and couldn’t figure out how it was done.

1 Like
14

Hi @kuligaposten , what operating system do you use?
Have you installed any additional features to work with BSS?
There are very large divergences from your manifest to what was generated with my Bootstrap Studio.

15

@gilmar, I see you are trying to load webp images in your manifest, which is throwing an error.
I believe they need to be png in order for it to work properly.
at least for this website: https://gilmarwebdesign.com.br

16

@GregoryAM I did some tests using the same @kuligaposten files, it didn’t work, his manifest is extremely different from what is generated by my BSS.

17

@gilmar

I’m on windows and the lastest bss version

I add a manifest.json in the javascript section
and in the head content I have <link rel="manifest" href="/assets/js/manifest.json">
then you can have what you want in the manifest. I’m not using the built in pwa in BSS

18

@kuligaposten
I edited the post, after I understood what you meant.
Thanks for listening.
I need to learn how to make manifest.json.
Sorry for the inconvenience.

19

@gilmar

1 Like