[Résolu] PWA, minimum syndical pour rendre installable une web app

Bonsoir,

Je cherche à rendre mes sites web compatibles PWA (Progressive Web App) et la première étape est de rendre installable cette PWA via le navigateur.

Mon problème est que j'ai une erreur pour la déclaration du service worker (Inspecteur Chrome, outil Lighthouse) :

Aucun service worker de contrôle de la page et de start_url n'est enregistré
Plusieurs service workers existent pour cette origine. Toutefois, la page (https://scriptura.github.io/) est située en dehors du champ d'application.

En raison de cette erreur, l'application n'est pas installable sous Chrome/Windows. En revanche aucun problème pour Chrome/Android et Chrome/Linux qui permettent une installation sans problème avec le seul fichier manifest (Chrome semble plus permissif sous ces deux OS).

Quoi qu'il en soit je bloque dans la résolution de ce problème (j'ai essayé plein de trucs autour de la déclaration "start_url" du fichier manifest). Pour l'instant j'en suis là :

Tout d'abord la page de test : scriptura.github.io

Mon fichier manifest.webmanifest :

{
  "name": "Scriptura",
  "short_name": "Scriptura",
  "description": "Boîte à outils pour applications web",
  "start_url": "/",
  "scope": "/",
  "id": "/",
  "display": "standalone",
  "theme_color": "#ff6347",
  "background_color": "#ff6347",
  "icons": [
    {
      "src": "/favicons/logoAny.svg",
      "sizes": "150x150",
      "type": "image/svg+xml",
      "purpose": "any"
    },
    {
      "src": "/favicons/logo128.png",
      "sizes": "128x128",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "/favicons/logo192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "/favicons/logo384.png",
      "sizes": "384x384",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "/favicons/logo512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

Mon fichier serviceWorker.js (il ne fait rien pour l'instant, c'est juste pour tester) :

self.addEventListener('install', e => {
  console.log("Service worker installed")
})

self.addEventListener('activate', e => {
  console.log("Service worker activated")
})

self.addEventListener('fetch', e => {
  console.log("Service worker fetched")
})

La déclaration de ce fichier JavaScript dans mon fichier JS principal (main.js) :

if ('serviceWorker' in navigator) navigator.serviceWorker.register('/scripts/serviceWorker.js')

Je sais que cette dernière ligne est correctement déclarée car l'inspecteur lit le script (si je vais dans Inspecter>appli>Service workers).

Voilà voilà, je suis coincé, si vous avez des suggestions pour me tirer de là je vous en serais reconnaissant...
Modifié par Olivier C (06 Oct 2023 - 11:51)

Dites donc petits cachottiers, personne n'a répondu !

Pas grave j'ai trouvé : mon problème venait du fait que j'avais placé le fichier serviceWorker.js dans un sous répertoire et apparemment il ne faut pas, ou alors il faut que je passe par une déclaration HTTP Service-Worker-Allowed côté serveur.

Sujet résolu.
Modifié par Olivier C (09 Oct 2023 - 01:20)