I create PWA app use reactjs and do/implement below steps for install it as a WebAPK (in android chrome):
1- valid manifest.json
2- install serviceworker
3- trusted https certificate
but when tap on add to home screen :
_most of the time install as a shortcut
_sometimes install app as a WebAPK and add to app list
my manifest.json like this :
{
"short_name": "myApp",
"name": "MyApp",
"icons": [
{
"src": "digi_64.png",
"sizes": "64x64",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "digi_192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "digi_256.png",
"sizes": "256x256",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "digi_512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any maskable"
}
],
"start_url": "/",
"display": "standalone",
"scope": "/",
"orientation": "portrait",
"theme_color": "#009688",
"background_color": "#FFFFFF"
}
my service-worker.js like this :
if (typeof importScripts === 'function') {
importScripts('https://*****.com/wb/workbox-sw.js');
/* global workbox */
if (workbox) {
console.log('Workbox is loaded');
workbox.setConfig({debug: true,});
workbox.core.skipWaiting();
workbox.core.clientsClaim();
/* injection point for manifest2 files. */
workbox.precaching.precacheAndRoute([{"revision":"482c307b535cf7a7fbe9460442b55dca","url":"index.html"},{"revision":"98b6e856dfde863e1a6fe4805f1697e4","url":"precache-manifest.98b6e856dfde863e1a6fe4805f1697e4.js"},{"revision":"1f3e10ff760fbad3f46f5002dd79bd63","url":"static/css/2.3cacd7bc.chunk.css"},{"revision":"376ca0485936b424c1df510f151b2aa9","url":"static/css/main.1e1ff1ee.chunk.css"},{"revision":"f89239b5271cfa9ec33a13390bb4ffa1","url":"static/js/2.03724f23.chunk.js"},{"revision":"1ea92516068f62199d362ad2a1f3d0fa","url":"static/js/main.a8d04045.chunk.js"},{"revision":"175ae123e9bc4f88a4f3228075f328a7","url":"static/js/runtime-main.01ce8b7d.js"}]);
} else {
// console.log('Workbox could not be loaded SWA. No Offline support');
}
}