PWA – это своего рода приложение, устанавливаемое из браузера, которое может предоставить дополнительные функции, основанные на возможностях используемого устройства: сайт может работать автономно оффлайн, делать push-уведомления и выглядеть и работать почти так же быстро, как и отдельное приложение.
Разработчики имеют возможность создавать практически первоклассные приложения с использованием веб-технологий, что всегда значительно проще и дешевле в обслуживании, чем создание собственных приложений. Особенное преимущество PWA – кроссплатформенность. Также одним из преимуществ можно выделить отсутвие необходимости готовое приложение регистрировать в маркетах приложений (таких как Google Play Маркет и App Store), так как приложение устанавливается на телефоне прямо из браузера).
Таким образом PWA – это веб-сайт, который разработан с использованием технологий, что делают опыт взаимодействия с контентом сайта на мобильных устройствах намного приятнее, чем с обычным сайтом, оптимизированном под мобильные устройства. В то же время PWA работает почти как нативное приложение, так как обладает следующими функциями:
– Работа в оффлайне
– Быстрая загрузка
– Работа по защищенному протоколу
– Умеет в push-уведомления
-Может выглядеть как полноценное приложение без строки адреса в браузере
Если это Вордпресс, не морочим голову ставим плагин https://wordpress.org/plugins/super-progressive-web-apps/
В исхоДном коде WP подсматриваем как выглядит идеальный manifest
- Иначе по инструкции:
– Переносим в корень проекта sw.js (берем тут https://github.com/nofikoff/progressive_web_app)
– Режем иконки с помощью сервиса https://www.favicon-generator.org/ подключаем их в head проекта. (не забудь 512х512)
– Создаем манифест, подключаем его в head проекта <link rel=”manifest” href=”/manifest.json”>
– В head проекта указываем
<script> if (navigator.serviceWorker.controller) { console.log('[PWA Builder] active service worker found, no need to register') } else { navigator.serviceWorker.register('sw.js', { scope: './' }).then(function(reg) { console.log('Service worker has been registered for scope:'+ reg.scope); }); } </script>
Тестируем PWA через
– Хром / аудит
– https://www.pwabuilder.com/ здесь тюнинг и дополнительные фичи