网站渐进式增强体验(PWA)改造

请注意,本文编写于 596 天前,最后修改于 596 天前,其中某些信息可能已经过时。

  • 什么是 PWA
    谷歌给以 Service Worker API 为核心实现的 web 应用取了个高大上的名字:Progressive Web Apps(PWA,渐进式增强 WEB 应用),并且在其主要产品上进行了深入的实践。那么,符合 PWA 的应用特点是什么?以下为来自谷歌工程师的解答。

Progressive Web Apps 是:

  • 渐进增强 – 能够让每一位用户使用,无论用户使用什么浏览器,因为它是始终以渐进增强为原则。
  • 响应式用户界面 – 适应任何环境:桌面电脑,智能手机,笔记本电脑,或者其他设备。
  • 不依赖网络连接 – 通过 Service Workers 可以在离线或者网速极差的环境下工作。
  • 类原生应用 – 有像原生应用般的交互和导航给用户原生应用般的体验,因为它是建立在 app shell model 上的。
  • 持续更新 – 受益于 Service Worker 的更新进程,应用能够始终保持更新。
  • 安全 – 通过 HTTPS 来提供服务来防止网络窥探,保证内容不被篡改。
  • 可发现 – 得益于 W3C manifests 元数据和 Service Worker 的登记,让搜索引擎能够找到 web 应用。
  • 再次访问 – 通过消息推送等特性让用户再次访问变得容易。
  • 可安装 – 允许用户保留对他们有用的应用在主屏幕上,不需要通过应用商店。
  • 可连接性 – 通过 URL 可以轻松分享应用,不用复杂的安装即可运行。

参考网站渐进式增强体验(PWA)改造:Service Worker 应用详解给出的教程
对于博客快速地引入 PWA 有以下几点:

  1. 参考 https://lzw.me/sw.js,下载它并放到你的站点根目录
  2. 设计简单的 offline.html 用于离线降级显示。简单的示例参考: https://lzw.me/offline.html
  3. 参考 https://lzw.me/manifest.json,下载并修改适合你的博客,放到站点根目录
  4. 在页面foot的 js 中加入注册 sw.js 的代码。参考前文 Serveice Worker 注册 部分示例
  5. 在站点页面模板的 head 区域,引入 manilfest.json 文件
  6. 在 PC 和手机上分别使用 Chrome 浏览器进行体验

有的网站提出不需要离线功能的话 sw.js 改用空文件就可以,但是实际测试手机可以,桌面端却无法安装 PWA 应用,最后在HDUindex - 校内资源测试效果尚可,尤其是安装后作为有类似于本地端软件的性能。

HDUindex - 校内资源
HDUindex - 校内资源

添加新评论

评论列表