Подходящий работник службы не обнаружен - PullRequest
Новая
       7

Подходящий работник службы не обнаружен

0 голосов
/ 18 октября 2018

Я добавил работника сервиса в свое приложение с помощью команды: 

ng add @angular/pwa --project ng-zero

В терминале он ответил так: 

Installed packages for tooling via npm.
CREATE ngsw-config.json (441 bytes)
CREATE src/manifest.json (1071 bytes)
CREATE src/assets/icons/icon-128x128.png (1253 bytes)
CREATE src/assets/icons/icon-144x144.png (1394 bytes)
CREATE src/assets/icons/icon-152x152.png (1427 bytes)
CREATE src/assets/icons/icon-192x192.png (1790 bytes)
CREATE src/assets/icons/icon-384x384.png (3557 bytes)
CREATE src/assets/icons/icon-512x512.png (5008 bytes)
CREATE src/assets/icons/icon-72x72.png (792 bytes)
CREATE src/assets/icons/icon-96x96.png (958 bytes)
UPDATE angular.json (3825 bytes)
UPDATE package.json (1985 bytes)
UPDATE src/app/app.module.ts (2042 bytes)
UPDATE src/index.html (851 bytes)

Ошибка не возникла, только некоторые предупреждения.

Файл app.module.ts теперь содержит: 

import { ServiceWorkerModule } from '@angular/service-worker';
...
  imports: [
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),

И я не трогал файл конфигурации ngsw-config.json: 

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

Мой main.ts файлсодержит следующее: 

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
.then(
  () => {
  }
)
.catch(error => {
  console.log(error);
});

И файл index.html: 

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>NgZero</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#1976d2">
</head>

<body class="mat-app-background">
  <app-root>Loading...</app-root>
  <noscript>Please enable JavaScript to continue using this application.</noscript>
</body>

</html>

Файлы под корнем документа: 

$ ll ng-zero/
total 1,2M
-rw-rw-r-- 1 stephane  42K oct.  18 13:20 3rdpartylicenses.txt
-rw-rw-r-- 1 stephane  14K oct.  18 13:20 4.c1db20ef5bd9add4749b.js
drwxrwxr-x 3 stephane 4,0K oct.  18 13:20 assets/
-rw-rw-r-- 1 stephane 5,4K oct.  18 13:20 favicon.ico
-rw-rw-r-- 1 stephane  993 oct.  18 13:20 index.html
-rw-rw-r-- 1 stephane 847K oct.  18 13:20 main.07ca5763aa8c2813b8c7.js
-rw-rw-r-- 1 stephane 1,1K oct.  18 13:20 manifest.json
-rw-rw-r-- 1 stephane 3,2K oct.  18 13:20 ngsw.json
-rw-rw-r-- 1 stephane 132K oct.  18 13:20 ngsw-worker.js
-rw-rw-r-- 1 stephane  58K oct.  18 13:20 polyfills.eba1d61bda8f41298ad5.js
-rw-rw-r-- 1 stephane 2,2K oct.  18 13:20 runtime.fa8fa8286609c1c01b2a.js
-rw-rw-r-- 1 stephane  519 oct.  18 13:20 safety-worker.js
-rw-rw-r-- 1 stephane  63K oct.  18 13:20 styles.f57681079a43921c301b.css
-rw-rw-r-- 1 stephane  519 oct.  18 13:20 worker-basic.min.js

Затем я перешел к этомувеб-страница https://angular.io/guide/service-worker-getting-started и может успешно выполнять все упражнения, таким образом, обслуживающий работник выполняет свою работу в автономном режиме.

Я также добавил этот исходный код в файл app.component.ts и увидел, что он работает нормально вмобильный браузер, так как он предлагал мне загрузить более новую версию: 

ngOnInit() {
  if (this.swUpdate.isEnabled) {
    this.swUpdate.available.subscribe(() => {
      if (confirm('A newer version of the application is available. Load the new version ?')) {
        window.location.reload();
      }
    });
  }
}

Но когда я открою консоль браузера Chrome, перейдите на вкладку Application, выберите запись Manifest и нажмитепо ссылке Add to homescreen консоль отображает следующую ошибку: Site cannot be installed: no matching service worker detected. You may need to reload the page, or check that the service worker for the current page also controls the start URL from the manifest

В файле manifest.json значение start_urlis /

"start_url": "/"

Затем я изменил значение start_url на https://stephaneeybert.github.io/stephaneeybert/ng-zero/ и перераспределил, но жалуется, что https://stephaneeybert.github.io/stephaneeybert/ng-zero/manifest.json не найден (404).

Воткак я создаю приложение: 

ng build --prod --base-href /stephaneeybert/ng-zero/

Приложение развернуто в https://stephaneeybert.github.io/stephaneeybert/ng-zero/

Я на "@angular/cli": "^7.0.0-rc.2" и "@angular/core": "^7.0.0-rc.0"

1 Ответ

0 голосов
/ 18 октября 2018

Я только что протестировал приложение по этому URL (https://stephaneeybert.github.io/stephaneeybert/ng-zero/)

Кажется, что оно работает нормально.

  1. Работник службы успешно зарегистрирован
  2. Caching Works
  3. и приложение работает и в автономном режиме.

При тестировании приложения Angular с установленным сервисным работником необходимо принять к сведению следующее:

1) всегда проверяйте приложение в окне браузера в режиме инкогнито
2) проверяйте на локальном сервере или на сервере с поддержкой https 3) чтобы приложение работало полностью, вам нужно будет хотя бы дважды посетить сайтили обновите один раз, находясь на сайте.

Если у вас нет, я бы порекомендовал вам прочитать больше о работе сервисных работников и о том, как работает сервисный работник в угловых.

Спасибо

...