Модуль Progressive Web Application (PWA) v2022-11-20

Что делает веб-приложение прогрессивным веб-приложением?

Прогрессивные веб-приложения представляют собой устанавливаемые приложения на настольных и мобильных устройствах, которые создаются и доставляются непосредственно через Интернет. Это быстрые и надежные веб-приложения. И самое главное, это веб-приложения, которые работают в любом браузере. Если вы создаете веб-приложение сегодня, вы уже на пути к созданию прогрессивного веб-приложения.
Быстро и надежно

Каждый веб-интерфейс должен быть быстрым, и это особенно верно для прогрессивных веб-приложений. Быстрота означает время, необходимое для отображения значимого контента на экране и обеспечения интерактивности.

И он должен быть надежно быстрым. Трудно достаточно подчеркнуть, насколько лучше надежная производительность. Подумайте об этом так: первая загрузка нативного приложения разочаровывает. Это закрыто магазином приложений и огромным количеством загрузок, но как только вы дойдете до точки, где приложение установлено, эта первоначальная стоимость амортизируется при всех запусках приложения, и ни один из этих запусков не имеет переменной задержки. Каждое приложение запускается так же быстро, как и предыдущее, без отклонений. Прогрессивное веб-приложение должно обеспечивать надежную работу, которую пользователи ожидают от любого установленного приложения.
Устанавливаемый

Прогрессивные веб-приложения могут работать на вкладке браузера, но их также можно установить. Добавление сайта в закладки просто добавляет ярлык, но установленное прогрессивное веб-приложение (PWA) выглядит и ведет себя так же, как и все другие установленные приложения. Он запускается из того же места, что и другие приложения. Вы можете управлять процессом запуска, включая настраиваемый экран-заставку, значки и многое другое. Он работает как приложение в окне приложения без адресной строки или другого пользовательского интерфейса браузера. Как и все другие установленные приложения, это приложение верхнего уровня в переключателе задач.

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

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

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

Используйте адаптивный дизайн, чтобы он работал на компьютере или мобильном устройстве.
Работайте быстро, используя сервис-воркер для предварительного кэширования ресурсов приложения (HTML, CSS, JavaScript, изображений), необходимых для запуска, и для кэширования данных о погоде во время выполнения для повышения производительности.
Быть устанавливаемым, используя манифест веб-приложения и событие beforeinstallprompt, чтобы уведомить пользователя о возможности установки.



Загрузить через установщик расширений
Обновить модификации
Добавить разрешения на изменение настроек для группы пользователей admin
Перейдите в раздел Расширения -> Аналитика -> Прогрессивное веб-приложение OpenCart.
Выберите настройки и сохраните

ПРЕДУПРЕЖДЕНИЕ
Требуется SSL!
Если в вашем магазине используется модуль SEO, исключите переписывание URL-адресов SEO для URL-адреса Service Worker — /index.php?route=extension/analytics/progressive_web_application/service_worker.

Нажмите для раскрытия...

Запрос Origin должен исходить от https-адреса исходного магазина, поэтому требуется SSL, а URL-адрес ServiceWorker должен быть оригинальным, а не исправленным или переписанным с помощью SEO!

Протестируйте свое приложение здесь -
Преобразуйте свое приложение, а затем загрузите его в репозитории смартфонов — AppStore, Google Play, Samsung Galaxy Store и т. д. —