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

分手后的思念是犯贱 2023-06-12 06:20 3阅读 0赞

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

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

关于标题的说明：

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

# 什么是PWA #

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

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

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

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

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

# 如何给项目加上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][https_developer.mozilla.org_zh-CN_docs_Web_Manifest]

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

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

可以参考这里=> [https://github.com/Neveryu/web-bookmarks/blob/master/docs/.vuepress/config.js\#L7-L17][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][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_github.com_Neveryu_web-bookmarks_blob_master_docs_.vuepress_public_manifest.json]  
[https://developer.mozilla.org/zh-CN/docs/Web/Progressive\_web\_apps][https_developer.mozilla.org_zh-CN_docs_Web_Progressive_web_apps]  
[https://lavas.baidu.com/pwa/README][https_lavas.baidu.com_pwa_README]

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

![Vue学习交流][Vue 1]

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

我的：  
个人网站： [https://neveryu.github.io/neveryu/][https_neveryu.github.io_neveryu]  
Github： [https://github.com/Neveryu][https_github.com_Neveryu]  
新浪微博： [https://weibo.com/Neveryu][https_weibo.com_Neveryu]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5feXVkb25n_size_16_color_FFFFFF_t_70]: /images/20230531/96b5798c1b524caf843be3c29ea104ca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5feXVkb25n_size_16_color_FFFFFF_t_70 1]: /images/20230531/c589a1ca35a8462b8a10cc3afd232719.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5feXVkb25n_size_16_color_FFFFFF_t_70 2]: /images/20230531/08f2ce02a72c428393a2ad7319533a98.png
[web-bookmarks]: https://neveryu.github.io/web-bookmarks/
[20191111174939911.png]: /images/20230531/8f71cf2d5c0742da98491ab82436b17f.png
[https_developer.mozilla.org_zh-CN_docs_Web_Manifest]: https://developer.mozilla.org/zh-CN/docs/Web/Manifest
[https_github.com_Neveryu_web-bookmarks_blob_master_docs_.vuepress_config.js_L7-L17]: https://github.com/Neveryu/web-bookmarks/blob/master/docs/.vuepress/config.js#L7-L17
[https_github.com_Neveryu_web-bookmarks_blob_master_docs_.vuepress_public_manifest.json]: 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://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps
[https_lavas.baidu.com_pwa_README]: https://lavas.baidu.com/pwa/README
[Vue]: https://raw.githubusercontent.com/Neveryu/prerender-website/master/src/assets/logo1.png
[Vue 1]: /images/20230531/ffc8836e191a4c08813fea5a719a736d.png
[https_neveryu.github.io_neveryu]: https://neveryu.github.io/neveryu/
[https_github.com_Neveryu]: https://github.com/Neveryu
[https_weibo.com_Neveryu]: https://weibo.com/Neveryu