摘要：，不過在上會(huì)導(dǎo)致狀態(tài)欄不顯示任何東西。下面是項(xiàng)目中的相關(guān)設(shè)置圖書搜索中的處理方式與類似，中也有自己的標(biāo)簽來指示相應(yīng)的資源。

《PWA學(xué)習(xí)與實(shí)踐》系列文章已整理至gitbook - PWA學(xué)習(xí)手冊(cè)，文字內(nèi)容已同步至learning-pwa-ebook。轉(zhuǎn)載請(qǐng)注明作者與出處。

本文是《PWA學(xué)習(xí)與實(shí)踐》系列的第二篇文章。文中的代碼都可以在learning-pwa的manifest分支上找到（git clone后注意切換到manifest分支）。

PWA作為時(shí)下最火熱的技術(shù)概念之一，對(duì)提升Web應(yīng)用的安全、性能和體驗(yàn)有著很大的意義，非常值得我們?nèi)チ私馀c學(xué)習(xí)。對(duì)PWA感興趣的朋友歡迎關(guān)注《PWA學(xué)習(xí)與實(shí)踐》系列文章。

我們知道，在chrome（等一些現(xiàn)代瀏覽器）中，你可以將訪問的網(wǎng)站添加到桌面，這樣就會(huì)在桌面生成一個(gè)類似“快捷方式”的圖標(biāo)，當(dāng)你點(diǎn)擊該圖標(biāo)時(shí)，便可以快速訪問該網(wǎng)站（Web App）。我們以第一篇文章中的demo為例，其添加到桌面后以及重新打開時(shí)的狀態(tài)如下：

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

Web App可以被添加到桌面并有它自己的應(yīng)用圖標(biāo)；

同時(shí)，從桌面開啟時(shí)，會(huì)和原生app一樣有它自己的“開屏圖”；

更進(jìn)一步的，這個(gè)Web App在的樣子幾乎和原生應(yīng)用一樣——沒有瀏覽器的地址欄、工具條，似乎和Native App一樣運(yùn)行在一個(gè)獨(dú)立的容器中。

就像下面這樣：

接下來，我們會(huì)基于該系列——《PWA技術(shù)學(xué)習(xí)與實(shí)踐》的前一篇《2018，開始你的PWA學(xué)習(xí)之旅》 中所提及的一個(gè)普通Web App的demo來進(jìn)行改造，來實(shí)現(xiàn)PWA的這一效果?；蛘咧苯訌膅ithub clone learning-pwa（https://github.com/alienzhou/...）這個(gè)倉庫也可以。切換到manifest分支，即可看到本文的最后成果。

Manifest是一個(gè)JSON格式的文件，你可以把它理解為一個(gè)指定了Web App桌面圖標(biāo)、名稱、開屏圖標(biāo)、運(yùn)行模式等一系列資源的一個(gè)清單。

manifest 的目的是將Web應(yīng)用程序安裝到設(shè)備的主屏幕，為用戶提供更快的訪問和更豐富的體驗(yàn)。 —— MDN

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

{
    "name": "圖書搜索",
    "short_name": "書查",
    "start_url": "/",
    "display": "standalone",
    "background_color": "#333",
    "description": "一個(gè)搜索圖書的小WebAPP（基于豆瓣開放接口）",
    "orientation": "portrait-primary",
    "theme_color": "#5eace0",
    "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"
    }]
}

可以看出，上面的JSON配置文件非常直觀，通過聲明各個(gè)屬性的值，即可改造我們的Web App。那么下面就針對(duì)每個(gè)具體值進(jìn)行簡(jiǎn)單的介紹。

指定了Web App的名稱。short_name其實(shí)是該應(yīng)用的一個(gè)簡(jiǎn)稱。一般來說，當(dāng)沒有足夠空間展示應(yīng)用的name時(shí)，系統(tǒng)就會(huì)使用short_name。可以看到本文的例子中，圖書搜索這個(gè)應(yīng)用在桌面上展示的名稱就是short_name書查。

這個(gè)屬性指定了用戶打開該Web App時(shí)加載的URL。相對(duì)URL會(huì)相對(duì)于manifest。這里我們指定了start_url為/，訪問根目錄。

display控制了應(yīng)用的顯示模式，它有四個(gè)值可以選擇：fullscreen 、standalone 、minimal-ui和browser 。

fullscreen ：全屏顯示，會(huì)盡可能將所有的顯示區(qū)域都占滿；

standalone ：獨(dú)立應(yīng)用模式，這種模式下打開的應(yīng)用有自己的啟動(dòng)圖標(biāo)，并且不會(huì)有瀏覽器的地址欄。因此看起來更像一個(gè)Native App；

minimal-ui：與standalone 相比，該模式會(huì)多出地址欄；

