TGViewer
mefody.dev mefody.dev @mefody_dev · 5.39K subscribers
Post #132 3.83K
Как определить, что браузер может установить 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/
PWA Builder Blog Web Apps on macOS Sonoma got a proper install experience | PWA Builder Blog How we detected Web Apps availability on macOS platform.
  • 👍 18
  • 🥴 10
  • ❤ 3
  • ❤‍🔥 1
  • 🔥 1
  • 🐳 1
More from @mefody_dev
  1. Sep 28, 2026View Transitions Toolkit Брамус делится своей коллекцией утилит, чтобы можно было более уд…
  2. Sep 25, 2026Эффект одометра Люблю такие демки, когда на чистом CSS делают что-то необычное, для чего я…
  3. Sep 23, 2026Цена ошибок гидрации В React есть много ухищрений, чтобы серверный кусок страницы обновилс…
  4. Sep 16, 2026Какие анимации более производительные: CSS или JS? Лучше пару раз увидеть, чем много откуд…
  5. Sep 14, 2026Единица измерения lh Если коротко, то 1lh = 1 line height. И это не размер шрифта, который…
  6. Sep 11, 2026<mermaid-element> Ещё одна полезная библиотека. Брамус собрал кастомный элемент, которому…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →