什么是PWA

PWA 是渐进式 Web 应用，类似于原生 App 的体验。

当我们在手机浏览器上打开网页时，然后通过浏览器的 “更多” 功能，选择添加到主屏幕。
这个时候，我们的手机桌面上会生成一个当前网页的 “快捷入口”。
在这里插入图片描述

如果你的网站没有加 PWA 的话，那么，手机桌面上生成的只是网页的一个“快捷方式”，从桌面上点击进入，依然是用浏览器打开。
如果你的网站加上了 PWA 的话，那么，你可以自定义手机桌面上生成的这个图标，并且，从这个桌面图标点击进入的话，是一个 PWA。
在这里插入图片描述
来一个鲜明的对比：

PWA 的这种渐进式 Web 应用给人的感觉和体验还真不错，有一种 App 的感觉。

大家可以在手机上打开这个网站体验一下：web-bookmarks
提供一个二维码快捷访问方式：
在这里插入图片描述

如何给项目加上PWA

给网站加上 PWA 是简单的：

在网站的根目录下（/），添加一个 Web应用程序清单文件（manifest.json）。
在 index.html 中加上<link rel="manifest" href="/manifest.json">

Web应用程序清单在一个JSON文本文件中提供有关应用程序的信息（如名称，作者，图标和描述）。manifest 的目的是将Web应用程序安装到设备的主屏幕，为用户提供更快的访问和更丰富的体验。

关于 manifest.json 文件里面有哪些可配置的字段，以及字段的说明，推荐阅读官方文档：
https://developer.mozilla.org/zh-CN/docs/Web/Manifest

-----------华丽的分割线-------------

我想给你的建议和参考：
1、为了让你的网站完全地兼容 PWA，强烈建议你在 index.html 中加上除了 <link rel="manifest" href="/manifest.json"> 以外更完善的 head 信息：（参考这样）

<link rel="icon" href="/web-bookmarks/favicon.ico">
<link rel="manifest" href="/web-bookmarks/manifest.json">
<meta name="theme-color" content="#3eaf7c">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon" href="/web-bookmarks/icons/apple-touch-icon-152x152.png">
<link rel="mask-icon" href="/web-bookmarks/icons/safari-pinned-tab.svg" color="#3eaf7c">
<meta name="msapplication-TileImage" content="/icons/msapplication-icon-144x144.png">
<meta name="msapplication-TileColor" content="#000000">

可以参考这里=> https://github.com/Neveryu/web-bookmarks/blob/master/docs/.vuepress/config.js#L7-L17

2、我的 manifest.json 的配置，可以参考这里=> https://github.com/Neveryu/web-bookmarks/blob/master/docs/.vuepress/public/manifest.json

优缺点

可靠 - 即使在不稳定的网络环境下，也能瞬间加载并展现
体验 - 快速响应，并且有平滑的动画响应用户的操作
粘性 - 像设备上的原生应用，具有沉浸式的用户体验，用户可以添加到桌面
渐进式 - 适用于所有浏览器，因为它是以渐进式增强作为宗旨开发的
连接无关性 - 能够借助 Service Worker 在离线或者网络较差的情况下正常访问
类似应用 - 由于是在 App Shell 模型基础上开发，因为应具有 Native App 的交互和导航，给用户 Native App 的体验
持续更新 - 始终是最新的，无版本和更新问题
安全 - 通过 HTTPS 协议提供服务，防止窥探和确保内容不被篡改
粘性 - 通过推送离线通知等，可以让用户回流

增强我们的 PWA

PWA 还有很多强大的功能，除了前面提到的给我们的网站加上 PWA 之外，PWA 中包含的如下核心功能及特性，我们也可以加上：

Web App Manifest（已加）
Service Worker
Cache API 缓存
Push&Notification 推送与通知
Background Sync 后台同步
响应式设计

写在后面

【更多推荐阅读】

https://github.com/Neveryu/web-bookmarks/blob/master/docs/.vuepress/public/manifest.json
https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps
https://lavas.baidu.com/pwa/README

---------------------------(正文完)------------------------------------
一个前端的学习交流群，想进来面基的，可以点击这个logo ➹ Vue学习交流，或者手动search群号：685486827，或者 qq 扫一扫