sw-precache使用指南

Service Worker Precache是一个能自动生成Service Worker文件的模块，你可以利用它来预先缓存资源。它可以和你的构建过程集成在一起，一旦配置完成，它就可以识别你的站点中所有静态资源（HTML，JavaScript，CSS，图片等）并生成每个文件内容的哈希值。每个静态资源的网址、版本信息的哈希值都存储在生成的Service Worker文件中，当客户端发起向这些静态资源的网络请求时，Service Worker会优先返回缓存中的相应资源，并且当之后的构建过程中改变了这些资源后，Service Worker也会更新相应的资源。

优先从本地提供已经缓存的静态资源 ，使得你可以获取你的网络应用程序所有关键的支持文件而无需等待任何网络响应。

该模块可以在基于JavaScript的构建脚本中使用，例如使用gulp编写的脚本，同时它也提供了命令行界面。你可以直接使用模块，或者如果你愿意的话，也可以对sw-precache进行包装以配合特定的构建环境，例如webpack。

sw-precache可以与sw-toolbox一起使用，sw-toolbox可以为动态资源提供更好的缓存机制。

安装

本地构建集成：

$ npm install --save-dev sw-precache

全局命令行界面：

$ npm install --global sw-precache

准备工作

1. 确保你的网站使用HTTPS访问。Service Worker功能仅在通过HTTPS访问的页面上可用（在localhost也可以使用，以方便本地测试）。之所以会设置这个限制，Prefer Secure Origins For Powerful New Features一文描述了相关原理；
2. 将sw-precache整合到你的构建脚本中。它可以与gulp、Grunt或其他以node.js编写的构建脚本良好地配合。我们在demo 文件夹中提供了两个例子，demo中的每个构建脚本都有一个名为writeServiceWorkerFile()的函数，它显示了如何使用对应的API。 这两个脚本都可以生成功能完备的JavaScript代码，这些代码负责预先缓存和获取你的网站脱机工作时需要的所有资源。我们还提供了一个一个命令行界面，方便那些使用其它构建方式的人使用；
3. 注册service worker文件。你需要将生成的JavaScript文件注册为控制你的网站的service worker。通常这只需要在你的网站的顶级的入口页面中完成，因为service worker一旦在根目录注册，就会自动包含根目录以下的所有页面。service-worker-registration.js是一个示例脚本，它说明了注册service worker以及处理各种生命周期事件的最佳实践。

示例

项目的示例文件gulpfile.js说明了如何在适当的环境中使用sw-precache（注意:这里的示例文件是demo文件夹下的，而不是根目录下的）。我可以通过克隆此repo来运行示例，使用npm install下载依赖项，进入demo文件夹，运行npm bin 或者gulp serve-dist，然后访问localhost：3000查看效果。

还有一个示例Gruntfile.js，说明了如何使用Grunt中生成service worker。 虽然它不能像gulp一样在本地运行。

这里有一个更简单的gulp示例，它假定你的网站的资源都位于app文件夹下，并且你想要缓存所有的JavaScript，HTML，CSS和图片文件。

gulp.task('generate-service-worker', functio