My goal is to add a button that users can click on our mobile web app, which allows them to add a shortcut on their devices’ home screen.
I understand that in most mobile browsers, there is already a built-in function to achieve this, usually in the menu.
However, I would like it to be more visible and available to users.
The problem I am facing is that the project build is unable to copy over my manifest.json file from the build-templates folder to the build folder.
Progressive web app (PWA) implementation
I looked at some methods as how to achieve this function, and most of them are related to progressive web app.
So in summary, here are the steps:
- Have all the icons and manifest.json added to the index.html file, so that it can be used when the user “install” the web app on their home screen.
I added the code below in the index.html file, and also put all the icons and the manifest.json in the correct location of build-templates folder.
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
- When the user has interacted with the web app for more than 30 sec, and all other criteria are met, the web app should produce the “beforeinstallprompt” event, which also allows the web app to prompt the user whether they would like to install the web app.
I have achieved this by using this piece of code in the script from the above documentation.
The “show install promotion” function just makes the custom install button appear.
start () {
this.deferredPrompt = null;
window.addEventListener('beforeinstallprompt', (e) => {
// Prevent the mini-infobar from appearing on mobile
e.preventDefault();
// Stash the event so it can be triggered later.
this.deferredPrompt = e;
// Update UI notify the user they can install the PWA
this.showInstallPromotion();
// Optionally, send analytics event that PWA install promo was shown.
console.log(`'beforeinstallprompt' event was fired.`);
});
window.addEventListener('appinstalled', () => {
console.log('PWA was installed');
});
},
There are more steps, but I am already stuck on the first step.
Problem
When I do the project build, all the icons and the HTML file are copied over, but not the manifest.json file.
When I run the finished build, it produces this error in the console.
When I manually copy over the manifest.json file, it does not register in the web app.
And since not even the first step is satisfied, the “beforeinstallprompt” event is never fired.
I do not know how manifest.json is treated in cc, but I am absolutely stuck and don’t know what else I can try.
Please help!
Just for reference, I will put the content of manifest.json down below. However, I don’t think it’s related to the problem.
{
"short_name": "PrototypeDJ",
"name": "Cocos Creator | PrototypeDJ",
"icons": [
{
"src": "\/android-icon-36x36.png",
"sizes": "36x36",
"type": "image\/png",
"density": "0.75"
},
{
"src": "\/android-icon-48x48.png",
"sizes": "48x48",
"type": "image\/png",
"density": "1.0"
},
{
"src": "\/android-icon-72x72.png",
"sizes": "72x72",
"type": "image\/png",
"density": "1.5"
},
{
"src": "\/android-icon-96x96.png",
"sizes": "96x96",
"type": "image\/png",
"density": "2.0"
},
{
"src": "\/android-icon-144x144.png",
"sizes": "144x144",
"type": "image\/png",
"density": "3.0"
},
{
"src": "\/android-icon-192x192.png",
"sizes": "192x192",
"type": "image\/png",
"density": "4.0"
}
],
"start_url": "/",
"scope": "/",
"display": "standalone",
"background_color": "#000000",
"description": "A Cocos Creator project, prototype DJ UI"
}
