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

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

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

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

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

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

Web App可以被添加到桌面并有它自己的應用圖標；

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

更進一步的，這個Web App在的樣子幾乎和原生應用一樣——沒有瀏覽器的地址欄、工具條，似乎和Native App一樣運行在一個獨立的容器中。

就像下面這樣：

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

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

manifest 的目的是將Web應用程序安裝到設備的主屏幕，為用戶提供更快的訪問和更豐富的體驗。 —— MDN

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

{
    "name": "圖書搜索",
    "short_name": "書查",
    "start_url": "/",
    "display": "standalone",
    "background_color": "#333",
    "description": "一個搜索圖書的小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配置文件非常直觀，通過聲明各個屬性的值，即可改造我們的Web App。那么下面就針對每個具體值進行簡單的介紹。

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

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

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

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

standalone ：獨立應用模式，這種模式下打開的應用有自己的啟動圖標，并且不會有瀏覽器的地址欄。因此看起來更像一個Native App；

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

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

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

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

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

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

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

src：圖標的文件路徑。注意相對路徑是相對于manifest。

type：圖標的圖片類型。

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

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

這個字段的含義非常簡單，就是一段對該應用的描述。

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

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

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

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

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

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

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

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

apple-mobile-web-app-title：應用的標題。注意，這里需要使用meta標簽

apple-mobile-web-app-capable：類似于manifest中的display的功能，通過設置為yes可以進入standalone模式，同樣也是meta標簽

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

下面是learning-pwa項目中的相關(guān)設置

與Safari類似，IE中也有自己的meta標簽來指示相應的資源。其中比較重要的有：

application-name：指明了app的名稱

msapplication-TileColor：指明了“tile”的背景顏色

msapplication-xxxlogo：不同大小的“tile”所使用的圖標，包括這幾種：msapplication-square70x70logo, msapplication-square150x150logo, msapplication-wide310x150logo, msapplication-square310x310logo

下面是learning-pwa項目中的相關(guān)設置，其中圖標的設置為了方便就復用了已有的圖標文件

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

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

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

第一篇：2018，開始你的PWA學習之旅

第二篇：10分鐘學會使用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