Service Worker 更新机制

Chrome HTTP 缓存 进程 浏览器 Service-Worker PWA

Service Worker 用来控制页面资源缓存,那么sw.js文件本身如何进行更新呢? 立即使用 Service Worker! 中介绍了使用 Service Worker 搭建离线 App, 以及这一 App 的版本更新方式。 本文重点关注 Service Worker 本身的更新机制,如何设置 HTTP 缓存,当前浏览器的更新机制,以及调试时如何快速更新。

Service Worker 更新

Service Worker 作为离线缓存的核心,它的更新意味着 App 版本的更新。 它的更新是由浏览器触发、在独立进程中进行的。

  • 独立的更新进程。安装和更新进程都是独立的进程,渲染进程和当前的 Service Worker 会同时启动,安装和更新不影响用户使用当前 App,这里 Web App 比 Native 更加轻量。
  • 零客户端时更新。为了不打扰用户,只有在用户关闭了所有旧版页面之后(因为 Service Worker 是 shared worker)新的 Worker 才会被激活。
  • 更新过程(Soft Update)由浏览器触发,只有逐字节比对不同时才会启动 更新算法(Update Algorithm)。

立即使用 Service Worker!

AppCache Chrome JavaScript PWA Safari 缓存 Service-Worker

Web 相比于 Native 最大的弱势莫过于离线能力,如果你没有连接到网络想必网页一定是打不开的。 为了离线能力 Web 也有过很多的尝试,比如很多浏览器提供的 Reading List,HTML5 的 APPCache, indexDB、localStorage、sessionStorage 等一系列的存储 API,以及本文要介绍的 Service Worker。 本文的主要内容包括为什么可以立即使用 Service Worker,以及如何借助 Service Worker 快速搭建离线可用的 App。

Service Worker 可以平滑引入Service WorkerPWA 系列技术 中实现离线能力的关键技术。 它属于一种共享的 Web Worker(shared worker),运行在页面进程之外。 因此 Service Worker 天生和页面脚本没有耦合,在引入 Service Worker 的同时无需重构既有代码。 这大概也是 Progressive Web App 中 Progressive 的另一层含义。

Service Worker 进程采用较为现代的接口。Web Worker 是事件驱动的 JavaScript 进程,而 Service Worker 可以监听到更多的功能事件(Functional Events), 比如资源请求(fetch)、推送通知(push)、后台同步(sync)。 这些事件大多基于 ExtendableEvent 实现,并采取 Promise 接口, 用起来相当舒服。

使用 HTTP 缓存:Etag, Last-Modified 与 Cache-Control

Chrome HTTP Node.js 性能 缓存 浏览器

整个 Web 系统架构在 HTTP 协议 之上, 利用 HTTP 的缓存机制不仅可以极大地减少服务器负载, 更重要的是加速页面的载入,以及减少用户的流量消耗。 快速到达和易于访问是 Web 与生俱来的特性, 其缓存机制也早已被服务器和浏览器厂商广泛地实现, 我们作为 Web 内容的作者何乐而不为呢?

Web 服务器(比如 Tomcat、Apache、Virgo)或服务器端框架(比如 Django、Express.js) 都会实现 HTTP 缓存机制,但本文不借助这些框架, 而是直接以基本的 Node.js 程序与 Chrome 浏览器来描述 HTTP 中最基本的缓存机制, 涉及到的 HTTP 头字段 包括 Cache-Control, Last-Modified, If-Modified-Since, Etag, If-None-Match 等。

合理使用 HTTP 缓存

HTTP 缓存 网络 浏览器

HTTP 缓存 使用 HTTP 缓存:Etag, Last-Modified 与 Cache-Control 一文对 HTTP 协议的缓存机制进行了简单的讨论,本文集中讨论实际操作中的最佳实践。

TL;DR

  • 谨慎地使用过期时间,最好配合 MD5 一起使用。
  • 总是启用条件请求,比如 EtagLast-Modified
  • 文件服务采用 Last-Modified,动态内容采用 Etag
  • 分离经常变化的部分,也会提高缓存的命中率。

Shell 中的变量作用域

Shell 进程 作用域

TL;DR

Shell 中的变量只作用于当前进程。如需在子进程中创建副本可使用 export 内建命令。 有时使用临时变量语法可以非常方便。

Vim 中使用 eslint 检查代码风格

Vim-Practice JavaScript Vim 代码风格 快捷键 ESLint

eslint 是一款可配置的插件式架构的代码风格检查工具。可配置不足为奇,但插件式的架构却能带来很多方便。 例如在单元测试代码中,引入 mocha 插件便可自动引入一系列额外的语法规则。

打造前端开发的 Vim 环境 一文中提到了使用 Syntastic 对代码进行代码风格检查。 但同时我们需要按照同样一份规则(就是下文的 eslintrc)来进行代码格式化。 本文详细介绍如何在 Vim 中引入 eslint,以及用 eslint 规则来格式化代码。

上一页 下一页