1. Что такое PWA

Я считаю, что в последнее время многие люди говорят о PWA, потому что его преимущества, которые PWA приносит пользователям, очень велики, во-первых, нам нужно понять, что такое PWA. По сути, PWA - это не что-то вроде фреймворков вроде Vuejs или Angular, React. Это просто стандарт, когда Интернет выглядит как мобильное приложение, и поддержка для установки веб-приложения на мобильное устройство. Вам не нужно кодировать или изучать какие-либо новые языки, просто чтобы изменить свой веб-сайт, чтобы он выглядел как приложение, которое пользователи могут установить на свой мобильный телефон и предоставить функцию ОФЛАЙН.

Если погуглить, то увидим, что такое PWA



Прогрессивные веб-приложения | Интернет | Разработчики Google
Изменить описание developers.google.com



В этой статье вы познакомитесь с PWA, чтобы создать PWA, который должен соответствовать этим требованиям.

  1. веб-домен должен быть https
  2. иметь файл манифеста, в котором будет храниться некоторая информация, например
  • значки, которые будут отображаться, когда пользователь установит Интернет на свой телефон
  • start_url: когда пользователь запускает приложение, запускается первая страница

3. Сервисный работник (вы можете пропустить этот случай, позвольте проверить позже, когда мы сделаем это в практическом случае)



Работники сферы обслуживания: введение | Основы Интернета | Разработчики Google
Богатые возможности работы в автономном режиме, периодическая фоновая синхронизация, push-уведомления, mdash; функциональность, которая обычно… developers.google.com



Есть некоторые требования, такие как скорость, нет поддержки javascript, но я хотел бы порекомендовать использовать Light House, это инструмент разработчика на Chrome, чтобы проверить, соответствует ли ваш веб-сайт требованиям PWA или нет.



Маяк | Инструменты для веб-разработчиков | Разработчики Google
Lighthouse - это автоматизированный инструмент с открытым исходным кодом для улучшения качества веб-страниц. Вы можете запустить его в любом Интернете… developers.google.com



2. Как собрать PWA

Я рекомендую вам пройти через это руководство, чтобы понять, как создать PWA, потому что это так просто и официально от Google. Единственное, что вам нужно, это установить узел и клонировать исходный код и следовать инструкциям :)



Ваше первое прогрессивное веб-приложение
Последнее обновление: 30 апреля 2019 г. .developers.google.com



Вот мой код в GitHub, я просто следую руководству.



thanhtungka91 / pwa
Это файлы ресурсов, необходимые для кодовой лаборатории" Ваше первое прогрессивное веб-приложение ". В этой лаборатории вы создадите… github.com



Просто клонируйте приложение и запустите команду

git clone https://github.com/thanhtungka91/pwa.git
node server.js

Теперь мы видим, что офлайн-страница работает идеально, просто откройте вкладку «Приложение», перейдите в офлайн-режим и посмотрите результат. Вы можете открыть маяк, чтобы увидеть результат.

Идея здесь: вы создали service-worker.js в общедоступном каталоге, импортируете его в Интернет и позволили браузеру обрабатывать его в автономном режиме и управлять кешем.

3. Следующий шаг

Если вы прошли все эти руководства, я думаю, что вы сможете понять, что такое PWA, и теперь вы можете перейти к следующему шагу по использованию рабочего окна для управления кешем.

Самая сложная часть в PWA - это эффективное управление кешем и обеспечение максимального удобства для пользователей. Все может быть реализовано в service-worker.js, но если вы хотите, чтобы что-то упростило нашу разработку, давайте попробуем workbox.



Рабочий ящик | Разработчики Google
Workbox - это набор библиотек сервис-воркеров, которые упрощают создание прогрессивных веб-приложений. developers.google.com



4. Создайте приложение TWA.

Теперь пользователь может установить ваш веб-сайт на android / ios в качестве приложения, но как вы можете отслеживать пользователей? Можем ли мы поставить эту сеть в качестве приложения в Google Play? К счастью, Google предоставил возможность использовать TWA, что намного проще для веб-разработчика, который может загрузить свое приложение в Google Play без разработчика Android, просто поместите всю свою сеть в приложение и загрузите в хранилище и готово :) это так проще правильно?



Использование надежных веб-действий | Интернет | Разработчики Google
Надежные веб-действия - это новый способ интеграции содержания вашего веб-приложения, такого как PWA, с приложением Android с помощью… developers.google.com



5. Ссылки

PWA поддерживает iOS 12.2



Что нового в iOS 12.2 для прогрессивных веб-приложений
Спустя год после первой первоначальной поддержки PWA на iOS, Apple выпустила iOS 12.2 для iPhone и iPad с… medium.com