web-dev-qa-db-ja.com

プログレッシブWebアプリのManifest.jsonが機能しない

ウェブアプリでmanifest.jsonファイルを機能させようとしています。残念ながら正しく機能していません。 chrome devtools：

行：1、列：1、予期しないトークンです。

JSONが有効であることは確かですが、おそらく html-head のパスと関係があります。ここで何が悪いのですか？

私はこのように私のhtmlにリンクしています：

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

マニフェストは次のようになります：

{
  "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"
}

これは私のマップ構造です：

enter image description here

うまくいけば、誰かが問題を見つけることができます！乾杯！

reactjsprogressive-web-appsmanifest.json
4
Kevin Vugts

最初の問題、start_urlが無効です。このような問題の原因を見つけるために、 Lighthouseレポートの生成方法 の使い方を学ぶ必要があります。

このように開始URLを持っている代わりに

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

これを試すか、単に「。」を削除してください。上記のURLから試してみてください、それはすべてあなたのビルドとホスティング、マニフェストとindex.htmlの場所などに依存しています。

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

私はあなたが言ったエラーを得ていません。ただし、サイトがHTTPS以外のリクエストからコンテンツを読み込んでいるため、以下のようになります。サイトをPWAにすることをターゲットにしている場合は、HTTPS経由ですべてのHTTPリクエストを変換し、Service Workerを追加します。

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

これは、マニフェストがそうではないと言っている灯台監査レポートです enter image description here

4
Anand