Прогрессивные веб -приложения – это опыт пользователей, которые имеют охват Интернета, и есть:
Надежный – Загрузите мгновенно и никогда не показывайте девавр, даже в неопределенных условиях сети.
Быстро – Быстро ответьте на взаимодействие с пользователями с шелковистыми плавными анимациями и без казней прокрутки.
Вовлечение – Почувствуйте себя естественным приложением на устройстве с захватывающим пользовательским опытом.
Этот новый уровень качества позволяет прогрессивным веб -приложениям зарабатывать место на домашнем экране пользователя.
Manifest – это простой файл JSON, который рассказывает браузере о вашем веб -приложении и о том, как он должен вести себя при «установленном» на мобильном устройстве или на рабочем столе пользователя. Наличие манифеста требуется Chrome, чтобы показать подсказку «Добавить на домашний экран».
Типичный манифестный файл включает в себя информацию о имени приложения, значках, которые он должен использовать, start_url, с которой он должен начинать при запуске, и многое другое.
{
"name": "K IRSHAD ALI",
"short_name": "ALI",
"icons": [
{
"src": "img/logo.png",
"sizes": "92x92",
"type": "image/png"
},
{
"src": "/img/logo.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "img/logo.png",
"sizes": "152x152",
"type": "image/png"
}
],
"start_url": "/",
"display": "standalone",
"orientation": "portrait",
"background_color": "#f0f2f5",
"theme_color": "#96f2d7"
}
А также подключите его в своем index.html для работы.
Сервисный работник – это фоновый скрипт, который браузер может запускать, пока пользователя нет на странице. Это элемент, который дает автономную поддержку и становится активным, когда уведомление нажимается.
Создайте обслуживающий работник (создайте файл с именем SW.JS),
Скопируйте этот код в SW.JS Анкет
/** Пустой работник службы! */ self.addeventListener (‘fetch’, function (event) { });
Вот и все.
Вам придется зарегистрировать код в коде вашего сайта, для этого откройте свой App.js Подайте и вставьте это сейчас,
navigator.serviceworker && navigator.serviceworker.register (‘sw.js’). Затем (функция (регистрация) { });
Код будет выполняться на каждой загрузке страницы. Проверьте, правильно ли он работает, перезагрузив страницу, а затем проверить-Chrome://ServiceWorker-Internals/
Теперь ваш веб -сайт сможет предложить пользователям установить его на домашних экранах, а во -вторых, вы сможете сделать ваш сайт способным поддерживать Push -уведомления и даже работать в автономном режиме.
Первым шагом было бы открыть сценарий SW.JS и получить объект CACHES. Как только вы это получите, обновите код и приложение весь веб -сайт к кешу.
Попробуйте, как это работает сейчас. Удалите нынешнее приложение и загрузите его на Chrome. Затем обновите страницу и выберите «Добавить на домашний экран» в правом угловом меню.
Для соблюдения правила, что при изменении сервисного работника, страница должна перезагрузить и переустановить его, все, что вам нужно сделать, это добавить компонент, который имеет «версию» работника службы. Когда это меняется, движение установки снова происходит, кэшируя ресурсы, которые изменились бы.
Поздравляем, теперь вы знаете, как превратить веб-сайт в прогрессивное веб-приложение, и если вы выполнили шаги бок о бок, вы теперь даже перенесли свой веб-сайт в прогрессивное веб-приложение!
While these steps will give you, the developer, an exact idea of how you will have to fill in the blanks and move from Point A in the process to Point C, if you are reading this as an enthusiastic entrepreneur who wishes to take charge of the migration, I would say, don't do it without a person who excels in knowing how to turn website into progressive Web App.
Хотя эти шаги объясняют, существует ряд элементов, которые появляются как часть процесса, когда вы сидите с фактическим процессом разработки. Таким образом, вместо того, чтобы попробовать свои руки с помощью шагов и найти другой результат, потому что вы не были уверены в элементах между линией, дайте работу экспертам Progressive Web Apps, которые специализируются на домене.
https://developers.google.com/web/progressive-web-apps
Иршад Али
Посетите меня: https://irshadali.site
Оригинал: “https://dev.to/phonerefer/convert-any-static-website-to-pwa-3fkb”