Как определить, что браузер может установить PWA



Некоторые сайты хотят, чтобы их установили как PWA. И это нормально, учитывая, что в разных браузерах по-разному нужно найти правильные кнопки, чтобы иконка вашего любимого сайта всё-таки появилась у вас на рабочем столе. В Safari, на мой взгляд, установка PWA совсем уж неочевидна. Но показать кнопку Install хочется.



Определить, что браузер умеет в установку, в принципе, можно. Например, проверить поддержку метода getInstalledRelatedApps. Или посмотреть на window.BeforeInstallPromptEvent. Но только не в Safari.



Глеб Хмызников показывает, как для веб-компонента pwa-install, который как раз и показывает всплывашки с инструкциями по установке для разных браузеров, пришлось костылить определение, что мы находимся в версии Safari, которая всё-таки умеет в Web Apps (как называют PWA в Apple). И это старое доброе выискивание косвенных признаков. Мы знаем, что Web Apps доступны в Safari 17. А ещё мы знаем, что в Safari 17 есть WebGL внутри OffscreenCanvas. А ещё в нужной нам версии есть новые возможности воспроизведения аудио. Получаем определение нужной нам функциональности через косвенные знания о релизах браузера.



И, к сожалению, это не временное решение. Даже если в следующих версиях Safari появится JavaScript API для нормального определения, старые версии придётся поддерживать достаточно долгое время.



https://blog.pwabuilder.com/posts/web-apps-on-macos-sonoma-got-a-proper-install-experience/