PWA 清單：輕鬆創建 Web 應用清單

正確配置的 Web 應用程序清單對於 PWA 的安裝過程至關重要，因為沒有它，整個過程都是不可能的。 令人驚訝的是，正確配置您的 Web 應用程序清單並不難。

它是乾什麼用的？

Web 應用清單是 PWA 的重要組成部分，因為它決定了您的應用如何在初始屏幕和用戶的主屏幕上向用戶展示自己。 這些都是重要的初始階段，有助於塑造用戶對您的應用程序的印象，這就是為什麼正確處理它對您來說很重要。

配置 manifest.json 的方法

從頭開始

稍微熟悉一下 JSON 數據格式，您就可以輕鬆創建自己的 Web 應用程序清單。

一個典型的manifest.json應該是這樣的：

 {
    "theme_color": "#f69435",
    "background_color": "#ffffff",
    “顯示”：“全屏”，
    “範圍”： ”/”，
    "start_url": "/",
    "app_name": "SimiCart",
    "short_name": "SimiCart",
    “描述”：“Magento 的下一代電子商務解決方案”，
    “圖標”：[
        {
            "src": "/icon-192x192.png",
            “尺寸”：“192x”，
            “類型”：“圖像/png”
        },
        {
            "src": "/icon-256x256.png",
            “尺寸”：“256x”，
            “類型”：“圖像/png”
        },
        {
            "src": "/icon-384x384.png",
            “尺寸”：“384x”，
            “類型”：“圖像/png”
        },
        {
            "src": "/icon-512x512.png",
            “尺寸”：“512x”，
            “類型”：“圖像/png”
        }
    ]
}

您可以保留部分代碼，但仍有一些必需的成員，否則用戶將無法安裝您的 PWA：

 名稱、短名稱、圖標、顯示、start_url

• name ：您的應用程序名稱，顯示在主屏幕和其他各種地方的應用程序圖標下方。 保持 name 屬性的值簡短而簡單。

• short-name ：當您的name屬性的值無法適應用戶的屏幕時，將使用此屬性的值。 建議您的short-name應少於 20 個字符。 事實上，拍攝 10 個角色。

• icons ：您的應用程序的圖標，它可以包含用於不同操作系統和設備的多個圖像。 您可以為瀏覽器定義一組圖標，用於添加到主屏幕、啟動屏幕等。

例如，僅 iOS 就需要為其 4 台設備提供 4 種不同的尺寸：

• iPhone：120 x 120 像素和 180 x 180 像素
• iPad Pro：167 x 167 像素
• iPad 和 iPad mini：152 x 152 像素

即使是谷歌瀏覽器也需要至少 2 種不同的尺寸才能在 iOS 和 Android 上完全可用：

• 512 x 512 像素
• 192 x 192 像素

為了調用您的圖像圖標，需要使用一組屬性，即src 、 type和sizes 。

• src ：圖標圖像文件的路徑
• types ：圖像文件類型
• sizes ：圖像的寬度 x 高度，以像素為單位

 “圖標”：[ 
    {
       "src" : "/imgs/icon152.png",
       “類型”：“圖像/png”，
       “尺寸”：“192x192”
    },
    {
       "src" : "/imgs/icon215.png",
       “類型”：“圖像/png”，
       “尺寸”：“512x512”
    }
]

• display ：指示應用程序應如何顯示。 為了獲得身臨其境和類似應用程序的體驗，建議您將其設置為fullscreen （無 UI）。 但是，也可以使用諸如standalone 、 minimal-ui之類的選項，它們在性能方面成本較低，但它們是以失去沉浸式體驗為代價的（可能仍會顯示狀態欄）。

• start_url ：指示應用程序的啟動路徑。 如果您的應用程序從存儲manifest.json的同一個 .root 目錄開始，您的start_url值可能是一個簡單的/ 。

可選成員

循規蹈矩是一回事，但總有空間讓你努力變得更好。 以下是我們推薦的用於更好、更詳細的 Web 應用程序清單的鍵：

• scope ：限制用戶可以去的範圍。 如果用戶在範圍之外導航，它會恢復到瀏覽器選項卡或窗口內的普通網頁。 要確定您網站的範圍，只需輸入/或輸入您網站的完整 URL。

備註：
– scope的默認行為是提供manifest.json的目錄。
– 在 Web 應用程序中打開的任何鏈接都將在現有 PWA 窗口中呈現。 要在瀏覽器選項卡中打開任何鏈接，您需要將target="_blank"添加到<a>標記。
– start_url必須在範圍內。

• background_color ：指示某些應用程序上下文中的背景顏色。 更具體地說，該字段可用於設置啟動畫面的背景顏色。

• theme_color ：表示 Web 應用的 UI 元素（例如地址欄）的主題顏色。 僅當從主屏幕啟動站點時，更改才會在站點範圍內應用且有效。

注意：您的頁面級配置——例如，主題顏色元標記： <meta name="theme-color" content="#3367D6"> ——將覆蓋 web 應用清單中的theme_color值。

• description ：這應該是不言自明的。

• shortcuts ：定義 Web 應用程序中頁面的快捷方式。 可以通過在 Android 上長按應用程序的啟動器圖標或右鍵單擊任務欄 (Windows)/停靠欄 (macOS) 上的應用程序圖標來訪問應用程序快捷方式。

 “捷徑”：[
  {
    “名稱”：“通知”，
    "url": "/user/notifications/",
    "description": "你錯過的新聞"
  },
  {
    "name": "創建新訂單",
    “網址”：“/創建/訂單”
  },
  {
    "name": "我的願望清單",
    “網址”：“/用戶/願望清單”
  }
]

使用 Web 應用清單生成器

一種更簡單、更輕鬆的方法是使用 Web 應用程序清單生成器。 生成器接收您的輸入，並在此基礎上生成可按原樣使用的功能齊全的 Web 應用程序清單。

鏈接你的 manifest.json

一切都正確配置後，下一步是在 HTML 標頭中引用 Web 應用程序清單。

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

引用 Web 應用清單後，所有受支持的瀏覽器現在都應該正確識別您的manifest.json 。 有關當前支持的瀏覽器的完整列表，請查看 CanIUse。

結論

這就是一個簡單的網絡應用清單。 創建一個功能齊全的manifest.json應該不需要任何時間。 只需進行一些額外的調整，您的 Web 應用程序就可以像任何其他 PWA 一樣安裝。