[翻译]入门angular的 Service Workers

2018-01-10 本文已影响252人 Gary嘉骏

前期准备

如下的基础知识:

Angular service workers介绍.

从5angular.0.0开始，在任意cli项目中，你可以很容易的开启Angular service worker。这文档是介绍怎么去在新的或旧的项目中启用Angular service worker。会通过一个简单的例子是展示service worker的行为与基本缓存。

在新项目中添加service worker

如果你要生成一个新的cli项目，你可以使用cli去配置Angular service worker：

ng new my-project --service-worker

--service-worker命令会去做所有的配置并添加需要依赖的包。想了解更多，可查看下面的关于如何在旧项目添加service worker的说明

在旧项目中添加service worker

添加步骤:

添加service worker的包依赖。
在cli配置中启用service worker。
导入和注册service worker。
新建配置文件，定义缓存的行为和其它设定。
编译项目。

步骤1：添加service worker的包依赖。使用yarn包管理工具：

yarn add @angular/service-worker

步骤2：在cli配置中启用service worker：

要开启Angular service worker，cli必须在编译时生成Angular service worker的配置。要在旧项目中通知cli去做这一步，必须把.angular-cli.json文件里的 serviceWorker的值改成true

ng set apps.0.serviceWorker=true

步骤3：导入和注册service worker:

在src/app/app.module.ts中：

import  {  [ServiceWorkerModule](https://angular.io/api/service-worker/ServiceWorkerModule)  }  from  '@angular/service-worker';  
import  { environment }  from  '../environments/environment';

@NgModule({ 
declarations:  [  AppComponent  ], 
imports:  [  
   BrowserModule,  
   ServiceWorkerModule.register('/ngsw-worker.js',  {enabled: environment.production})  
   ], 
   providers:  [ ],
   bootstrap:  [AppComponent]
 })  
export  class  AppModule  {  }

ngsw-worker.js文件是cli编译生成的service worker脚本，最后能在dist/里找到。

步骤4: 新建配置文件, ngsw-config.json

angular cli需要名为ngsw-config.json的service worker配置文件。这文件定义了如何去缓存文件与数据资源。

你可以使用cli产生的通用配置版本

或者，将以下内容保存为src/ ngsw-config.json：

{
  "index": "/index.html",
  "assetGroups": [{
    "name": "app",
    "installMode": "prefetch",
    "resources": {
      "files": [
        "/favicon.ico",
        "/index.html"
      ],
      "versionedFiles": [
        "/*.bundle.css",
        "/*.bundle.js",
        "/*.chunk.js"
      ]
    }
  }, {
    "name": "assets",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/assets/**"
      ]
    }
  }]
}

步骤 5: 编译项目

ng build --prod

产生的项目就是启用了Angular service worker了.

Service worker 的展示说明

此模块通过一个示例来展示说明service worker

使用http-server构建服务器

因为ng serve 不会启动service worker，你必须使用另一个http服务器去本地测试你的项目。你可以使用任何的HTTP服务器。下面例子是使用http-server，可以通过npm安装。为了减少冲突的可能性，将在一个专用的端口测试。
要使用http-server开启服务，要移动到打包文件的文件夹内然后启动web服务：

cd dist
http-server -p 8080

初次加载

服务启动中，你可以在浏览器访问http://localhost:8080/。你的应用应该是正常运行。

提示:当测试Angular service workers,最好是在浏览器中使用无痕或私有窗口，这能保证service worker不会从以前的留下的缓存中读取数据，造成意外的状况。

模拟网络问题

要模拟网络问题，可禁止应用的网络连接。在Chrome内：

Select Tools > Developer Tools (开发人员工具).
进入Network分页.
勾选the Offline 项.

Now the app has no access to network interaction.
现在应用没法访问网络了。

对于那些没有使用Angular service worker的应用，刷新页面会显示 "There is no Internet connection"的页面。

添加了Angular service worker的应用不一样。刷新后，页面正常显示。
如果你查看Network 分页的信息，你就能验证service worker是在工作。

什么被缓存

会发现所有用来渲染app的文件都被缓存了。给cli使用的通用ngsw-config.json就是定义了缓存这些特定的资源：

index.html.
favicon.ico.
编译的文件 (JS and CSS bundles).
assets文件夹里的所有文件.

修改你的应用

现在你已经看到service worker如何缓存你的应用，下一步是理解更新如何工作。

如果你在一个无痕窗口中测试，打开另一个分页。这会使状态和缓存不会再测试中消失。
关闭应用的分页，但不是浏览器。这也会关闭了开发者工具。
关闭http-server的服务。
下一步，修改应用，查看service worker安装更新。
打开src/app/app.component.html并编辑
修改文本 Welcome to {{title}}! 为 Bienvenue à {{title}}!.
再次编译并启动服务

ng build --prod
cd dist
http-server -p 8080

在浏览器中更新你的应用

现在观察浏览器和service worker是如何处理更新了的应用

在同一浏览器再次打开http://localhost:8080 。发生什么？

哪里出错了？实际是没有的。Angular service worker就在执行它的工作，展示它已安装的应用的版本。尽管有一个可用的更新。为了提高速度，service worker会在完成展示已缓存的应用后才去检查更新。

如果你查看http-server的日志，你就可以看到service worker请求/ngsw.json。这是service worker在检查更新。

刷新页面.

service worker在后台安装了更新的app版本，下次页面加载或重加载时，service worker就展示最新的版本。