PWA：添加應用至桌面及分享

系列文章：

1. Service Workers 和離線緩存

2. Notification with Service Workers push events

3. PWA：添加應用至桌面及分享(本文)

繼上兩篇離線緩存和發送通知以後，這篇是 PWA(progressive web apps) 相關的第三篇，也是計劃中的最後一篇。

這篇將講述如何爲應用添加兩個小功能——添加應用至桌面和分享。雖然，這兩個功能實現起來至關簡單，能夠說是沒有什麼代碼量，可是，不要小看了這兩個小功能，它們有可能會改變大格局。

本篇主要包含如下內容：

• 添加應用至桌面

• Web Share API

• Bullshit or Prediction

添加應用至桌面

若是，你想要爲你的網站添加添加到桌面這個功能，那麼，你的網站只需知足如下 3 項就足夠了：

• 包含一個 manifest.json 文件，其中包含 short_name 以及 icons 字段

• 包含 service sorkers

• 使用 HTTPS（這個好像是廢話，既然使用了 service workers，那確定已經基於 https了）

除此以外，chrome 會替你處理。

從上面 3 點能夠看到，若是你的應用已是個 PWA 應用的話，那麼，第二，第三點就已經知足了，添加至桌面的功能其實只需爲項目添加一個描述性的配置文件 manifest.json 就能夠了。

那 manifest.json 這東西究竟是啥？

它是 PWA 的一部分，是一個 JSON 格式的文件用來描述應用相關的信息，目的是提供將應用添加至桌面的功能，從而使用戶能夠無需下載就能夠如應用通常從桌面打開 web 應用，大大加強用戶體驗和粘性。

manifest 正處於 W3C 的草案階段，而且 Chrome 和 Firefox 已經實現了這個功能，微軟系也在開發中，只剩蘋果系還在考慮。（大體和 service workers 的進程同樣）

知道了 manifest 是什麼，接着就來看一下它怎麼用，也就是能夠配置哪些字段：

• short_name: 應用展現的名字

• icons: 定義不一樣尺寸的應用圖標

• start_url: 定義桌面啓動的 URL

• description: 應用描述，能夠參考 meta 中的 description

• display: 定義應用的顯示方式，有 4 種顯示方式，分別爲：

  • fullscreen: 全屏

  • standalone: 應用

  • minimal-ui: 相似於應用模式，但比應用模式多一些系統導航控制元素，但又不一樣於瀏覽器模式

  • browser: 瀏覽器模式，默認值

• name: 應用名稱

• orientation: 定義默認應用顯示方向，豎屏、橫屏

• prefer_related_applications: 是否設置對應移動應用，默認爲 false

• related_applications: 獲取移動應用的方式

• background_color: 應用加載以前的背景色，用於應用啓動時的過渡

• theme_color: 定義應用默認的主題色

• dir: 文字方向，3 個值可選 ltr(left-to-right), rtl(right-to-left) 和 auto(瀏覽器判斷)，默認爲 auto

• lang: 語言

• scope: 定義應用模式下的路徑範圍，超出範圍會已瀏覽器方式顯示

須要注意的是自 background_color 開始的屬性只有部分瀏覽器支持。

若是，你不知如何設置這些值，你能夠試一試 Manifest Generator，它會一步步指引你生成一個包含應用主要信息的 manifest.json 文件。

除了以上列舉的這些值，可能還包含其餘一些某些瀏覽器特定的值，好比上一篇中提到的 gcm_sender_id, applicationServerKey 用於 chrome 下訂閱服務器消息。

下面就是項目 manifest.json 最終的樣子。

// manifest.json
{
  "dir": "ltr",
  "lang": "en",
  "name": "D.D Blog",
  "scope": "/",
  "display": "standalone",
  "start_url": "/",
  "short_name": "D.D Blog",
  "theme_color": "transparent",
  "description": "Share More, Gain More. - D.D Blog",
  "orientation": "any",
  "background_color": "transparent",
  "related_applications": [],
  "prefer_related_applications": false,
  "icons": [{
    "src": "assets/img/logo/size-32.png",
    "sizes": "32x32",
    "type": "image/png"
  }, {
    "src": "assets/img/logo/size-48.png",
    "sizes": "48x48",
    "type": "image/png"
  } //...
  ],
  "gcm_sender_id": "...",
  "applicationServerKey": "..."
}

生成後的文件能夠經過 Web Manifest Validator 進行驗證。驗證經過後，把它加入到項目，再次訪問就會有添加到桌面的提示。

