PWA - 渐进式 Web 应用(PWA) 介绍 - 《Web 前端洞见》

特点
带来的好处
兼容性
如何实现
推荐阅读

PWA（Progressive Web Apps，渐进式 Web 应用）运用现代的 Web API 以及传统的渐进式增强策略来创建跨平台 Web 应用程序。

特点

可被发现的。可被搜索引擎搜索到。
可被安装的。能被添加到桌面或app启动页。
可被链接的。可以通过发送一个 URL 来分享。
网络独立的。可在离线环境和弱网环境下工作。
渐进增强的。可以在旧版本的浏览器上运行。在最新的浏览器上支持所有的功能。
能被呼起的。有新内容时，可以发通知。
响应式。可以在不同的设备上用：手机，平板，台式机，电视，冰箱等。
安全。用户，app和服务器端之间的链接是安全的。第三方无法获取敏感数据。

翻译自: What makes an app a PWA?。

带来的好处

应用安装后，进入app的加载时间变短了。应用安装后，可以缓存文件，节约带宽和下载时间。
app 内容更新后，只更新更新的部分。对比原生应用，最小的改动也必须下载完整的应用。
外观和感觉上和原生平台结合的更紧密。在桌面或应用启动器上的 app 图标，自动以全屏的模式运行。
app 和用户的对话更多了。通过系统通知和推送信息来通知用户。
兼容性
主要是看 Service Work 的兼容性，主流浏览器都兼容了。

如何实现

可被发现的

PWA 应该更好的在搜索引擎中呈现，分类和排名。设置一些浏览器支持的元信息来带来一些特别的能力。

浏览器支持的元信息，比如 Open Graph：

<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />

manifests 也做了类似的事：

{
  "name": "HackerWeb",
  "description": "xxx",
  "categories": "xxx" //分类
}

搜索引擎解析这些标签，来支持更好的呈现，分类和排名。

可被安装的

webapp 的安装和卸载，是依赖浏览器支持的。webapp 的安装的设置是在 manifests 里设置的。

可被链接的

webapp 本身对指向一组 url。这块本身就是支持的。

能被呼起的

用 Web Push API 和用 Notifications API 来发通知。

Web Push API 能够从服务器端接收推送给它们的通知，即使 app 在后台。Push API 是 Service Worker 其中的一个功能。

网络独立的

用 Service Workers 来控制请求（如储存离线的内容)。Cache API 来储存资产。

客户端数据存储用 Web Storage 和 IndexDB。

渐进增强的

靠 js 来做特性判断。

响应式

依赖媒体查询和 viewport。

安全性

用 https。

渐进式 Web 应用(PWA) 介绍

特点