創建自定義 PWA 啟動畫面
已發表: 2020-08-31目錄
如之前在我們的 PWA 清單教程中所述，您只需在manifest.json中添加幾行代碼，即可為您的 PWA 創建一個獨特的啟動畫面。 該過程並不像人們期望的那樣過於復雜，而且您實際上可以立即完成所有事情。 讓我們直接進入它，我們應該：
PWA 中的閃屏案例
未配置時，默認情況下打開您的 PWA 的用戶會看到一個空白的白色屏幕。 這本身應該沒問題，因為在現代設備上，打開應用程序的時間幾乎是即時的。 但是，在速度較慢的設備上，這可能是一個問題，因為它會破壞用戶對您的應用程序的最初看法。 再加上具有 1GB RAM 的低規格設備仍然是最常見的事實，代表您品牌的獨特啟動畫面是必須的。
如何創建自己的啟動畫面
在 Android 上，這個過程就像輸入三行代碼一樣快。 然而，對於 iOS，這是一個不同的故事，因為您必須為不同的屏幕尺寸製作不同的啟動圖像尺寸。
安卓版
手動進行
在您的manifest.json文件中，確保正確配置了這三個屬性： name 、 background_color和icons ：
-
name：你的 PWA 的名稱 background_color：初始屏幕的背景顏色。 僅識別有效的 CSS 顏色值。-
icons：一個.png圖標，最小尺寸為 192×192 像素。
例如，正確配置的manifest.json應該是這樣的。 請注意， icons屬性有四種不同的大小——提供這些不同大小的圖標是為了為不同的設備提供最佳兼容性。
{
"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”
}
]
} 設置完屬性（和你的manifest.json文件）後，支持 PWA 的瀏覽器（通常是 Chrome）會自動為你的啟動屏幕生成不同的圖標大小並相應地顯示它們。
很輕鬆，不是嗎？ 如果你問我們，我們認為這就是開發體驗應該是什麼樣的。
推薦閱讀：PWA Manifest：輕鬆創建 Web App Manifest
使用清單生成器
您可以使用我們的清單生成器輕鬆地自動化此過程。 只需輸入所需的信息，我們的生成器就會為您生成一個.zip ，其中包含您需要的所有信息。
對於 iOS
Apple 肯定不想讓開發人員輕鬆完成這個過程。 在撰寫本文時，Web App Manifest 支持的狀態仍列為部分支持——在首次出現兩年後保持不變。 這意味著 PWA 不支持icons 、 minimal-ui 、 fullscreen 、 theme-color和orientation 。
幸運的是，還有一種方法可以解決這個問題，即使用<apple-touch-startup-image>元標記。 不是一個理想的解決方案——但它確實有效。
<!-- iPhone X 啟動畫面 (1125px x 2436px) --> <link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" href="/apple -launch-1125x2436.png">
通過使用<apple-touch-startup-image>元標記，您可以為 PWA 的初始屏幕指定一個固定分辨率的圖像（即startup-image ）。 此自定義啟動畫面僅與一種屏幕尺寸兼容，您需要更多不同的圖像尺寸才能適應市場上 Apple 產品的不同屏幕尺寸。
這意味著您需要為每個屏幕尺寸創建兩個啟動畫面，一個用於每個方向（橫向和縱向）。 當我們涵蓋了列表中的一些設備時，我們的代碼應該是這樣的：
<!-- iPhone X (1125px x 2436px) --> <link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" href="/apple -launch-1125x2436.png"> <!-- iPhone 8、7、6s、6 (750px x 1334px) --> <link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" href="/apple -launch-750x1334.png"> <!-- iPhone 8 Plus、7 Plus、6s Plus、6 Plus (1242px x 2208px) --> <link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3)" href="/apple -launch-1242x2208.png"> <!-- iPhone 5 (640px x 1136px) --> <link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="/apple -launch-640x1136.png"> <!-- iPad Mini，Air (1536px x 2048px) --> <link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)" href="/apple -launch-1536x2048.png"> <!-- iPad Pro 10.5" (1668px x 2224px) --> <link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)" href="/apple -launch-1668x2224.png"> <!-- iPad Pro 12.9" (2048px x 2732px) --> <link rel="apple-touch-startup-image" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)" href="/apple -launch-2048x2732.png">
將此代碼鏈接到您的index.html的<head>中，並且不要忘記在下面插入<meta>標記以啟用 PWA 行為，否則我們的啟動屏幕將根本無法工作。
<meta name="apple-mobile-web-app-capable" content="yes">
有了這個，你應該準備好了。 啟動您的 iOS PWA，您將能夠看到您的啟動畫面。
使用 iOS 啟動畫面生成器
當然，還有更好的方法來自動化這個過程，那就是使用 iOS Splash Screen Generator。 以您的圖像為源，生成器將為您生成不同大小的圖像以及插入index.html所需的 HTML 代碼。
結論
雖然不完全是入職體驗的一部分，但啟動畫面仍然在建立對您的品牌的積極看法方面發揮著重要作用——它是一種唾手可得的果實，可能會帶來您意想不到的結果。
我們希望本教程能解決您的確切問題。 如果您和您的團隊沒有太多經驗，那麼實施和自定義 PWA 可能會讓人頭疼。 像 SimiCart 這樣的專業 PWA 開發解決方案可以幫助它變得更容易。