在 App 中添加服务 Worker

首先,如果你正在咨询 mobile.angular.io 标志 - 移动设备不再起作用。

首先,我们可以创建一个带有角度 cli 的普通项目。

ng new serviceWorking-example
cd serviceWorking-example

现在重要的是,对于我们想要使用服务工作者的角度 cli 我们需要做的事情:

ng set apps.0.serviceWorker = true

如果由于某种原因你没有安装 @ angular / service-worker,你会看到一条消息:

你的项目配置了 serviceWorker = true,但未安装 @ angular / service-worker。运行 npm install --save-dev @angular/service-worker 并重试,或在 .angular-cli.json 中运行 ng set apps.0.serviceWorker=false

检查 .angular-cli.json,你现在应该看到:serviceWorker:true

如果此标志为 true,则将使用服务工作程序设置生产版本。

将生成一个 ngsw-manifest.json 文件(或者在我们在项目的根目录中创建一个 ngsw-manifest.json 的情况下进行扩充,通常这样做是为了指定路由,将来这可能会自动完成)在 dist / root 中,服务工作者脚本将被复制到那里。将在 index.html 中添加一个简短的脚本来注册服务工作者。

现在,如果我们在生产模式下构建应用程序 ng build –prod

件实交件实实件交实实实实似实件实件件件实交似件件实件实实实件交件交件实件件交交件

交交似实交交似实实件实件实实实件实实实交交交交实实件实件实件实件实件实实似似实件

  • 工人 basic.min.js
  • SW-register.HASH.bundle.js
  • NGSW-的 manifest.json

此外,index.html 现在包含这个 sw-register 脚本,它为我们注册一个 Angular Service Worker(ASW)

在浏览器中刷新页面(由 Web Server for Chrome 提供服务)

打开开发者工具。实件实交交交交实实似实似似交交交实似

StackOverflow 文档

好现在服务工作者正在运行!

现在我们的应用程序应该加载更快,我们应该可以离线使用该应用程序。

现在,如果你在 chrome 控制台中启用了离线模式,你应该会看到 http:// localhost:4200 / index.html 中的应用程序无法连接到 Internet。

但是在 http:// localhost:4200 / 我们遇到问题并且它没有加载,这是由于静态内容缓存只提供清单中列出的文件。

例如,如果清单声明了/index.html 的 URL,则缓存会回复对/index.html 的请求,但是对/或/ some / route 的请求将转到网络。

这就是路由重定向插件的用武之地。它从清单中读取路由配置,并将配置的路由重定向到指定的索引路由。

目前,这部分配置必须是手写的(19-7-2017)。最终,它将从应用程序源中存在的路由配置生成。

所以如果现在我们在项目的根目录中创建或者 ngsw-manifest.json

{
  "routing": {
    "routes": {
      "/": {
        "prefix": false
      }
    },
    "index": "/index.html"
  }
}

我们再次构建我们的应用程序,现在当我们转到 http:// localhost:4200 /时 ,我们应该重定向到 http:// localhost:4200 / index.html

有关路由的更多信息,请阅读此处官方文档

在这里你可以找到有关服务人员的更多文档:

https://developers.google.com/web/fundamentals/getting-started/primers/service-workers

https://docs.google.com/document/d/19S5ozevWighny788nI99worpcIMDnwWVmaJDGf_RoDY/edit#

在这里,你可以看到使用 SW 预缓存库实现服务的另一种方法:

https://coryrylan.com/blog/fast-offline-angular-apps-with-service-workers