Вы разработали веб-приложение, написали его код и сервис-воркер и, наконец, добавили манифест веб-приложения , описывающий, как оно должно вести себя при «установке» на устройстве пользователя. Сюда входят такие вещи, как значки высокого разрешения, которые можно использовать, например, в средстве запуска мобильного телефона или переключателе приложений, или как ваше веб-приложение должно запускаться при открытии с главного экрана пользователя.
И хотя многие браузеры будут соблюдать манифест веб-приложения, не каждый браузер будет загружать или учитывать каждое указанное вами значение. Введите PWACompat , библиотеку, которая принимает манифест вашего веб-приложения и автоматически вставляет соответствующие meta или link ссылок для значков разных размеров, значков, режима запуска, цветов и т. д.
Это означает, что вам больше не нужно добавлять на свои страницы бесчисленные стандартные и нестандартные теги (например <link rel="icon" ... /> или <meta name="orientation" ... /> ). А для приложений домашнего экрана iOS PWACompat даже динамически создаст заставки, поэтому вам не придется создавать их для каждого размера экрана.
Использование PWACompat
Чтобы использовать PWACompat , обязательно разместите ссылку на манифест вашего веб-приложения на всех своих страницах:
<link rel="manifest" href="manifest.webmanifest" />
А затем либо включите этот скрипт, либо добавьте его в асинхронно загруженный пакет:
<link rel="manifest" href="manifest.webmanifest" />
<!-- include PWACompat _after_ your manifest -->
<script async src="https://unpkg.com/pwacompat" crossorigin="anonymous"></script>
PWACompat получит ваш файл манифеста и выполнит всю работу, необходимую для браузера вашего пользователя, независимо от того, находится ли он на мобильном устройстве или на настольном компьютере.
Мы по-прежнему рекомендуем добавить хотя бы один высококачественный ярлык для индексации поиска:
<link rel="icon" type="image/png" href="icon-128.png" sizes="128x128" />
Для получения дополнительной информации ознакомьтесь с рекомендациями .
<script type="module">
// detect iOS Safari
if (('standalone' in navigator) && (!navigator.standalone)) {
import('https://unpkg.com/pwacompat');
}
</script>
В глубине
Что на самом деле делает PWACompat для поддерживаемых браузеров? PWACompat загрузит манифест вашего веб-приложения и:
- Создайте метатеги значков для всех значков в манифесте (например, для значка в старых браузерах).
- Создайте резервные метатеги для различных браузеров (например, iOS, ответвлений WebKit/Chromium и т. д.), описывающие, как должно открываться веб-приложение.
- Устанавливает цвет темы на основе манифеста
Для Safari PWACompat также:
- Устанавливает
apple-mobile-web-app-capable(открытие без браузера Chrome) для режимов отображения :standalone,fullscreenилиminimal-ui - Создает изображения
apple-touch-icon, добавляя фон манифеста к прозрачным значкам: в противном случае iOS отображает прозрачность как черный цвет. - Создает динамические изображения-заставки, максимально соответствующие изображениям-заставкам, созданным для браузеров на базе Chromium.
Если вы хотите внести дополнительный вклад или помочь с дополнительной поддержкой браузера, PWACompat находится на GitHub .
Попробуйте это
PWACompat доступен на Airhorner , v8.dev и Emojityper . HTML-код заголовка вашего сайта может быть простым: просто укажите манифест , а PWACompat позаботится обо всем остальном.
📢🤣🎉