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

749 阅读3分钟

关于标题的说明:

实操: 实际操作
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 文件里面有哪些可配置的字段,以及字段的说明,推荐阅读官方文档: developer.mozilla.org/zh-CN/docs/…

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

我想给你的建议和参考:

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">

可以参考这里=> github.com/Neveryu/web…

2、我的 manifest.json 的配置,可以参考这里=> github.com/Neveryu/web…

优缺点

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

增强我们的 PWA

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

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

写在后面

【更多推荐阅读】

github.com/Neveryu/web…

developer.mozilla.org/zh-CN/docs/…

lavas.baidu.com/pwa/README


我的主页: neveryu.github.io/index.html

QQ群:685486827