Manifest.json用於漸進式Web應用程序無法正常工作

Question

我試圖讓manifest.json文件適用於我的Web應用程序。 不幸的是它無法正常工作。 我在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"
}

這是我的地圖結構：

希望有人能找到問題！ 干杯!

Answer 1

第一個問題，你的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請求並添加服務工作者。

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

這是燈塔審計報告，其中顯示Manifest不是

Answer 2

第一件事：這個"name": "slangoApp",應該像這個"name": "slangoapp",請記住它不應該包含空格的大寫字母。

第二件事：

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