Как получить флаг serviceWorker в angular-cli.json? - PullRequest
Новая
       11

Как получить флаг serviceWorker в angular-cli.json?

0 голосов
/ 23 января 2019

У меня есть существующий англоязычный проект, к которому я хочу добавить сервисного работника для создания его прогрессивного веб-приложения. Я использую угловой 5.2.11, и из-за старой клиентуры я не могу использовать команду ng add. Итак, я начал вручную, я установил: 

$npm install @angular/service-worker@5.2.11
$npm install @angular/pwa@0.10.3

Что еще мне нужно установить, чтобы получить флаг serviceWorker в angular-cli.json?

1 Ответ

0 голосов
/ 23 января 2019

Поскольку вы используете угловой 5.2.1, ваш CLI должен быть не ниже 1.6, и вы можете делать следующее: 

$ npm install @angular/service-worker
$ ng set apps.0.serviceWorker=true

Эта последняя команда устанавливает флаг serviceWorker в angular-cli.json.

Затем вы можете настроить модуль приложения: 

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

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

Затем вы можете добавить файл конфигурации служебного работника ngsw-worker.js в каталог src: 

{
  "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/**"
      ]
    }
  }]
}

Проверьте эту статью для более подробной информации: https://alligator.io/angular/service-workers/

Надеюсь, это поможет.

...