Why does my PWA works on my phone but not on others? - progressive-web-apps

Question

Good day, I'm currently working on PWAs (Progressive Web Apps), and I wanted to make a try:
Here is my app script:
if( 'serviceWorker' in navigator ) {
navigator.serviceWorker.register( '/service-worker.js' )
.then( ( reg ) => logServe( 'service worker registred', reg ) )
.catch( ( err ) => logServe( 'service worker not registred', err ) );
}
Here is my manifest:
{
"name": "WebApp",
"short_name": "PWA",
"description": "Progressive Web App",
"start_url": "/",
"icons": [
{
"src": "icon/icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
"src": "icon/icon-256.png",
"sizes": "256x256",
"type": "image/png",
"purpose": "any"
},
{
"src": "icon/icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
"src": "icon/icon-96.png",
"sizes": "96x96",
"type": "image/png",
"purpose": "any"
}
],
"theme_color": "#000000",
"background_color": "#FFFFFF",
"display": "standalone",
"orientation": "portrait"
}
And here is my service worker:
self.addEventListener( 'install', evt => {
logServe( 'service worker has been installed' );
} );
self.addEventListener( 'activate', evt => {
logServe( 'service worker has been activated' );
} );
self.addEventListener( 'fetch', evt => {
logServe( 'fetch event', evt );
} );
To test it, I tried:
On my computer (with edge/chrome) -> I can see the default install button in the address bar, and allow me to install it
On my samsung phone through ngrok and on chrome -> It shows the button* I've set up to install the app and allow me to install it
Here is the script for my custom installation button*:
let deferredPrompt;
const addBtn = document.getElementsByTagName( 'a' )[0];
addBtn.style.display = 'none';
window.addEventListener( 'beforeinstallprompt', ( e ) => {
// Prevent Chrome 67 and earlier from automatically showing the prompt
e.preventDefault();
// Stash the event so it can be triggered later.
deferredPrompt = e;
// Update UI to notify the user they can add to home screen
addBtn.style.display = 'block';
addBtn.addEventListener( 'click', ( e ) => {
// hide our user interface that shows our A2HS button
addBtn.style.display = 'none';
// Show the prompt
deferredPrompt.prompt();
// Wait for the user to respond to the prompt
deferredPrompt.userChoice.then( ( choiceResult ) => {
if( choiceResult.outcome === 'accepted' ) {
console.log( 'User accepted the A2HS prompt' );
} else {
console.log( 'User dismissed the A2HS prompt' );
}
deferredPrompt = null;
} );
} );
} );
But as soon as I try on another device, it fails, I see the "service worker registered", but that's it.
So I checked on a PWA framework/validator (PWA Builder), and this validator told me I got all that is required to publish my PWA.
Any idea from where it's coming from?
EDIT
After sorting out my Lighthouse issue, I performed few tests and tried correcting some pointS, but I still have 2 issues I cannot solve:
a HTTP redirecting issue, I tried with the HTML tag <link rel="canonical" href="my https domain url"/> or with the following HTACCESS:
#RewriteEngine on
#ReWriteCond %{SERVER_PORT} !^443$
#RewriteRule ^/(.*) https://%{HTTP_HOST}/$1 [NC,R,L]
but I still have this issue (if possible, I would like to avoid making server set up to solve this.
a maskable issue on Chrome (even if I added maskables icons)
Here is my new icons definition:
{
"src": "icon/any/x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
"src": "icon/any/x384.png",
"sizes": "384x384",
"type": "image/png",
"purpose": "any"
},
{
"src": "icon/any/x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
"src": "icon/any/x128.png",
"sizes": "128x128",
"type": "image/png",
"purpose": "any"
},
{
"src": "icon/any/x96.png",
"sizes": "96x96",
"type": "image/png",
"purpose": "any"
},
{
"src": "icon/any/x72.png",
"sizes": "72x72",
"type": "image/png",
"purpose": "any"
},
{
"src": "icon/any/x48.png",
"sizes": "48x48",
"type": "image/png",
"purpose": "any"
},
{
"src": "icon/maskable/x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "icon/maskable/x384.png",
"sizes": "384x384",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "icon/maskable/x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "icon/maskable/x128.png",
"sizes": "128x128",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "icon/maskable/x96.png",
"sizes": "96x96",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "icon/maskable/x72.png",
"sizes": "72x72",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "icon/maskable/x48.png",
"sizes": "48x48",
"type": "image/png",
"purpose": "maskable"
}
Here is what happen on Edge - Chrome when doing a Lighthouse test (Edge vs Chrome)
lighthouse edge and chrome