跳到主要内容

ArtinTech Solution

Offline E-Paper Reading with a Service Worker and a Web App Manifest

读者对网上看报最常见的抱怨不是设计,而是隧道。他们在家打开当天的报纸,在站与站之间信号中断的列车上读完。在 Inkfold 1.1 中,我们把电子报做成了可安装的网页应用,已打开的期次离线也能阅读。不需要应用商店,也不需要另一套代码。

根据编辑部设置生成的 manifest

Web App Manifest 是一个路由,而不是静态文件。它从出版方的设置中读取网站名称、标语和品牌色,并列出三个图标:一个可缩放的 SVG,以及 192 和 512 像素的 PNG,其中大图标被标记为 maskable,方便安卓裁成任意形状。编辑部修改报纸名称后,已安装应用的名称也会随之改变,无需重新构建。

只有三条规则的 Service Worker

我们把 Service Worker 保持得足够小,一口气就能读完:

  • 版面图片和静态资源:缓存优先。文件名带有随机部分且永不改变,所以缓存副本永远正确。
  • HTML:网络优先。联网时读者总能看到当天的头版,只有网络失败时才使用缓存副本。
  • 编辑后台和读者账户从不缓存。对管理后台和账户页面的请求直接走网络。

缓存名称带有版本号,新的 Service Worker 激活时会删除旧版本,所以发布新版本不会留下过期文件。

由阅读器请求整期内容

只缓存读者恰好看过的内容会留下空洞。因此打开一期报纸时,阅读器脚本会给 Service Worker 发送一条消息,列出访客有权查看的每个版面的中等图片,Worker 在后台下载缺少的部分,每期最多八十张。锁定的付费版面从不在这份列表里,因为它们的图片根本不会发送给没有权限的访客。

三部手机上的 Inkfold 电子报:首页、阅读器和孟加拉语界面
从浏览器安装后,电子报会像原生应用一样全屏打开。

收藏新闻稍后阅读

离线阅读和阅读清单是天然搭配。登录的读者现在只需轻点一下就能收藏一篇新闻或一张剪报,它会出现在账户页面,并注明刊物、日期和版次。收藏接口是幂等的,连点两下也不会重复收藏,而且会先检查权限:无权阅读付费锁定版面的人也无法收藏上面的新闻。

Inkfold 读者账户页面,显示已收藏的新闻和偏好设置
收藏的新闻、邮件偏好和付款记录集中在一处。

要点

  • 根据设置生成 manifest,让安装的应用跟随品牌。
  • 不变的文件缓存优先,HTML 网络优先,私密区域一律不缓存。
  • 让页面告诉 Service Worker 完整的离线副本需要哪些内容。
  • 访客无权查看的内容绝不缓存,甚至根本不发送。

本系列上一篇:双页阅读视图。用手机浏览器菜单安装 Inkfold 演示 即可体验;软件可在 Charming Theme 购买。

想让你的报纸出现在读者的手机主屏幕上?和我们聊聊 — ArtinTech Solution 为出版商开发渐进式网页应用。

Share this article

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注