web-dev-qa-db-fra.com

Manifest.json pour l'application web progressive ne fonctionne pas

J'essaie de faire fonctionner le fichier manifest.json pour mon application Web. Malheureusement, cela ne fonctionne pas correctement. Je reçois l'erreur suivante dans les devtools chrome:

Ligne: 1, colonne: 1, jeton inattendu.

Je suis à peu près sûr que le JSON est valide mais il a probablement quelque chose à voir avec le chemin dans le html-head . Qu'est-ce que je fais mal ici?

Je le lie dans mon html comme ceci: 

<link rel="manifest" href="/manifest.json">

Le manifeste se présente comme suit: 

{
  "short_name": "Tabbs Web App",
  "name": "Tabbs Web App",
  "description": "Tabbs is an digital booking service for the night life scenery",
  "icons": [
    {
      "src": "favicon.png",
      "sizes": "1024x1024",
      "type": "image/png"
    }
  ],
  "start_url": "./index.html",
  "display": "fullscreen",
  "theme_color": "#F5C33E",
  "background_color": "#ffffff"
}

Voici ma structure de carte:

enter image description here

J'espère que quelqu'un pourra trouver le problème! À votre santé!

reactjsprogressive-web-appsmanifest.json
4
Kevin Vugts

Premier problème, votre start_url n'est pas valide. Vous devriez apprendre à utiliser comment générer un rapport Lighthouse pour vous aider à trouver une telle cause de problème.

Au lieu d'avoir l'URL de démarrage comme ceci

"start_url": "./index.html",

Essayez ceci ou supprimez simplement "." à partir de l'URL ci-dessus et essayez, tout dépend de votre build et de votre hébergement, du manifeste et des emplacements index.html, etc. Vous devez donc essayer plusieurs et voir ce qui fonctionne.

"start_url": "http://tabbs-web-app.herokuapp.com/discover/home",

Je ne reçois pas l'erreur que vous avez mentionnée. Je reçois cependant celui ci-dessous, car votre site charge le contenu des demandes non HTTPS. Si vous visez à faire de votre site un PWA, convertissez toutes les requêtes HTTP via HTTPS et ajoutez un technicien de service.

Site cannot be installed: the page is not served from a secure Origin

Voici le rapport d'audit de Lighthouse, qui dit que le manifeste n'est pas enter image description here

4
Anand