Что не так с этим аудитом Lighthouse? Могу ли я установить PWA с http://localhost

У меня есть PWA, которое проходит аудит Lighthouse в Chrome для устанавливаемого PWA, но мне никогда не предлагается установить его, а событие beforeinstallprompt никогда не срабатывает. Только что проверил Opera, и она тоже не просит меня установить :-(

Я разрабатываю/отлаживаю с помощью http://localhost, который кажется подходящим для других тестов, может ли это быть проблемой? Я хочу протестировать свое индивидуальное приглашение на установку локально перед развертыванием.

Манифест: -

{
  "short_name": "Brotkrumen",
  "name": "Brotkrumen Web App",
  "description": "Native Background Geolocation POC",
  "icons": [
    {
      "src": "gingerbreadhouse.png",
      "sizes": "48x48 128x128 144x144 192x192 512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "gingerbreadhouse.png",
      "sizes": "48x48 128x128 144x144 192x192 512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "start_url": "/travelmanager.html",
  "background_color": "#00ccdd",
  "theme_color": "#00ccdd",
  "display": "fullscreen"
}

Аудит маяка: -

введите здесь описание изображения

Изменить 1

Обратите внимание: – https://github.com/RichardMaher/Brotkrumen репозиторий может быть клонирован кем угодно! Просто вставьте его в папку/каталог с выходом в Интернет и перейдите по адресу https://your.domain/TravelManager.html. Вам понадобится ключ API Google Maps для использования карт и по крайней мере несколько показаний GPS, прежде чем вы сможете нажать «Прибыть». .

NB: с Edge мне предлагается установить через событие beforeinstall https://github.com/RichardMaher/Brotkrumen/blob/master/TravelManager.html Строка № 117, но не Chrome

@Fawaz, вы уверены, что не добавили chrome://flags/#bypass-app-banner-engagement-checks? Просто я несколько раз заходил на ваш веб-сайт, и он не просил меня установить. Вы пробовали Chrome на другом компьютере?

Изменить 2

Ошибка школьника :-( Уверен, что очистил кеш BrotkrumenV1 до того, как он волшебным образом заработал. Совпадение? Думаю, что нет.


person McMurphy    schedule 10.07.2021    source источник


Ответы (2)


Я вижу «Добавить на домашний экран» на http://localhost (я тестировал в браузере Chrome на рабочем столе, и он показывает вариант установки приложения)

Это код сборки для моего приложения.

Также вам может быть интересен это.

person Community    schedule 18.07.2021
comment
Привет, Фаваз, просто чтобы уточнить, ваше приложение/PWA предлагало вам установить не старую добавку на рабочий стол, когда вы обслуживали приложение с http:/locallhost/askgod/, а НЕ httpS:localhost/askgod/ ? Не могли бы вы добавить снимок экрана к своему ответу, пожалуйста? - person McMurphy; 18.07.2021
comment
@McMurphy Да, было предложено установить, вот скриншоты: raw.githubusercontent.com/fawazahmed0/tiger/master/ raw.githubusercontent.com/fawazahmed0/tiger/master/ - person Fawaz Ahmed; 18.07.2021
comment
Спасибо, Фаваз! Чтобы получить 50 и более баллов, не могли бы вы, пожалуйста (сначала отредактировать свой первоначальный ответ, чтобы я мог повысить ваши голоса, а затем) Провести маячный аудит вашей версии http:// (не httpS://)? Похоже на Хром. Не могли бы вы также подтвердить, что это Chrome? Я только что увидел, что мой работает с Edge, но не с Chrome или Opera - странно. О, а вы не устанавливали этот флаг обхода пользователей, не так ли? - person McMurphy; 18.07.2021
comment
Да, я использую Chrome 91. Вот мой аудит маяка: github. com/fawazahmed0/tiger/releases/download/v2/ Я не устанавливал никаких «обходных проверок». - person Fawaz Ahmed; 18.07.2021
comment
Приятель, у тебя не горит PWA Optimized, у тебя все еще есть красные треугольники, и все же твое приложение устанавливается? Что я делаю не так? В любом случае спасибо за помощь! - person McMurphy; 18.07.2021
comment
Выполнили ли вы все шаги, указанные здесь: stackoverflow.com/a/65082386/2437224 Вам также необходимо иметь работника службы зарегистрирован. Также, если вы используете посылки, вы можете передавать файлы через https: посылка index.html --https - person Fawaz Ahmed; 18.07.2021
comment
Вот мой манифест: github.com/fawazahmed0/askgod/blob/main/manifest. webmanifest и мой сервис-воркер: github.com/fawazahmed0/ askgod/blob/main/service-worker.js и здесь я регистрирую работника службы: github.com/fawazahmed0/askgod/blob/ - person Fawaz Ahmed; 18.07.2021
comment
См. Редактировать 1 - person McMurphy; 18.07.2021
comment
@McMurphy Убедитесь, что вы используете последнюю версию Chrome (версия 91), ваш код отлично работает для меня. смотрите скриншоты в этой папке: github.com/fawazahmed0/tiger/tree/master/screeenshotsd - person Fawaz Ahmed; 19.07.2021
comment
но вы просто не можете попросить всех в мире установить флаг chrome://flags/#bypass-app-banner-engagement-checks. Вам не кажется это запретительным ограничением? В любом случае, я буду кодировать для Chrome и больше беспокоиться, когда я httpS - person McMurphy; 19.07.2021
comment
Это значение по умолчанию, я не устанавливал флаг обхода-приложения-баннера-вовлечения-проверки raw.githubusercontent.com/fawazahmed0/tiger/master/ - person Fawaz Ahmed; 19.07.2021
comment
Хорошо @Fawaz, я извиняюсь за то, что сомневался в тебе. Внезапно (честно говоря, последнее изменение состояло в том, чтобы просто установить высоту HTML и BODY на 100% для Firefox, чтобы максимальная-минимальная высота согласовывалась с moz-доступной), и теперь мне предлагается. Странный!. Спасибо еще раз - person McMurphy; 25.07.2021

Чтобы веб-сайт можно было установить, он должен обслуживаться с безопасного (HTTPS) домена. Вы можете запустить localhost на HTTPS, используя mkcert. Для получения дополнительной информации: https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Installable_PWAs

person Shivam Gupta    schedule 12.07.2021
comment
Localhost является исключением из этого правила для всего остального ServiceWorker и т. д. У вас есть ссылка, в которой говорится, что правило httpS применяется только для локального хоста в событии установки? - person McMurphy; 13.07.2021