browser ：一般來說，會(huì)和正常使用瀏覽器打開樣式一致。

讓我們來看下這四種模式的差異：

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

控制Web App的方向。設(shè)置某些值會(huì)具有類似鎖屏的效果（禁止旋轉(zhuǎn)），例如例子中的portrait-primary。具體的值包括：any, natural, landscape, landscape-primary, landscape-secondary, portrait, portrait-primary, portrait-secondary。

icons用來指定應(yīng)用的桌面圖標(biāo)。icons本身是一個(gè)數(shù)組，每個(gè)元素包含三個(gè)屬性：

sizes：圖標(biāo)的大小。通過指定大小，系統(tǒng)會(huì)選取最合適的圖標(biāo)展示在相應(yīng)位置上。

src：圖標(biāo)的文件路徑。注意相對(duì)路徑是相對(duì)于manifest。

type：圖標(biāo)的圖片類型。

需要指出的是，我一直提的“開屏圖”其實(shí)是背景顏色+圖標(biāo)的展示模式（并不會(huì)設(shè)置一張所謂的開屏圖）。background_color是在應(yīng)用的樣式資源為加載完畢前的默認(rèn)背景，因此會(huì)展示在開屏界面。background_color加上我們剛才定義的icons就組成了Web App打開時(shí)的“開屏圖”。

定義應(yīng)用程序的默認(rèn)主題顏色。 這有時(shí)會(huì)影響操作系統(tǒng)顯示應(yīng)用程序的方式（例如，在Android的任務(wù)切換器上，主題顏色包圍應(yīng)用程序）。此外，還可以在meta標(biāo)簽中設(shè)置theme_color：

這個(gè)字段的含義非常簡(jiǎn)單，就是一段對(duì)該應(yīng)用的描述。

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

這樣，在android上我們使用chrome將應(yīng)用添加到桌面，就會(huì)擁有文章開頭處的PWA效果。你可在這里驗(yàn)證manifest.json的內(nèi)容：Web Manifest Validator

如果你看到這里，那么恭喜你，已經(jīng)知道如何讓我們的Web App看起來更像一個(gè)獨(dú)立的Native App。是不是非常簡(jiǎn)單？

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

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

如果你看過caniuse上manifest的兼容性，那會(huì)令你更加頭疼。但是，也不必太過憂傷，在iOS與windows上，我們有其他的方式

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

apple-touch-icon：桌面圖標(biāo)，通過在head中添加即可。其中還可以添加sizes屬性，來指示系統(tǒng)使用在各類平臺(tái)（iphone、ipad…）中使用最合適的圖標(biāo)

apple-mobile-web-app-title：應(yīng)用的標(biāo)題。注意，這里需要使用meta標(biāo)簽

apple-mobile-web-app-capable：類似于manifest中的display的功能，通過設(shè)置為yes可以進(jìn)入standalone模式，同樣也是meta標(biāo)簽

apple-mobile-web-app-status-bar-style：這會(huì)改變iOS移動(dòng)設(shè)備的狀態(tài)欄的樣式，并且只有在standalone模式中才會(huì)有效果。，不過在iPhoneX上black會(huì)導(dǎo)致狀態(tài)欄不顯示任何東西。

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

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

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)文件

本文主要探索如何讓被添加到桌面的Web App具有更貼近Native App的使用體驗(yàn)（桌面圖標(biāo)、開屏頁、shell…）。

因此，我們使用了Web App Manifest。通過我們添加manifest文件，并在HTML中設(shè)置相應(yīng)的meta標(biāo)簽來使用它即可；而在safari與ie中，可以通過一些特有的meta、link標(biāo)簽來實(shí)現(xiàn)。是不是很簡(jiǎn)單，很方便？這就使得我們能夠以很低成本的改動(dòng)我們Web App。這也就是PWA概念的理念之一：你可以漸進(jìn)式地提高Web App的能力，同時(shí)在兼容性上，也會(huì)根據(jù)不同的瀏覽器的支持度提供漸進(jìn)增強(qiáng)的能力。

好了，這篇文章的內(nèi)容就到這里了。希望你能夠喜歡！同時(shí)，想要了解PWA背后的更多相關(guān)技術(shù)，歡迎關(guān)注《精益前端》專欄。

第一篇：2018，開始你的PWA學(xué)習(xí)之旅

第二篇：10分鐘學(xué)會(huì)使用Manifest，讓你的WebApp更“Native”（本文）

Web App Manifest（MDN）

Configuring Web Applications（Safari）

Pinned site enhancements （Internet Explorer）)

caniuse manifest

Web Manifest Validator

Address Bar Matches Brand Colors

demo代碼地址：learning-pwa/tree/manifest