Ошибка Angular 6 PWA 504 в Chrome. Проблема с базой href?
Я наткнулся на странную ошибку, когда пытаюсь обслуживать свое приложение Angular в IIS, и, похоже, не могу ее решить. Когда я пытаюсь получить доступ к своему PWA в автономном режиме (в Chrome), появляется ошибка HTTP 504.
Настройка проста: <5 мин.
ng new pwaDemo- cd в приложение и
ng add @angular/pwa - в app.module.ts доп. в ServiceWorkerModule, чтобы приложение могло найти ngsw-worker.js
ServiceWorkerModule.register('./ngsw-worker.js', { enabled: environment.production }) - в области изменения манифеста и start_url:
"scope": "/pwaDemo/", "start_url": "/pwaDemo/", - создать приложение для работы с
ng build --prod --base-href /pwaDemo/ - добавьте приложение в свой IIS с неуправляемым кодом и указывающее на
C:\Users\myUsername\Desktop\myAngularApp\pwaDemo\dist\pwaDemo - перейдите к
https://computername/pwaDemo/с помощью Chrome - Сервисный работник загружен и проявит все хорошо и хорошо
- Переведите Chrome в автономный режим (F12 -> Приложение -> Service Workers -> Offline)
- Перезагрузить страницу: -> ошибка 504.
Кажется, я не могу понять, что не так. Когда пытаюсь в Firefox, все работает (даже в автономном режиме).
Когда я использую http-сервер для размещения приложения (без --base href), все работает в Chrome (включая офлайн).
Кто-нибудь может помочь? Я действительно застрял.
Версия:
Angular CLI: 6.0.8
@gkalpak Пробовал с Angular CLI: 7.0.5. Та же проблема. / ngsw / state дает 404
Я пробовал с http-server, и вроде работает нормально. Если /ngsw/state выдает 404, это означает, что ПО не обслуживает запросы. Похоже на проблему с конфигурацией IIS (или сертификатом SSL).
@gkalpak, ты хоть представляешь, как я могу это проверить? Это кажется довольно простой настройкой, но я не нашел никого, у кого была бы эта проблема.
Трудно сказать, не имея возможности воспроизвести. Я бы удостоверился, что сертификат SSL действителен (для используемого домена) в соответствии с Chrome (вы можете щелкнуть значок замка в адресной строке для получения дополнительной информации) и попытаться выяснить, установлен ли SW (и если нет, почему). DevTools > Application > Service Workers и chrome://serviceworker-internals/ могут содержать полезную информацию.
@gkalpak спасибо, завтра попробую. Когда я смотрю на значок замка, проблем нет. Я знаю, что использую самоподписанный сертификат. Это проблема? Firefox не любит самоподписывание, поэтому я сделал исключение для своего сайта, и, может быть, поэтому он работает в Firefox?
Может быть. HTTPS является обязательным условием для ПО, и, возможно, Chrome недостаточно доверяет вашему самозаверяющему сертификату для установки ПО. Браузеры делают исключение для localhost, разрешая SW поверх HTTP (в целях разработки). Попробуйте обслуживать localhost через HTTP, чтобы проверить, сохраняется ли проблема.
@gkalpak Ну, это не может быть сертификат, потому что проблема все еще существует на нашем сервере разработки, где у нас есть сертификат от Терены. Когда я нахожусь в chrome://serviceworker-internals/, я нахожу своего обслуживающего работника, и он выглядит нормально.
Информация с chrome://serviceworker-internals/Scope: https://computername/pwaDemo/ Registration ID: 354 Navigation preload enabled: false Navigation preload header length: 4 Active worker: Installation Status: ACTIVATED Running Status: RUNNING Fetch handler existence: EXISTS Script: https://computername/pwaDemo/ngsw-worker.js Version ID: 6226 Renderer process ID: 41184 Renderer thread ID: 13976 DevTools agent route ID: 15
Понятия не имею: / Рад взглянуть, есть ли общедоступный экземпляр, в котором есть проблема.
@gkalpak Можно ли писать вам по почте?
@gkalpak Я могу отправить вам адрес нашего тестового сайта по почте. Вроде связано с браузером !? Все тестируется в автономном режиме: работает в Firefox (как на мобильном, так и в настольном). Не работает на телефоне Android (в Chrome или загруженном PWA). Работает на iPhone на загруженном PWA. Он не работает в Safari (на компьютере или iPhone).
не стесняйтесь обращаться ко мне по электронной почте.
@gkalpak отлично! спасибо большое, я отправил вам письмо :)
вы решили это ?, если да, пожалуйста, добавьте ответ
Привет, Кто-нибудь смог найти решение этой проблемы?
Ответы 1
Проверьте, правильно ли IIS обслуживает ваш файл manifest.webmanifest (проверьте вкладку сети и посмотрите, загружается ли этот файл при первом посещении сайта).
Если нет, вам нужно настроить тип MIME для .webmanifest в IIS - используйте application/manifest+json.
В качестве альтернативы вы можете выбрать этот вариант и вообще не использовать web.config: https://stackoverflow.com/a/53266152/214980
Что также исправило это для меня, так это наличие файла manifest.appmanifest в папке ClientApp\src, но затем включение его в файл angular.json, чтобы он правильно копировался во время сборки. В моем случае это также включало папку с ресурсами, например:
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"assets": [ "src/assets", "src/manifest.webmanifest" ],
Можете ли вы попробовать последние версии для cli, Angular и т. д.? Кроме того, что показывает
https://computername/pwaDemo/ngsw/state?