PWA 入门: 写个非常简单的 PWA 页面

本文首发于饿了么前端——知乎专栏

大家可以点击文章底部的阅读原文来访问原文

Progressive Web Apps 是 Google 提出的用前沿的 Web 技术为网页提供 App 般使用体验的一系列方案。这篇文章里我们来完成一个非常简单的 PWA 页面。

一个 PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用. 随后添加上 App Manifest 和 Service Worker 来实现 PWA 的安装和离线等功能。下面的教程基于 Migrate your site to a Progressive Web App 和 Google 给出的 sample 示例。

完整代码访问GitHub地址:

https://github.com/minimal-xyz/minimal-pwa

准备工作

建议安装 http-server 和 ngrok 以便调试和查看。

准备一个 HTML 文件, 以及相应的 CSS 等:

添加 manifest.json 文件

为了让 PWA 应用被添加到主屏幕, 使用 manifest.json 定义应用的名称, 图标等等信息。

然后在 HTML 文件当中引入配置:

添加 Service Worker

Service Worker 在网页已经关闭的情况下还可以运行, 用来实现页面的缓存和离线, 后台通知等等功能。sw.js 文件需要在 HTML 当中引入:

后面我们会往 sw.js 文件当中添加逻辑代码。在 Service Worker 当中会用到一些全局变量:

  • self: 表示 Service Worker 作用域, 也是全局变量
  • caches: 表示缓存
  • skipWaiting: 表示强制当前处在 waiting 状态的脚本进入 activate 状态
  • clients: 表示 Service Worker 接管的页面

处理静态缓存

首先定义需要缓存的路径, 以及需要缓存的静态文件的列表, 这个列表也可以通过 Webpack 插件生成。

借助 Service Worker, 可以在注册完成安装 Service Worker 时, 抓取资源写入缓存:

调用 self.skipWaiting() 方法是为了在页面更新的过程当中, 新的 Service Worker 脚本能立即激活和生效。

处理动态缓存

网页抓取资源的过程中, 在 Service Worker 可以捕获到 fetch 事件, 可以编写代码决定如何响应资源的请求:

真实的项目当中, 可以根据资源的类型, 站点的特点, 可以专门设计复杂的策略。fetch 事件当中甚至可以手动生成 Response 返回给页面。

更新静态资源

缓存的资源随着版本的更新会过期, 所以会根据缓存的字符串名称(这里变量为 cacheStorageKey, 值用了 "minimal-pwa-1")清除旧缓存, 可以遍历所有的缓存名称逐一判断决决定是否清除:

在新安装的 Service Worker 中通过调用 self.clients.claim() 取得页面的控制权, 这样之后打开页面都会使用版本更新的缓存。旧的 Service Worker 脚本不再控制着页面之后会被停止。

查看 Demo

执行命令:

桌面浏览器可以直接通过 http://localhost:8080 访问, 从 DevTools 的 Application 标签可以看到 Service Worker。

由于 Service Worker 限制了使用 HTTPS 地址或者 localhost 地址, 在 Android Chrome 打开需要借助 ngrok 生成的 HTTPS 地址, 这样才能把 demo 添加到首屏。添加到首屏之后, 即便在离线状态下, 页面也可以打开。

从 DevTools 可以看到, 普通页面刷新时, 列表当中的静态资源都是从 Service Worker 获取的:

更新页面

页面被缓存之后, 就需要适当处理缓存失效时页面的更新。在这个 Demo 当中, 被缓存的资源是无法发起请求判断是否被更新的, 只有 sw.js 会自动根据 HTTP 缓存的机制尝试去判断应用是否被更新。

所以当页面发生修改时, 要同时对 sw.js 文件进行一次修改。比如在 HTML 当中更新版本到 2:

同时 sw.js 文件当中也要进行一次修改, 保证文件发生改变, 同时缓存的名称也变改变了:

然后重新打开一次页面, 这个时候渲染的页面依然是旧的, 不过可以从 DevTools 看到 sw.js 被安装和激活。之后关闭页面, 再次打开, 就可以见到网页上的显示版本变成了 2。

注意: Demo 当中如果直接启动 http-server 而不使用 -c-1 关闭缓存, sw.js 可能被缓存住, 导致更新方案失败。这种情况下存在 Caches API 和 HTML caching 两层缓存, 需要进行清理才能完成更新。

更多

你还可以实现一个 App Shell, 可以用 Service Worker 实现后台通知等功能。

原文发布于微信公众号 - 较真的前端(gh_7af41a2be77e)

原文发表时间:2017-11-24

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏玩转JavaEE

SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题(一)

当前后端分离时,权限问题的处理也和我们传统的处理方式有一点差异。笔者前几天刚好在负责一个项目的权限管理模块,现在权限管理模块已经做完了,我想通过5-6篇文章,来...

4615
来自专栏JavaEdge

MacOS 下使用 intellij IDEA 将git上传项目到 Github

1594
来自专栏小文博客

扒站==一条代码?

2253
来自专栏用户2442861的专栏

git以及github的使用(1)

http://my.oschina.net/bxxfighting/blog/378196

611
来自专栏十月梦想

小程序目录结构

        第一篇微信小程序的博文,不知从何开始说;name就从最基础的目录结构来说吧,初次接触这个东西自己也是折腾挺久的,这里系统的对比一下web开发的文...

1181
来自专栏WebDeveloper

简单封装curl的get与post发送数据

3143
来自专栏SpringBoot 核心技术

第二十五章:SpringBoot添加支持CORS跨域访问

2304
来自专栏DeveWork

WordPress 一键关闭/禁止页面评论功能

WordPress 中页面都是默认开启批量功能的,对于一些特殊的网站,可能需要禁止所有的页面的评论功能;一个个去页面编辑页面去禁止固然可以,但是页面一多的话那就...

1966
来自专栏SpringBoot 核心技术

第十二章:SpringBoot使用LogBack作为日志组件

1624
来自专栏一个爱瞎折腾的程序猿

动易CMS之标签管理

4、系统可以根据设置的条件生成sql语句,也可以直接写sql语句。直接在文本框中输入sql语句即可,参数用【@+参数名】表示

2131

扫码关注云+社区

领取腾讯云代金券