Почему мой Angular PWA не проходит аудит Lighthouse PWA, хотя все работает нормально, когда я тестирую его вручную?

Если вы зайдете в приложение https://quotesaboutjesus.netlify.com/quotes и посмотрите на вкладку «Приложение» в инструменте Chrome Dev вы увидите, что через несколько секунд сервисный работник работает нормально ... и приложение хорошо работает в онлайн-режиме.

Но результат аудита Lighthouse всегда говорит мне:

  • Текущая страница не отвечает 200 в автономном режиме.
  • start_url не отвечает 200 в автономном режиме Start_url действительно ответил, но не через сервис-воркера.
  • Не регистрирует сервис-воркера, который управляет страницей и start_url

Но, как вы увидите в моем коде здесь или непосредственно в мой manifest.webmanifest здесь, я сделал (я думаю?: потому что Lighthouse говорит, что я этого не делал):

  1. добавить манифест веб-приложения.
  2. Убедитесь, что start_url в вашем манифесте правильный.
  3. Добавьте в приложение сервис-воркера.
  4. Используйте сервис-воркер для локального кэширования файлов.
  5. В автономном режиме используйте сервис-воркер в качестве сетевого прокси для возврата локально кэшированной версии файла.

Поэтому я не понимаю, почему я не прошел контрольный тест (вы можете легко воспроизвести его самостоятельно в Интернете).

Я предположил, что это может быть вызвано тем фактом, что мой SW регистрируется немного поздно, поэтому я пытаюсь оптимизировать производительность приложения, но даже сейчас у него лучшая оценка производительности (90, по крайней мере, во время аудиторского теста), это не так. пройти этот тест.

Кто-нибудь может мне помочь ?

Изображение с сообщениями об ошибках Lighthouse

Изображение, показывающее, что работник службы работает нормально

Изображение с манифестом (start_ul in)


person WilChrist    schedule 10.01.2020    source источник
comment
возможно, попробуйте изменить свой start_url на / quotes   -  person Mathias    schedule 10.01.2020
comment
Привет, цитаты @Mathias - это то, куда / перенаправить, а не базовый URL. Но я попробую.   -  person WilChrist    schedule 10.01.2020
comment
Перенаправления могут быть причиной вашей проблемы (не уверен). Обычно люди кладут все на базу   -  person Mathias    schedule 10.01.2020
comment
на самом деле это угловое перенаправление, а не серверное. Я попытался изменить на / кавычки, как вы предложили, но это не решило проблему.   -  person WilChrist    schedule 10.01.2020
comment
Вы уверены, что загрузили новый манифест? Я только что проверил, и это все еще start_url: /,   -  person Mathias    schedule 10.01.2020
comment
нет, я тестировал локально, но если хочешь, могу подтолкнуть.   -  person WilChrist    schedule 10.01.2020
comment
Я не уверен, что там все работало бы по-другому, так что не делайте лишней работы.   -  person Mathias    schedule 10.01.2020
comment
Обычно подсказки Маяка очень близки к тому, что вам нужно.   -  person Mathias    schedule 10.01.2020
comment
Я все равно его уже нажимаю, он будет онлайн через 2 или 3 минуты после сборки.   -  person WilChrist    schedule 10.01.2020
comment
Также может не быть подключен. Вы выдаете ошибку в одном из ваших скомпилированных файлов javascript. TypeError: невозможно прочитать свойство 'slice' неопределенного   -  person Mathias    schedule 10.01.2020
comment
да @Mathias, но дело в том, что приложение, похоже, очень хорошо работает как приложение PWA, несмотря на то, что говорит Lighthouse. Я даже пытался понять, как Lighthouse тестирует это, но я все еще не вижу, откуда взялась проблема.   -  person WilChrist    schedule 10.01.2020
comment
Где-то есть перенаправление сервера. при вторичной загрузке что-то перенаправляется на http://quotesaboutjesus.netlify.com/quotes (обратите внимание на http://), который сервер затем перенаправляет обратно на https://.   -  person abraham    schedule 14.01.2020
comment
Привет @abraham. Спасибо за вашу помощь   -  person WilChrist    schedule 15.01.2020
comment
Как вы узнали об этом перенаправлении?   -  person WilChrist    schedule 15.01.2020
comment
Возможно ли, что это вызвано угловым перенаправлением из / в / кавычек?   -  person WilChrist    schedule 15.01.2020
comment
Когда у меня есть Chrome DevTools, на вкладке сети отображается перенаправление 307 до 200 ok. Я не уверен, что вызвало первоначальное перенаправление на небезопасный сайт. Это может быть перенаправление Angular или Netlify. /quotes - это путь для обоих запросов, поэтому единственное различие, которое я вижу, - это протокол.   -  person abraham    schedule 16.01.2020


Ответы (1)


У меня тоже была эта проблема, и я нашел это решение в: https://stackoverflow.com/a/61152966/8581106

вы должны добавить registrationStrategy: "registerImmediately" в регистрацию serviceWorker в app.module:

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

как упомянуто в

person Jalaleddin Hosseini    schedule 03.12.2020