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

AlienZHOU發表於2018-04-07
WebAPP

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

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

PWA作為時下最火熱的技術概念之一，對提升Web應用的安全、效能和體驗有著很大的意義，非常值得我們去了解與學習。對PWA感興趣的朋友歡迎關注《PWA學習與實踐》系列文章。

1. 引言

我們知道，在chrome（等一些現代瀏覽器）中，你可以將訪問的網站新增到桌面，這樣就會在桌面生成一個類似“快捷方式”的圖示，當你點選該圖示時，便可以快速訪問該網站（Web App）。我們以第一篇文章中的demo為例，其新增到桌面後以及重新開啟時的狀態如下：

普通Web App被新增到桌面後的展示形式

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

  • Web App可以被新增到桌面並有它自己的應用圖示；
  • 同時，從桌面開啟時，會和原生app一樣有它自己的“開屏圖”；
  • 更進一步的，這個Web App在的樣子幾乎和原生應用一樣——沒有瀏覽器的位址列、工具條，似乎和Native App一樣執行在一個獨立的容器中。

就像下面這樣：

PWA被新增到桌面後的展示形式

接下來，我們會基於該系列——《PWA技術學習與實踐》的前一篇《2018，開始你的PWA學習之旅》 中所提及的一個普通Web App的demo來進行改造，來實現PWA的這一效果。或者直接從github clone learning-pwa（github.com/alienzhou/l…

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：一般來說，會和正常使用瀏覽器開啟樣式一致。

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

display四種模式的差異

當然，不同的系統所表現出的具體樣式也不完全一樣。就像示例中的虛擬按鍵在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上訪問我們的站點，然後“新增到主螢幕”，你會發現——一切都失效了！是的，你沒有看錯，一切都回到了原樣。

manifest的相容性

如果你看過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學習與實踐》後續文章。

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

參考資料

相關文章