关于PWA的实操以及使用经验总结

什么是PWA如何给项目加上PWA优缺点增强我们的 PWA写在后面

关于标题的说明：

实操： 实际操作 PWA ： Progressive Web App

什么是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 WorkerCache 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 ➹，或者手动search群号：685486827，或者 qq 扫一扫

写在最后： 约定优于配置-------软件开发的简约原则. -------------------------------- (完)--------------------------------------

我的： 个人网站： https://neveryu.github.io/neveryu/ Github： https://github.com/Neveryu 新浪微博： https://weibo.com/Neveryu

更多学习资源请关注我的新浪微博…