Ошибка Angular PWA. Невозможно установить сайт: не обнаружено подходящего работника службы.

У меня есть веб-сайт (Angular 9.0.1), я добавил пакет @angular/pwa, чтобы превратить его в PWA, и он не работает.

Веб-сайт находится в рабочем состоянии, но прямо сейчас с тестовыми данными на https://new.indomablestore.com

Я проверил, что необходимые файлы (manifest.webmanifest, ngsw.json, ngsw-worker.js) находятся в корневой папке. Я проверил, что файл index.html правильно указывает на манифест, и он отображается на вкладке Chrome Devtools Application.

Но в разделе Installability написано: Соответствующий сервис-воркер не обнаружен. Возможно, вам потребуется перезагрузить страницу или убедиться, что работник службы для текущей страницы также управляет начальным URL-адресом из манифеста.

Я также проверил, что в файле app.module.ts есть такая строка:

ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })

И я не модифицировал ни один из файлов PWA, я позволил Angular CLI создать их.

Любая помощь будет принята с благодарностью, так как сайт скоро заработает, и это последнее, что есть в моем списке :)

Спасибо!

ОБНОВЛЕНИЕ: манифест выглядит так:

  "name": "Indomable",
  "short_name": "Indomable",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "icons": [
    ...
  ]
}

Сервисный воркер регистрируется в app.module следующим образом:

@NgModule({
  declarations: [
    AppComponent,
    ...PAGES,
    ...COMPONENTS,
    ...PIPES
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule,
    routing,
    NgxPayPalModule,
    ServiceWorkerModule.register('./ngsw-worker.js', { enabled: environment.production, scope: './' })
  ],
  ...

В любом случае спасибо за быстрые ответы :)


angular progressive-web-apps google-chrome-devtools angular-pwa
person Iñigo Gorosabel    schedule 14.02.2020    source источник
comment
Инструмент Chrome Lighthouse также указывает на то, что Чхислаи упоминает ниже. Start_url. Lighthouse обычно дает хорошие подсказки о том, что вам нужно исправить.   -  person Mathias    schedule 15.02.2020
comment
Отчет Lighthouse дает мне две ошибки: start_url ответил, но не через сервис-воркера. и не регистрирует сервис-воркера, который управляет страницей и start_url, но ссылки, которые он предоставляет, относятся к сервис-воркерам, а не к конкретным ошибкам.   -  person Iñigo Gorosabel    schedule 15.02.2020

Ответы (2)


arrow_upward
10
arrow_downward

Я нашел ответ. Angular ждет, пока приложение не станет "стабильным", прежде чем регистрировать сервис-воркер. Приложение имеет вызов AJAX при запуске, который проверяет сервер, есть ли новые продукты, фотографии ... и, видимо, это заставляет Angular думать, что оно нестабильно, поэтому оно даже не вызывает регистрацию сервис-воркера.

Как указано в этом ответе на переполнение стека, у регистрации есть опция с именем «registrationStrategy», и я могу установить ее на «registerImmediately» .

ServiceWorkerModule.register('ngsw-worker.js', 
    { 
       enabled: environment.production,
       registrationStrategy: 'registerImmediately'
    }
)

И это только начало работать :)

В любом случае спасибо за помощь и быстрые ответы.

person Iñigo Gorosabel    schedule 15.02.2020

arrow_upward
1
arrow_downward

Вы можете попробовать установить область действия (/) как в манифесте приложения:

"scope": "/",
"start_url": "/",

и при регистрации сервис-воркера:

    ServiceWorkerModule.register('./ngsw-worker.js', {
      scope: './',
    }),

но я думаю, проблема в том, что ваш веб-сервер должен добавлять косую черту в конце. То есть, когда пользователь посещает ваш сайт, он должен быть перенаправлен на new.indomablestore.com/, который соответствует области вашего приложения и базовому пути в вашем индексе.

person cghislai    schedule 14.02.2020
comment
В манифесте уже была область видимости, а для start_url задано значение /. Я добавил область видимости к функции регистрации, и она по-прежнему говорит то же самое. Дело в том, что у меня много других проектов с Angular PWA, все они работают, и я не перенаправляю их на URL с косой чертой в конце :( - person Iñigo Gorosabel; 15.02.2020