I have seen Progressive web app settings in the settings tab of bootstrap studio, but there is no information on it in the documentation, can someone kindly give a brief description of it and how to set it up
Forgive me if I am going over topics you are already familure with here. Progressive Web Apps, PWAâs for short are a way to add websites to users devices like their phone in a way that makes them appear like they are stand alone applications.
The progressive web app settings in Bootstrap Studio is a start for setting up your site as a PWA, it means if the user installs the site to their device, the images and name you give it are used. The settings are as follows:
-
Name: The name that appears when the user goes to install your site.
-
Short Name: This is the name that appears when the PWA is installed.
-
Start URL: This is the page the PWA opens to when the PWA is opened.
-
Splash Screen Icon: This is shown when the user opens the PWA.
-
Application Icon: This is what is used on the users device like an app icon.
-
Maskable Icons: Makes the Splash Screen image full screen.
-
Background Color: Used on the Splash Screen.
-
Theme Color: Used on android to change home bar or top settings toolbar color.
-
Display: How to show the PWA on the users device, this is how the following options work:
-
Fullscreen: This mode uses all of the available display area and no browser UI is shown. Itâs ideal for apps that require the userâs undivided attention, like games. However, it doesnât support multi-tab browsing within the app.
-
Standalone: In this mode, the app looks and behaves like a standalone application. It can have its own window and icon in the application launcher. The browser UI elements for controlling navigation are excluded, but other UI elements such as a status bar may still be included. This mode is suitable for apps that need to feel more like a native app.
-
Minimal-UI: Similar to the standalone mode, the app opens in its own window, but it retains a minimal set of browser UI controls. These controls can vary between different browsers. This mode is useful for apps that need to feel more native, but still allow users to navigate away from the app.
-
Browser: In this mode, the app opens in a conventional browser tab or new window. This is the default mode and is suitable for apps that donât require a full-screen experience
-
-
Orientation: Fairly self explanatory, sets the PWAâs rotation.
It is important to note that only this Manifest is not enough for your site to act like a standalone app. It performs more like a nicely designed shortcut on your users phone.
To turn your website into a full standalone PWA that can be used offline or online and perform more similarly like an app you will need to look into Service Workers.
Hope this answer helps!
2 Likes
Also important to note, but Chrome and other similar browsers no longer prompt your visitors to install your siteâs PWA - but may if they visit it frequently. You can overwrite this behavior with some of your own JS though.
1 Like
thanks for the explanation, but quite technical. I think the bootstrap studio docs/guide, should cover this topic in depth, and give step by step how this can be done since it is included in the application
Is there any particular areas you find I was too technical that I could help you with in more detail?
Bootstrap Studio could benefit from some documentation on the PWA feature, I shall tag @martin here so they can consider it.
I personally feel it would also be important to point out that Bootstrap Studio is primarily a website design tool for building frontend. A full PWA experience is arguably outside the realms of what Bootstrap Studio is aimed for and as such I think the current PWA configuration is more than adequate.
If you setup the configuration inside Bootstrap Studio then users visiting your site will be able to choose an option in their browsers to add a shortcut to your site to their mobile home screens. You can do more advanced features with PWAâs such as downloading your sites content to the users device too, this allows users to view your site and pages even if they are offline, however this more advanced PWA setup requires the use of said Service Workers. These are JS files that download on to your device to add functionality and tell the browser what files to download like your HTML, CSS, Images ect.
I donât think BSS should support the automatic creation and setup of these Service Workers as that primarily is more on the developer to do when they design a functioning system.
1 Like
Your explanation was fine, the service workers page was what i found technical, but i have setup PWA configuration in my Bootstrap studio, but when i visit my site, I dont not get the option to have a homescreen shortcut.
Could likely be a configuration issue, or the standards have changed from when I last used a PWA, maybe they require a Service Worker now, I am not sure.
First lets check your configuration file - I will use Chrome here but if you use another browser search for âhow to check PWA configuration in X browserâ, X being the browser you are using.
- Open Developer Options
- Open the Application tab
- From the right hand side, at the top choose âApp Manifestâ
You can send me a screenshot of this page and I can see if I can lend a hand 
Sorry, I canât see the full error details there in this screenshot.
Can you click on the ââŚâ in the top right next to the âXâ button, then undock the developer options, make that full screen and send me a screenshot of that please.
Let me know how you get on with the other two, try using an AI powered search engine like Phind, choose the âchatâ option from the top left and tell it what you are doing and provide the error message and it can hopefully guide you to how to resolve these.
If you still have issues, please post your manifest file and I can correct it
1 Like
If you want a full blown pwa with service workers changing, offline updates etc then I would suggest rather than using the BSS pwa options then use pwabuilder.com
Itâs free and helps you build your manifest and service worker files.
A quick look at your site shows that your theme colour isnât in a hex format and your short name is less than 3 characters.
2 Likes
@catkin @richards . I need your inputs here. So I have set a manifest.json file inside bootstrap studio and used the inputs I got from Phind as @catkin suggested. Well I still see these error messages. however, when I visited the site on my phone and went into setting, there was an option for me to download the app, and i downloaded the app as seen in my phone screen
The app is the first one âSkVâ. Errrmmmm⌠so does it mean it worked? And @catkin mentioned it is possible to have visitors of the site get prompted to download the app, I presume most visitors wouldnt know it is downloadable from the settings. How is this achievable. I havent looked into pwabuilder.com that @richards pasted here, is it possbile to subsequently use that tool to get the PWA onto app store
If you added a manifest.json into Bootstrap Studio then you need to
add the link in the Head Content in the settings dialog like this
<link rel="manifest" href="assets/js/manifest.json">
Uncheck the Generate progresive web app manifest in the
settings dialog under PWA
here is a simple example of a manifest.json.
The sizes of the images must be exactly the same size as the sizes in the manifest
{
"short_name": "SV",
"name": "Skills Verification",
"icons": [
{
"src": "https://skilsverification.co.uk/assets/img/profile.webp",
"type": "image/webp",
"sizes": "512x512",
"purpose": "any"
},
{
"src": "https://skilsverification.co.uk/assets/img/profile.png",
"type": "image/png",
"sizes": "512x512",
"purpose": "maskable"
}
],
"id": "https://skilsverification.co.uk/",
"start_url": "/",
"background_color": "#3367D6",
"display": "standalone",
"scope": "/",
"theme_color": "#3367D6",
"shortcuts": [
{
"name": "Watch some videos",
"short_name": "Videos",
"description": "Watch videos about Skills verification",
"url": "/videos",
"icons": [{ "src": "https://skilsverification.co.uk/assets/img/video.webp", "sizes": "256x242" }]
},
{
"name": "UK, London",
"short_name": "Uk",
"description": "View weather information for London",
"url": "/weather",
"icons": [{ "src": "https://skilsverification.co.uk/assets/img/weather.webp", "sizes": "256x242" }]
}
],
"description": "skilsverification.co.uk the best place to get your skills verified...",
"screenshots": [
{
"src": "https://skilsverification.co.uk/assets/img/screenshot-narrow.png",
"type": "image/png",
"sizes": "540x720",
"form_factor": "narrow"
},
{
"src": "https://skilsverification.co.uk/assets/img/screenshot-wide.png",
"type": "image/png",
"sizes": "720x540",
"form_factor": "wide"
},
{
"src": "https://skilsverification.co.uk/assets/img/screenshot-wide-videos.png",
"type": "image/png",
"sizes": "720x540",
"form_factor": "wide"
}
]
}
1 Like
Do you have a link to your site to double check?
As I mentioned before, visitors wonât be prompted to download your PWA unless they visit frequently and their are no errors in your PWA config.
You can force the browser to suggest users install the PWA with some JavaScript, or create your own popup to tell them about it.
1 Like
thanks, unchecking PWA in bootstrap setting worked. The updates in the manifest.json files seem to be working
You implement your service worker wrong
this in a javascript file inside Bootstrap Studio
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js', {scope: '/'})
.then(registration => {
console.log('Service Worker registered: ', registration)
}).catch(registrationError => {
console.log('Service Worker registration failed: ', registrationError)
})
})
}
upload the sw.js to the root
remove the sw.js from Bootstrap Studio
The root folder is the top level folder for your website, usually on your hosting provider this will be called public_html.
In simpler terms, while you have a folder called assets and your pages on one level, your Service Worker also needs to be on this level.
Incorrect:
/public_html/assets/js/service_worker.js
Correct:
public_html/service_worker.js
This setup as shown is not something supported by the hosting provided by Bootstrap Studio.