2021 Oct 2021 Oct

记录把 service worker 切换到由 Workbox 生成的过程 【流水帐】

我把网站的 service worker 从 sw-precache 迁移到了 Workbox ,记录一下过程。

sw-precache 是 Google 的一个实验性项目,也是 Workbox 的前身之一,之前一直用的它来生成网站的 service worker 文件,可即使对于我这个挺简单的站点,用它现在也有点不够用,比如之前我是缓存我的所有指定页面,以备离线使用,但是我现在我觉得不妥,只缓存访问页更好;再比如以前每次访问的时候都是先获取的离线内容,再尝试更新在线内容,我现在也觉得不好,应该根据内容的不同来判定先访问哪里的内容,而达成这些需要做很多的工作才能满足,就直接换了。

下面说说过程…

/*This is placeholder text. This is placeholder text. This is placeholder text. This is placeholder text. |bitbili.net| This is placeholder text. This is placeholder text. This is placeholder text. This is placeholder text.*/
2020 Sep 2020 Sep

Chrome 下 touch 事件 inline 元素监听不生效

昨天对博客首页进行了重新设计,使用原生 Javascript 对文章标题添加 Touch 监听事件时,因为一个疑似 BUG 导致了一系列奇葩的问题。

以下描述发生在 Blink 引擎浏览器内,也就是一般使用的 Chrome, Chromium 浏览器及以其为基础进行开发的其它浏览器;其它浏览器如 Safari, FireFox, iOS 上的 Chrome (webkit 引擎)则不会因为以下指出的不同而差异化表现。

  • 当 a 元素是默认的 inline 样式,且页面仅有 touchstart 或者 touchmove 监听事件,这针对 a 元素的两个事件都不会触发;
  • 当继续添加 touchend 监听事件后, touchstart 监听事件开始触发,但 touchmove 事件依旧不触发;
  • 再次添加 pointerdown 监听事件(应该还有其它事件也能帮助触发), touchmove 监听事件触发。

当把 a 元素样式改成 inline-block 或者 block 后,则一切正常…

/*This is placeholder text. This is placeholder text. This is placeholder text. This is placeholder text. |bitbili.net| This is placeholder text. This is placeholder text. This is placeholder text. This is placeholder text.*/