肯定以後就能在桌面上看到了應用圖標了。失手點了關閉也沒有關係，能夠經過 chrome 右上角的 ... -> Add to Home sceen 手動添加。

點擊添加桌面後，若是發現桌面沒有應用圖標，確認 chrome 是否有添加桌面快捷方式的權限。

另外，經過媒體查詢能夠根據不一樣的 display 模式來應用不一樣的 CSS 樣式。

還有一點須要特別注意，用戶將應用添加到桌面後，你修改 minifest.json 文件將不會生效，除非用戶從新將它添加到桌面，因此，儘可能仍是一步到位。

若是這篇到這裏就結束就未免有點過短了，有點不太符合我有事沒事往長裏寫的風格。前一陣正好看到一篇關於 web 分享 API 的文章，雖然，它不屬於 PWA 的一系列技術中，但它實現的功能和理念與 PWA 至關類似——漸進式地提供功能。這裏就放在一塊兒講一講，也順便給本身的博客添加這個功能。

Web Share API

Web Share API 和 PWA 同樣是一項由古哥提出的草案，現還未被歸入 W3C。經過 Web Share API，用戶能夠方便地將內容或數據分享到應用中。

不過，如今只有安卓 Chrome 55 以上支持 Web Share API。另外，要使用分享功能，還要知足如下幾點：

• 網站必須基於 HTTPS

• 註冊 Origin Trial，並將生成的 token 加入頁面 meta 中

• 提供 text 或 url 中的一項，且值必須爲字符串

• 分享事件必須由用戶事件觸發

知足了這些剩下的就很簡單了，只需監聽用戶事件，而後將須要分享的內容傳遞給 Web Share API 就能夠了。

// CommonService.js
export const isSupportShareAPI = () => !!navigator.share;

export const sharePage = () => {
    navigator
        .share({
            title: document.title,
            text: document.title,
            url: window.location.href
        })
        .then(() => console.info('Successful share.'))
        .catch(error => console.log('Error sharing:', error));
};

若是，你的網站設有元數據，那麼，分享的內容能夠從網頁元數據中獲取。

因爲，Web Share 是由 chrome 團隊單方面提出，即便是在 chrome 下也是實驗性支持，以後是否會永久支持還沒有定論，不排除之後再也不支持的可能。

此次分享的兩個功能：添加到桌面和分享至應用就這樣搞定了，加以前兩次分享的離線緩存以及推送通知，就完成了現有 PWA 應用所包含的所有功能。

Bullshit or Prediction

整體來講，實現 PWA 的功能並不困難，甚至能夠說是簡單。但就如同文章之初所說，這多是一個影響移動端格局的技術。在此以前，web 技術只用應用於瀏覽器中，不管作什麼以前都得先打開瀏覽器。然而，PWA 所提供添加至桌面、推送消息及離線緩存這些功能，使得對用戶來講網頁應用和移動應用真的是分不清楚，也沒必要分清楚...

固然，要使用戶有使用應用的感受，這裏就得提一提另外一個東西，那就是設計。在將網站轉換爲 PWA 的同時，這個轉變不該只發生在 JS 方面，用戶感覺最明顯的仍是網站的外觀，也就是用戶界面。界面設計也應隨着網站轉換成 PWA 而進行從新設計，從而給用戶真正帶來類應用的體驗。我我的認爲若是 PWA 順利推行，那麼，網站的界面設計同時也會迎來一次巨大革新，就如同以前 jsp 到單頁應用般巨大的改變。

不過，這裏仍是得澆一盆冷水，鑑於我國網絡現狀，我同這篇回答中的觀點基本一致，就我國蘋果機的佔比來講，若是蘋果不支持 PWA，那麼，它也就只有本身拿來玩玩了。

假若，蘋果也加入到 PWA 的行列，瀏覽器兼容性再也不成爲障礙時，PWA 必然會改變前端與移動端之間的格局，再加之 AOT(ahead-of-time) 與 WebAssembly 爲 JS 帶來的性能上的突破，JS 將撼動全部領域，從移動端（PWA），到桌面應用，物聯網，VR，AR，遊戲，乃至人工智能等等，畫美不看。

妄言或許會成預言。

Atwood's Law: any application that can be written in JavaScript, will eventually be written in JavaScript.

咱們正處於一個前端最好的時代，將來可期...

扯了這麼多，最後固然仍是但願對本人博客有興趣的小夥伴能夠試一試此次分享的兩個功能，把本人博客添加到桌面並分享給本身的小夥伴們。?

支持離線查看噢（得先訪問過），沒網的時候也能漲姿式了哪...(不用連啥花生 wifi 之類的了[手動滑稽])