Будущее WEB APP (прогрессивное веб-приложение), часть 1
В последние несколько лет растет число пользователей смартфонов, и все веб-приложения становятся нативными. Нативные приложения играют огромную роль в нашей повседневной жизни. Но проблема в том, что когда у бизнеса уже есть веб-приложение и ему необходимо привлечь больше клиентов за счет публикации собственного приложения для мобильных устройств, требуется некоторое время для разработки всей бизнес-логики для преобразования в (Java, Kotlin, React Native и т. д.) родные языки приложений. Нативные приложения довольно дорогие, а не веб-приложения.
К счастью, есть решение
Этот вариант сочетает в себе внешний вид нативных приложений с технологией, используемой для Интернета: прогрессивное веб-приложение, также известное как PWA.
Что такое PWA?
Этот вид приложений создан на основе веб-технологий, таких как HTML, CSS, JavaScript. Мы легко можем превратить любой веб-сайт в PWA с минимальными усилиями. плюс может выполнять все встроенные функции приложения, такие как push-уведомления, автономная поддержка и т. д.
Как идентифицировать веб-сайты PWA?
Теперь Google Play Store и Apple App Store позволяют публиковать приложения pwa в своих магазинах. И когда мы используем веб-браузер, вы будете уведомлять, когда вы посещаете сайт, и появляется всплывающее окно «Добавить на главный экран», когда вы добавляете его. Он добавлен на главный экран и дает вам родной опыт работы с приложением.
Или вы можете добавить вручную, что браузер имеет встроенную опцию добавления на главный экран.
Если вы хотите узнать больше о PWA, перейдите по этой ссылке.
Давайте начнем
Что главное вам нужно для настройки действительного PWA
- Безопасное соединение (HTTPS)
- Service Worker (sw.js): это скрипт, который управляет сетевыми запросами для PWA.
- файл манифеста (manifest.json). Этот файл json определяет, как должно выглядеть и функционировать ваше PWA, например цвета, значок, описание имени.
Сначала, когда у вас есть образец веб-сайта, перейдите в этот каталог или загрузите базовый веб-сайт.
Чтобы превратить обычное веб-приложение в PWA, нужно выполнить два основных шага. добавление Mainfest и ServiceWorker.
Шаг 1
Давайте добавим mainfest.json в корень нашего сайта.
Сохраните файл и перейдите в наш index.htmlперед ‹/head›вставьте следующую ссылку
Это загрузит manifest.json и обнаружит веб-сайт браузера как приложение.
ПРИМЕЧАНИЕ. Вы должны зайти на сайт через локальный хост, иначе вы не сможете увидеть манифест, в моем случае я использую «python SimpleHTTPServer».
Перейдите на свой веб-сайт из браузера и откройте DevTool (в Chrome Ctrl+Shift+i) на вкладке «Приложение», вы увидите раздел манифеста.
Шаг 2
Регистрация ServiceWorker
Сервисный работник — это js, который поддерживает ресурсы кеша, когда ntwork находится в автономном режиме.
В корневом каталоге ящика приложения имя файла «sw.js» и «app.js» пока оставьте пустым.
откройте app.js и добавьте список событий ниже, чтобы зарегистрировать наш ServiceWorker
Совет: рекомендуется откладывать выполнение такого рода после первоначальной загрузки страницы.
Откройте свой sw.js и поместите приведенный ниже скрипт
после этого перезагрузите браузер и откройте раздел хранилища кеша в Devtool, чтобы убедиться, что все работает должным образом.
проверьте адресную строку браузера, вы увидите значок «установить».
Если вы нашли лучшее решение, мы можем помочь друг другу, поделившись как можно большим количеством ссылок.
Удачного кодирования! ❤
