Angular 5配置使用service-worker

Angular 5实现了一个适用于Angular应用的Service Worker,Angular CLI 1.6也添加了对service worker的支持。

使用Angular CLI对应用添加service worker的支持分两种情况:

  1. 新项目应用中添加service worker
  2. 在已有项目中添加service worker

新项目应用添加servcie worker

使用Angular CLI在新建项目时可以使用--service-worker,很简单就可以让新项目添加对service-worker的支持。

ng new swdemo --service-worker

使用--service-worker,ng会帮我们自动的配置好service-worker。与service worker相关的变化如下:

1、package.json新增了@angular/service-worker

"@angular/service-worker": "^5.0.0",

2、ng会在.angular-cli.json文件的apps[0]节点添加如下:


{
...
"apps": [
   ...
   "serviceWorker": true
  }
 ],
...
}

3、app.module.ts引入了ServiceWorkerModule,代码如下:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ServiceWorkerModule } from '@angular/service-worker';
import { AppComponent } from './app.component';
import { environment } from '../environments/environment';

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

当环境变量为production时才注册ServiceWorkerModule。注册方式:

ServiceWorkerModule.register('/ngsw-worker.js') : []

4、在src下新建了用于service worker的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/**"
   ]
  }
 }]
}

这个文件用来配置控制service worker缓存文件及数据。

已有项目添加service worker

可以按照上面新建项目的相关改变对已有项目进行修改。

1、安装@angular/service-worker

npm install @angular/service-worker --save

2、在.angular-cli.json添加”serviceWorker”=true配置

ng set apps.0.serviceWorker=true

3、app.module.ts引入了ServiceWorkerModule,参照新建项目的例子。

4、添加用于service worker的src/ngsw-config.json文件,参照新建项目的例子。

构建

使用ng构建生产环境的产品包时就可以报service-worker打包进去。如:

ng build --prod

版权声明:著作权归作者所有。

相关推荐

Html5使用localStorage存储对象数据

Html5可使用localStorage存储数据,其方法为storage.setItem(keyName, keyValue); 其中:keyName:键,字符串类型keyValue:值,字符串类型关于setItem,可以参考:Storage.setItem()。如果需要存储对象数据,那么需要把对象数据使用JSON.stringify转换为字符串。localStorage.setItem

Angular 5:HttpClient的基本用法

Angular 4.3引入了新的用于http请求的接口HttpClient。它旨在替换之前版本的接口Http。有以下新特性:对响应的body做类型检查默认返回的是JSON对象,不再需要使用json()显式解析返回的数据支持拦截器支持进度事件请求后验证和基于刷新的测试框架安装HttpClientModuleHttpClient属于@angular/common/http包的模块HttpCl

[译]Angular 5:升级和新功能的总结

代号为pentagonal-donut的Angular 5刚刚发布,它带来了一些新功能以及一些内部变化,这些会让Angular应用变得更小,执行变得更快。 在这篇文章中,我们将简要介绍一些最重要的变化以及升级指南。 有关更多详细信息,请参阅公告博客帖子,有关所有更改的详细信息,请参阅官方更新日志。性能这是Angular 5包含的一些改变,它会让你的应用变得更

Angular CLI:配置webpack热模块替换hmr(Hot Module Replacement)

热模块替换(Hot Module Replacement)是Webpack的特性,它可以让我们在调试时不需要重新构建就可以更新代码到正在运行的应用。Angular CLI需要做一些设置就可以使用webpack的热模块替换功能。添加依赖hrm依赖于@angularclass/hmr,安装@angularclass/hmr到dev-dependency$ npm

Angular4使用Rxjs5共享Http请求返回的结果数据

在使用Angular开发的单页面应用里,有时需要处理这种场景:使用http请求某个数据,数据请求成功后需要把数据更新到多个组件里。也就是说,有多个observer(观察者)对http请求数据返回的Observable订阅。getDta() {     return this.http.get('/dataUrl').map(res&nbs