jekyll 博客的 PWA 配置

2019/01/23 experience

一、 什么是 PWA

PWA(Progressive Web App)是一种理念,使用多种技术来增强 web app 的功能,可以让网站的体验变得更好,能够模拟一些原生功能,比如通知推送。在移动端利用标准化框架,让网页应用呈现和原生应用相似的体验。
就目前而言,PWA 对我产生最直接的影响有以下几点

  1. 速度的提升,缓存的使用使文章和博客的速度大大提升。
  2. 离线状态下,缓存过的文章也可以正常浏览。
  3. PWA 应用可以表现的像原生系统一样。

二、如何配置

2.1 查询资料

在开始之间查询了一些资料,因为使用的 jekyll,尝试使用了 jekyll 的相关插件,效果并不理想。然后搜索了下 PWA 的相关资料后,发现并不是很难,于是尝试搞了下。所以建议大家也可以尝试按照我接下来的步骤配置,并不繁琐。

2.2 配置步骤

下面记录下我配置的步骤。

  • 首先 PWA 需要一个描述文件 manifest.json,具体配置可以参考这个文档,也可以参考我的配置 manifest.json
  • 在你的 html 文件中声明出来(因为我用的 jekyll,所以我在 _includes/header.html 文件中声明)。
<head>
...
<link rel="manifest" href="/manifest.json">
...
</head>
  • 然后我们需要一个 service-worker 文件来处理 PWA 的额外功能,例如缓存。可以参考这个文档,也可以参考我的代码 manifest.json。 其中缓存对应着一个版本号,因为我不想每次提交都重新修改下版本,比较麻烦。所以在这里我直接使用了 jekyll 的变量 site.time 把构建的时间作为版本号。
  • 最后我们需要在 html 文件中注册这个 service-worker 文件,也可以参照我的文件_includes/footer.html,如下所示。
// 检测浏览器是否支持SW
if(navigator.serviceWorker != null){
    navigator.serviceWorker.register('/service-worker.js')
        .then(function(registartion){
            console.log('支持sw:',registartion.scope)
        })
} else {
    console.log('不支持sw')
}
  • 然后我新建了离线提示的页面,用于离线的时候用户访问未缓存页面时做提示用。因为这个提示的布局跟其它页面稍有不同,我创建了提示布局。引用次布局,实现离线提示页面
  • 至此已经全部完成了,如果你使用的 chrome 浏览器,你可以在这里看到你的 service-worker 信息和缓存信息。 application

三、总结

PWA 带来的缓存效果是立竿见影的,本来博客部署在 github 和 coding 上面,现在又有了 PWA 的夹持,速度嗖嗖的。而且也可以直接把网站添加到应用列表里面,在手机(包括 Android 和 IOS)上的体验,近似原生啊。

Search

    Table of Contents