And Google is the best way to find solutions to one’s problems. For the time being I do not feel the necessity to write a comprehensive guide on transforming Your Appgyver app to a PWA.
This is the reason:
There you can easily generate the required manifest.json and service-worker.js.
The only thing you have to manipulate is the index.html of your Appgyver web app. This you can do after downloading and extracting the built app.
It is important that wherever you set up the hosting for your app it has to have secure connection, else the PWA won’t work. For a small project any hosting + Cloudflare routing should and would work.
Just a few notes:
Sometimes the PWABuilder provides wrong manifest.json.
- If you have the affinity then check the generated file. It should look something like this:
{
"background_color": "#ffffff",
"display": "minimal-ui",
"name": "Hey, Alfa!",
"orientation": "any",
"scope": "/",
"short_name": "Hey, Alfa!",
"start_url": "/",
"theme_color": "#ffffff",
"icons": [{
"src": "/logo-alfatours.png",
"type": "image/png",
"sizes": "1001x1001"
},
{
"src": "/logo-alfatours.png",
"type": "image/png",
"sizes": "1001x1001",
"purpose": "any maskable"
}
]
}
Also the service-worker.js will look a bit different for each choice you can have there on the website, but should look like this:
const CACHE = "pwabuilder-offline";
importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js');
self.addEventListener("message", (event) => {
if (event.data && event.data.type === "SKIP_WAITING") {
self.skipWaiting();
}
});
workbox.routing.registerRoute(
new RegExp('/*'),
new workbox.strategies.StaleWhileRevalidate({
cacheName: CACHE
})
);
These two are the separate files, that you have to add to the folder, your downloaded and unpackaged app. Also make sure to create an icon that is at least 526x526 of the size and upload that. Always update the manifest.json according to your icon’s size.
For example here is my final output of the latest project here. An app with 9 pages, Firebase auth, and hundreds of data in FB. Run smooth and feels native on MacOS and Windows10 as well. (I am pretty sure there is no reason why it would not run perfectly fine on Win11 either, since it runs in fact in a specified browser window.)
MacOS:
Windows10:
