【PWA學習與實踐】(2) 使用Manifest，讓你的WebApp更「Native」

《PWA學習與實踐》系列文章已整理至 gitbook - PWA學習手冊，文字內容已同步至 learning-pwa-ebook。轉載請註明做者與出處。

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

PWA做爲時下最火熱的技術概念之一，對提高Web應用的安全、性能和體驗有着很大的意義，很是值得咱們去了解與學習。對PWA感興趣的朋友歡迎關注《PWA學習與實踐》系列文章。

1. 引言

咱們知道，在chrome（等一些現代瀏覽器）中，你能夠將訪問的網站添加到桌面，這樣就會在桌面生成一個相似「快捷方式」的圖標，當你點擊該圖標時，即可以快速訪問該網站（Web App）。咱們以第一篇文章中的demo爲例，其添加到桌面後以及從新打開時的狀態以下：

然而，對於PWA來講，有一些重要的特性：

• Web App能夠被添加到桌面並有它本身的應用圖標；
• 同時，從桌面開啓時，會和原生app同樣有它本身的「開屏圖」；
• 更進一步的，這個Web App在的樣子幾乎和原生應用同樣——沒有瀏覽器的地址欄、工具條，彷佛和Native App同樣運行在一個獨立的容器中。

就像下面這樣：

接下來，咱們會基於該系列——《PWA技術學習與實踐》的前一篇《2018，開始你的PWA學習之旅》 中所說起的一個普通Web App的demo來進行改造，來實現PWA的這一效果。或者直接從github clone learning-pwa（https://github.com/alienzhou/...）這個倉庫也能夠。切換到manifest分支，便可看到本文的最後成果。

2. Web App Manifest

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

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

咱們來看一下，learning-pwa中的manifest.json文件內容

{
    "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。那麼下面就針對每一個具體值進行簡單的介紹。

2.1. name, short_name

指定了Web App的名稱。short_name實際上是該應用的一個簡稱。通常來講，當沒有足夠空間展現應用的name時，系統就會使用short_name。能夠看到本文的例子中，圖書搜索這個應用在桌面上展現的名稱就是short_name書查。

2.2. start_url

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

2.3. display

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

• fullscreen ：全屏顯示，會盡量將全部的顯示區域都佔滿；
• standalone ：獨立應用模式，這種模式下打開的應用有本身的啓動圖標，而且不會有瀏覽器的地址欄。所以看起來更像一個Native App；
• minimal-ui：與standalone 相比，該模式會多出地址欄；
• browser ：通常來講，會和正常使用瀏覽器打開樣式一致。

讓咱們來看下這四種模式的差別：

固然，不一樣的系統所表現出的具體樣式也不徹底同樣。就像示例中的虛擬按鍵在fullscreen 模式下會默認隱藏。

2.4. orientation

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

2.5. icons， background_color

icons用來指定應用的桌面圖標。icons自己是一個數組，每一個元素包含三個屬性：

• sizes：圖標的大小。經過指定大小，系統會選取最合適的圖標展現在相應位置上。
• src：圖標的文件路徑。注意相對路徑是相對於manifest。
• type：圖標的圖片類型。

須要指出的是，我一直提的「開屏圖」實際上是背景顏色+圖標的展現模式（並不會設置一張所謂的開屏圖）。background_color是在應用的樣式資源爲加載完畢前的默認背景，所以會展現在開屏界面。background_color加上咱們剛纔定義的icons就組成了Web App打開時的「開屏圖」。

2.6. theme_color

定義應用程序的默認主題顏色。 這有時會影響操做系統顯示應用程序的方式（例如，在Android的任務切換器上，主題顏色包圍應用程序）。此外，還能夠在meta標籤中設置theme_color：<meta name="theme-color" content="#5eace0"/>

2.7. description

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

3. 使用Manifest

建立好manifest文件後，下一步就是須要知道如何能讓咱們的Web App使用它——很是簡單，只須要在head中添加一個link標籤：

<!-- 在index.html中添加如下meta標籤 -->
<link rel="manifest" href="/manifest.json">

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

若是你看到這裏，那麼恭喜你，已經知道如何讓咱們的Web App看起來更像一個獨立的Native App。是否是很是簡單？

4. iOS, Windows?

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

到目前爲止，咱們的工做都很是順利：建立manifest.json，添加meta標籤，而後把咱們的Web App添加到桌面。然而，若是咱們在iPhone上訪問咱們的站點，而後「添加到主屏幕」，你會發現——一切都失效了！是的，你沒有看錯，一切都回到了原樣。

若是你看過caniuse上manifest的兼容性，那會令你更加頭疼。可是，也沒必要太過憂傷，在iOS與windows上，咱們有其餘的方式

5. iOS（safari）中的處理方式

safari雖然不支持Web App Manifest，可是它有本身的一些head標籤來定義相應的資源與展現形式：

• apple-touch-icon：桌面圖標，經過在head中添加<link rel="apple-touch-icon" href="your_icon.png">便可。其中還能夠添加sizes屬性，來指示系統使用在各種平臺（iphone、ipad…）中使用最合適的圖標
• apple-mobile-web-app-title：應用的標題。注意，這裏須要使用meta標籤<meta name="apple-mobile-web-app-title" content="AppTitle">
• apple-mobile-web-app-capable：相似於manifest中的display的功能，經過設置爲yes能夠進入standalone模式，一樣也是meta標籤<meta name="apple-mobile-web-app-capable" content="yes">
• apple-mobile-web-app-status-bar-style：這會改變iOS移動設備的狀態欄的樣式，而且只有在standalone模式中才會有效果。<meta name="apple-mobile-web-app-status-bar-style" content="black">，不過在iPhoneX上black會致使狀態欄不顯示任何東西。

下面是learning-pwa項目中的相關設置

<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">

6. IE中的處理方式

與Safari相似，IE中也有本身的meta標籤來指示相應的資源。其中比較重要的有：

• application-name：指明瞭app的名稱
• msapplication-TileColor：指明瞭「tile」的背景顏色
• msapplication-xxxlogo：不一樣大小的「tile」所使用的圖標，包括這幾種：msapplication-square70x70logo, msapplication-square150x150logo, msapplication-wide310x150logo, msapplication-square310x310logo

下面是learning-pwa項目中的相關設置，其中圖標的設置爲了方便就複用了已有的圖標文件

<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" />

寫在最後

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

所以，咱們使用了Web App Manifest。經過咱們添加manifest文件，並在HTML中設置相應的meta標籤來使用它便可；而在safari與ie中，能夠經過一些特有的meta、link標籤來實現。是否是很簡單，很方便？這就使得咱們可以以很低成本的改動咱們Web App。這也就是PWA概念的理念之一：你能夠漸進式地提升Web App的能力，同時在兼容性上，也會根據不一樣的瀏覽器的支持度提供漸進加強的能力。

好了，這篇文章的內容就到這裏了。但願你可以喜歡！同時，想要了解PWA背後的更多相關技術，歡迎關注《精益前端》專欄。

《PWA學習與實踐》系列文章

• 第一篇：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