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

系列文章：

PWA：添加应用至桌面及分享(本文)

这篇将讲述如何为应用添加两个小功能——添加应用至桌面和分享。虽然，这两个功能实现起来相当简单，可以说是没有什么代码量，但是，不要小看了这两个小功能，它们有可能会改变大格局。

本篇主要包含以下内容：

添加应用至桌面

如果，你想要为你的网站添加添加到桌面这个功能，那么，你的网站只需满足以下 3 项就足够了：

包含一个 manifest.json 文件，其中包含 short_name 以及 icons 字段
包含 service sorkers
使用 HTTPS（这个好像是废话，既然使用了 service workers，那肯定已经基于 https了）

除此之外，chrome 会替你处理。

从上面 3 点可以看到，如果你的应用已经是个 PWA 应用的话，那么，第二，第三点就已经满足了，添加至桌面的功能其实只需为项目添加一个描述性的配置文件 manifest.json 就可以了。

那 manifest.json 这东西到底是啥？

它是 PWA 的一部分，是一个 JSON 格式的文件用来描述应用相关的信息，目的是提供将应用添加至桌面的功能，从而使用户可以无需下载就可以如应用一般从桌面打开 web 应用，大大增强用户体验和粘性。

知道了 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: 定义应用模式下的路径范围，超出范围会已浏览器方式显示

下面就是项目 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": "..."
}

Add to home screen

确定之后就能在桌面上看到了应用图标了。失手点了关闭也没有关系，可以通过 chrome 右上角的 ... -> Add to Home sceen 手动添加。

Home screen

点击添加桌面后，如果发现桌面没有应用图标，确认 chrome 是否有添加桌面快捷方式的权限。

还有一点需要特别注意，用户将应用添加到桌面后，你修改 minifest.json 文件将不会生效，除非用户重新将它添加到桌面，所以，尽量还是一步到位。

Web Share API

不过，现在只有安卓 Chrome 55 以上支持 Web Share API。另外，要使用分享功能，还要满足以下几点：

网站必须基于 HTTPS
注册，并将生成的 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

由于，Web Share 是由 chrome 团队单方面提出，即使是在 chrome 下也是实验性支持，之后是否会永久支持尚未定论，不排除以后不再支持的可能。

这次分享的两个功能：添加到桌面和分享至应用就这样搞定了，加之前两次分享的离线缓存以及推送通知，就完成了现有 PWA 应用所包含的全部功能。

Bullshit or Prediction

总体来说，实现 PWA 的功能并不困难，甚至可以说是简单。但就如同文章之初所说，这可能是一个影响移动端格局的技术。在此之前，web 技术只用应用于浏览器中，无论做什么之前都得先打开浏览器。然而，PWA 所提供添加至桌面、推送消息及离线缓存这些功能，使得对用户来说网页应用和移动应用真的是分不清楚，也不必分清楚...

当然，要使用户有使用应用的感觉，这里就得提一提另一个东西，那就是设计。在将网站转换为 PWA 的同时，这个转变不应只发生在 JS 方面，用户感受最明显的还是网站的外观，也就是用户界面。界面设计也应随着网站转换成 PWA 而进行重新设计，从而给用户真正带来类应用的体验。我个人认为如果 PWA 顺利推行，那么，网站的界面设计同时也会迎来一次巨大革新，就如同之前 jsp 到单页应用般巨大的改变。

妄言或许会成预言。

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

我们正处于一个前端最好的时代，未来可期...

支持离线查看噢（得先访问过），没网的时候也能涨姿势了哪...(不用连啥花生 wifi 之类的了[手动滑稽])