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 之类的了[手动滑稽])