Какая разница между обычным вебом и PWA? Были проблемы с клавиатурой, safe area, часиками?

PWA (Progressive Web App) — это веб-приложение с возможностями, приближенными к нативным мобильным приложениям. Основные отличия от обычного веба:

• Установка и запуск: PWA можно установить на устройство и запускать как отдельное приложение без адресной строки браузера.
• Работа офлайн: PWA используют сервис-воркеры для кэширования ресурсов и могут работать без подключения к интернету.
• Уведомления: PWA поддерживают push-уведомления.
• Доступ к устройству: PWA имеют расширенный доступ к функциям устройства по сравнению с обычным вебом.

Проблемы, с которыми можно столкнуться:

• Клавиатура: В PWA на мобильных устройствах иногда возникают баги с появлением виртуальной клавиатуры — например, неправильное изменение размеров viewport или перекрытие элементов.
• Safe area: На устройствах с вырезами (например, iPhone с "челкой") нужно учитывать safe area, чтобы UI не перекрывался системными элементами. В PWA это особенно важно, так как приложение запускается в отдельном окне без стандартных браузерных рамок.
• Часики (статус-бар): В PWA можно настроить цвет и стиль статус-бара, но поведение может отличаться на разных платформах, иногда возникают проблемы с отображением или адаптацией под темную/светлую тему.

Для решения этих проблем используют CSS-переменные env(safe-area-inset-*) и media queries, а также тщательно тестируют поведение на целевых устройствах.