【PWA學(xué)習(xí)】2. 使用 Manifest, 讓你的 WebApp 更 "Native"

引言

我們知道，在 chrome（等一些現(xiàn)代瀏覽器）中，你可以將訪問(wèn)的網(wǎng)站添加到桌面，這樣就會(huì)在桌面生成一個(gè)類似 “快捷方式” 的圖標(biāo)，當(dāng)你點(diǎn)擊該圖標(biāo)時(shí)，便可以快速訪問(wèn)該網(wǎng)站（Web App）

我們以 demo 為例，其添加到桌面后以及重新打開(kāi)時(shí)的狀態(tài)如下：


普通 Web App 被添加到桌面后的展示形式

然而，對(duì)于PWA來(lái)說(shuō)，有一些重要的特性：

  • Web App 可以被添加到桌面并有它自己的應(yīng)用圖標(biāo)
  • 從桌面開(kāi)啟時(shí)，會(huì)和原生app一樣有它自己的“開(kāi)屏圖”
  • 這個(gè) Web App 的樣子幾乎和原生應(yīng)用一樣——沒(méi)有瀏覽器的地址欄、工具條，似乎和 Native - App 一樣運(yùn)行在一個(gè)獨(dú)立的容器中

Web App Manifest

網(wǎng)絡(luò)應(yīng)用清單是一個(gè) JSON 文件，它告訴瀏覽器您的Web應(yīng)用程序以及在用戶移動(dòng)設(shè)備或桌面上“安裝”時(shí)它應(yīng)該如何表現(xiàn)。 Chrome需要提供清單才能顯示“添加到主屏幕”提示

典型的清單文件包括有關(guān)應(yīng)用程序名稱，應(yīng)使用的圖標(biāo)，啟動(dòng)時(shí)應(yīng)啟動(dòng)的 start_url 等信息

我們來(lái)看一下，learning-pwa 中的 manifest.json 文件內(nèi)容:

{
  "name": "每日一言",
  "short_name": "一言",
  "start_url": "/",
  "display": "standalone",
  "orientation": "portrait-primary",
  "background_color": "#333",
  "theme_color": "#5eace0",
  "description": "美好生活, 從一言開(kāi)始!",
  "icons": [
    {
      "src": "img/icons/book-32.png",
      "sizes": "32x32",
      "type": "image/png"
    },
    {
      "src": "img/icons/book-72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "img/icons/book-128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "img/icons/book-144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "img/icons/book-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "img/icons/book-256.png",
      "sizes": "256x256",
      "type": "image/png"
    },
    {
      "src": "img/icons/book-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

background_color

為 web 應(yīng)用程序預(yù)定義的背景顏色。此值在應(yīng)用程序樣式表中可以再次聲明。它主要用于在樣式表加載之前，當(dāng)加載 manifest，瀏覽器可以用來(lái)繪制 web 應(yīng)用程序的背景顏色。在啟動(dòng) web 應(yīng)用程序和加載應(yīng)用程序的內(nèi)容之間創(chuàng)建了一個(gè)平滑的過(guò)渡。

"background_color": "red"

備注： background_color 只是在 web 應(yīng)用程序加載時(shí)提高用戶體驗(yàn)，而當(dāng) web 應(yīng)用程序的樣式表可用時(shí)，不能替代作為背景顏色使用。

description

提供有關(guān) Web 應(yīng)用程序的一般描述。

"description": "The app that helps you find the best food in town!"

dir

指定名稱、短名稱和描述成員的主文本方向。與 lang 一起配置，可以幫助正確顯示右到左文本。

"dir": "rtl",
"lang": "ar",
"short_name": "??? ?? ???????!"

可選值：

  • ltr (由左到右)
  • rtl (由右到左)
  • auto (由瀏覽器自動(dòng)判斷)

備注： 當(dāng)省略時(shí)，默認(rèn)為 auto

display

定義開(kāi)發(fā)人員對(duì) Web 應(yīng)用程序的首選顯示模式。

"display": "standalone"

有效值：

顯示模式 描述
fullscreen 全屏顯示，所有可用的顯示區(qū)域都被使用，并且不顯示狀態(tài)欄
standalone 讓這個(gè)應(yīng)用看起來(lái)像一個(gè)獨(dú)立的應(yīng)用程序，包括具有不同的窗口，在應(yīng)用程序啟動(dòng)器中擁有自己的圖標(biāo)等。這個(gè)模式中，用戶代理將移除用于控制導(dǎo)航的 UI 元素，但是可以包括其他 UI 元素，例如狀態(tài)欄
minimal-ui 該應(yīng)用程序?qū)⒖雌饋?lái)像一個(gè)獨(dú)立的應(yīng)用程序，但會(huì)有瀏覽器地址欄。樣式因?yàn)g覽器而異
browser 該應(yīng)用程序在傳統(tǒng)的瀏覽器標(biāo)簽或新窗口中打開(kāi)，具體實(shí)現(xiàn)取決于瀏覽器和平臺(tái)。這是默認(rèn)的設(shè)置。

讓我們來(lái)看下這四種模式的差異：

display 四種模式的差異

當(dāng)然，不同的系統(tǒng)所表現(xiàn)出的具體樣式也不完全一樣。就像示例中的虛擬按鍵在fullscreen模式下會(huì)默認(rèn)隱藏。

icons

指定可在各種環(huán)境中用作應(yīng)用程序圖標(biāo)的圖像對(duì)象數(shù)組。例如，它們可以用來(lái)在其他應(yīng)用程序列表中表示 Web 應(yīng)用程序，或者將 Web 應(yīng)用程序與 OS 的任務(wù)切換器和/或系統(tǒng)偏好集成在一起。

"icons": [
  {
    "src": "icon/lowres.webp",
    "sizes": "48x48",
    "type": "image/webp"
  },
  {
    "src": "icon/lowres",
    "sizes": "48x48"
  },
  {
    "src": "icon/hd_hi.ico",
    "sizes": "72x72 96x96 128x128 256x256"
  },
  {
    "src": "icon/hd_hi.svg",
    "sizes": "72x72"
  }
]

圖像對(duì)象可能包含以下值：

字段 描述
sizes 圖像的大小。包含空格分隔的圖像尺寸的字符串，系統(tǒng)會(huì)選取最合適的圖像展示在相應(yīng)位置上
src 圖像文件的路徑。如果src是一個(gè)相對(duì) URL，則基本 URL 將是 manifest 的 URL
type 提示圖像的媒體類型。此字段的目的是允許用戶代理快速忽略不支持的媒體類型的圖像

lang

指定name和short_name成員中的值的主要語(yǔ)言。該值是包含單個(gè)語(yǔ)言標(biāo)記的字符串。

"lang": "en-US"

name

為應(yīng)用程序提供一個(gè)人類可讀的名稱，例如在其他應(yīng)用程序的列表中或作為圖標(biāo)的標(biāo)簽顯示給用戶。

"name": "Google I/O 2017"

orientation

定義所有 Web 應(yīng)用程序頂級(jí)的默認(rèn)方向 browsing contexts.

"orientation": "portrait-primary"

方向可以是以下值之一：

  • any
  • natural
  • landscape
  • landscape-primary
  • landscape-secondary
  • portrait
  • portrait-primary
  • portrait-secondary

prefer_related_applications

指定一個(gè)布爾值，提示用戶代理向用戶指示指定的相關(guān)應(yīng)用程序（請(qǐng)參見(jiàn)下文）可用，并建議通過(guò) Web 應(yīng)用程序。只有當(dāng)相關(guān)的本地應(yīng)用程序確實(shí)提供了某些 Web 應(yīng)用程序無(wú)法做到的事情時(shí)，才應(yīng)該使用它。

"prefer_related_applications": false

備注： 如果省略，默認(rèn)設(shè)置為 false

related_applications

指定一個(gè)“應(yīng)用程序?qū)ο蟆睌?shù)組，代表可由底層平臺(tái)安裝或可訪問(wèn)的本機(jī)應(yīng)用程序 - 例如可通過(guò) Google Play Store 獲取的原生 Android 應(yīng)用程序。這樣的應(yīng)用程序旨在替代提供類似或等同功能的 Web 應(yīng)用程序 - 就像 Web 應(yīng)用程序的本機(jī)應(yīng)用程序版本一樣。

"related_applications": [
  {
    "platform": "play",
    "url": "https://play.google.com/store/apps/details?id=com.example.app1",
    "id": "com.example.app1"
  }, {
    "platform": "itunes",
    "url": "https://itunes.apple.com/app/example-app1/id123456789"
  }]

應(yīng)用程序?qū)ο罂赡馨韵轮担?/p>

字段 描述
platform 可以找到應(yīng)用程序的平臺(tái)
url 可以找到應(yīng)用程序的 URL
id 用于表示指定平臺(tái)上的應(yīng)用程序的 ID

scope

定義此 Web 應(yīng)用程序的應(yīng)用程序上下文的導(dǎo)航范圍。這基本上限制了 manifest 可以查看的網(wǎng)頁(yè)。如果用戶在范圍之外瀏覽應(yīng)用程序，則返回到正常的網(wǎng)頁(yè)。

如果scope是相對(duì) URL，則基本 URL 將是 manifest 的 URL。

