4.使用sw-precache

您可能从离线codelab回想起来，为了向网络应用程序添加离线功能，您需要完成以下步骤：

1. 创建一个JavaScript源文件，导入服务工作者polyfill并定义您的服务工作者事件处理程序。这个文件可以有任何名字，但是我们在这个例子中称之为sw.js

2. 在您的index.html文件中添加标记以注册您的服务工作者。

我们将在此codelab中使用的工具sw-precache是一个Node.js模块，可以为您自动处理步骤1。它为您创造了正确的事件处理程序，因此您不需要编写任何位于sw.js的代码。但是，我们将看看生成的代码，并确保我们了解它在做什么。

该项目使用gulp作为其构建管理工具。该package.json文件定义了我们的Node.js包的要求。package.json通过运行以下命令来安装所有包依赖项：

$ cd .. # go back to top-level directory
$ npm install

现在通过运行以下npm命令安装sw-precache模块（取决于如何安装Node.js和npm，您可能需要或可能不需要使用sudo前缀）：

$ npm install --save-dev sw-precache

gulp的一个奇怪的地方是，您通常需要安装其全局实例以及本地实例，因此再运行一个命令来完成设置：

$ npm install -g gulp

现在我们可以使用gulp命令构建我们的项目，但首先我们需要创建一个使用该sw-precache模块生成我们的sw.js文件的gulp任务。在您的gulpfile.js底部添加以下代码：

gulp.task（'generate-service-worker'，function（callback）{
  var path = require（'path'）;
  var swPrecache = require（'sw-precache'）;
  var rootDir ='app';

  swPrecache.write（path.join（rootDir，'sw.js'），{
    staticFileGlobs：[rootDir +'/**/*.{js,html,css,png,jpg,gif}']，
    stripPrefix：rootDir
  }， callback）;
}）;

有关sw-precacheAPI的更多信息，请查看Github上的项目页面。此代码告诉swPrecache模块在sw.js写文件，它安排在该应用程序中缓存所有对象，以js，html，css，png，jpg，和gif扩展名结尾。

现在运行gulp generate-service-worker。你应该看到如下输出：

$ gulp generate-service-worker
[11:56:22] Using gulpfile ~/airhorn/gulpfile.js
[11:56:22] Starting 'generate-service-worker'...
Total precache size is about 75.87 kB for 11 resources.
[11:56:22] Finished 'generate-service-worker' after 49 ms
$

此过程在项目的app目录中生成一个新文件sw.js。

重要提示：每当您对本地文件进行更改，和您可以部署新版本的网站时，您将需要重新运行此步骤。因此，生成服务工作者代码的任务应该包含在作为部署过程一部分自动运行的任务列表中。