I‘m looking for a way to deploy my web app as a Progressive Web App (PWA). PWAs enable coding apps with the standard web programming model, still delivering a device independent installation and runtime behavior on any device.
See https://web.dev/progressive-web-apps/
To enable PWAs I need to basically place two files in the root directory of my web deployment and I need to enhance the header section of the index.html with a statement like
<link rel="manifest" href="manifest.json">
So, very non-invasive, but I didn’t find a way to do this. I’ve experimented a bit with the preview deployment by uploading and changing files via the backend/files console, but didn’t succeed.
Is there a way to enhance deployments in a proper way to achieve this?
We will be happy to assist you. I need to ask you a few more questions so I can help you.
What is your application id, and where is index.html is situated ?
Hi @sergey.kuk ,
Thanks for the offer.
My AppID is 5BDF0E64-9F03-6F8E-FF75-0E183AF61100.
The issue is, I don’t know the conventions behind the file structure and layout which I’m seeing in the file browser (backend/files). There are a lot of index.html in various folders.
For instance, I can start a preview of my page and then modify index.html in folder ‘Root/ui-builder/containers/default’. Using a browser-refresh then shows that my changes are reflected in the preview (I see this using chrome dev tools). So obviously, the preview is served from this folder. However, re-deploying the preview (using the preview button of UI Builder) wipes out my modifications. Obviously there is a generation step which re-generates index.html.
So, I’m looking for a place where I can put in my enhancement (in some template index.html, I guess), so that enhancements survive redeployments/regenerations of preview and of course real deployments.
Similary, I need to place a json-file into the root of the final preview/deployment. But I didn’t find a place where to upload it to, so that it survives the regeneration of the preview/deployment.
Thanks,
As written, the other issue is around providing additional configuration files to the root (or somewhere else) of the deployed web app. Such files support standard web mechanisms like PWA, or other frameworks, like Google Analytics.
Regards
o deploy your web app as a Progressive Web App (PWA), you indeed need two main things: a manifest file and a service worker.
Manifest file: This file provides important information about your PWA, like its name, icons, and theme color, and is linked in the <head> section of your index.html like this:
<link rel="manifest" href="manifest.json">
This file should be placed in the root directory of your deployment, and it’s important to ensure that it includes all the necessary information, like app name, icon sizes, and display modes.
Service Worker: This file enables offline functionality and caching, making your app work even when there’s no internet connection. You’ll need to register the service worker in your JavaScript file like this:
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js')
.then(function(registration) {
console.log('Service Worker registered with scope:', registration.scope);
})
.catch(function(error) {
console.log('Service Worker registration failed:', error);
});
}
If you’ve uploaded the files to the backend, make sure the manifest.json and service-worker.js are accessible from the root of your server, and there are no issues with pathing.
If your hosting environment doesn’t allow you to modify the deployment directly through the backend/files console, you might need to use a build tool or a CI/CD pipeline to ensure these files are included in your production environment. Some platforms, like Firebase Hosting or Netlify, make it easier to deploy PWAs.