"scope": "/myapp/"

short_name

為應(yīng)用程序提供簡(jiǎn)短易讀的名稱。這是為了在沒(méi)有足夠空間顯示 Web 應(yīng)用程序的全名時(shí)使用。

"short_name": "I/O 2017"

start_url

指定用戶從設(shè)備啟動(dòng)應(yīng)用程序時(shí)加載的 URL。如果以相對(duì) URL 的形式給出，則基本 URL 將是 manifest 的 URL。

"start_url": "./?utm_source=web_app_manifest"

theme_color

定義應(yīng)用程序的默認(rèn)主題顏色。這有時(shí)會(huì)影響操作系統(tǒng)顯示應(yīng)用程序的方式（例如，在 Android 的任務(wù)切換器上，主題顏色包圍應(yīng)用程序）。

"theme_color": "aliceblue"

使用

創(chuàng)建好 manifest 文件后，下一步就是需要知道如何能讓我們的 Web App 使用它——非常簡(jiǎn)單，只需要在 head 中添加一個(gè) link 標(biāo)簽：

<!-- 在 index.html 中添加以下 meta 標(biāo)簽 -->
<link rel="manifest" href="/manifest.json">

這樣，在 android 上我們使用 chrome 將應(yīng)用添加到桌面，就會(huì)擁有文章開(kāi)頭處的 PWA 效果

兼容性

上面的一切看似美好，然而真的如此么？

到目前為止，我們的工作都非常順利：創(chuàng)建 manifest.json，添加 meta 標(biāo)簽，然后把我們的 Web App 添加到桌面。然而，如果我們?cè)?iPhone 上訪問(wèn)我們的站點(diǎn)，然后 “添加到主屏幕”，你會(huì)發(fā)現(xiàn)——一切都失效了

manifest 的兼容性

如果你看過(guò)Can I use上 manifest 的兼容性，那會(huì)令你更加頭疼。別擔(dān)心，在 iOS 與 Windows 上，我們有其他的方式

iOS（safari）中的處理方式

safari 雖然不支持 Web App Manifest，但是它有自己的一些 head 標(biāo)簽來(lái)定義相應(yīng)的資源與展示形式：

屬性 說(shuō)明
apple-touch-icon 桌面圖標(biāo)，通過(guò)在head中添加<link rel="apple-touch-icon" href="your_icon.png">即可。其中還可以添加sizes屬性，來(lái)指示系統(tǒng)使用在各類平臺(tái)（iphone、ipad… ）中使用最合適的圖標(biāo)
apple-mobile-web-app-title 應(yīng)用的標(biāo)題。注意，這里需要使用 meta標(biāo)簽<meta name="apple-mobile-web-app-title" content="AppTitle">
apple-mobile-web-app-capable 類似于manifest中的display的功能，通過(guò)設(shè)置為yes可以進(jìn)入 standalone 模式，同樣也是 meta 標(biāo)簽<meta name="apple-mobile-web-app-capable" content="yes">
apple-mobile-web-app-status-bar-style 這會(huì)改變 iOS 移動(dòng)設(shè)備的狀態(tài)欄的樣式，并且只有在 standalone 模式中才會(huì)有效果。<meta name="apple-mobile-web-app-status-bar-style" content="black">，不過(guò)在iPhoneX上black會(huì)導(dǎo)致?tīng)顟B(tài)欄不顯示任何東西

下面是 learning-pwa 項(xiàng)目中的相關(guān)設(shè)置

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="每日一言">
<link rel="apple-touch-icon" href="img/icons/book-256.png">

IE、Edge 中的處理方式

與 Safari 類似，IE 中也有自己的 meta 標(biāo)簽來(lái)指示相應(yīng)的資源。其中比較重要的有：

屬性 說(shuō)明
application-name 指明了 app 的名稱
msapplication-TileColor 指明了 “tile” 的背景顏色
msapplication-xxxlogo 不同大小的 “tile” 所使用的圖標(biāo)，包括這幾種：msapplication-square70x70logo, msapplication-square150x150logo, msapplication-wide310x150logo, msapplication-square310x310logo

下面是 learning-pwa 項(xiàng)目中的相關(guān)設(shè)置，其中圖標(biāo)的設(shè)置為了方便就復(fù)用了已有的圖標(biāo)文件

<meta name="application-name" content="每日一言" />
<meta name="msapplication-TileColor" content="#222">
<meta name="msapplication-square70x70logo" content="img/icons/book-72.png" />
<meta name="msapplication-square150x150logo" content="img/icons/book-144.png" />
<meta name="msapplication-square310x310logo" content="img/icons/book-256.png" />

本章分支: manifest

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容