Одной из тем обсуждения последних двух лет является Progressive Web Apps. Представители Google активно рекламируют свою разработку и продвигают идеи в массы, а Андрей Липатцев даже приезжал в Минск (и не только) для того чтобы рассказать нам о технологии PWA и её возможностях.
Содержание:
PWA - это своего рода приложение, устанавливаемое из браузера, которое может предоставить дополнительные функции, основанные на возможностях используемого устройства: сайт может работать автономно оффлайн, делать push-уведомления и выглядеть и работать почти так же быстро, как и отдельное приложение.
Разработчики имеют возможность создавать практически первоклассные приложения с использованием веб-технологий, что всегда значительно проще и дешевле в обслуживании, чем создание собственных приложений. Особенное преимущество PWA - кроссплатформенность. Также одним из преимуществ можно выделить отсутвие необходимости готовое приложение регистрировать в маркетах приложений (таких как Google Play Маркет и App Store), так как приложение устанавливается на телефоне прямо из браузера).
Таким образом PWA - это веб-сайт, который разработан с использованием технологий, что делают опыт взаимодействия с контентом сайта на мобильных устройствах намного приятнее, чем с обычным сайтом, оптимизированном под мобильные устройства. В то же время PWA работает почти как нативное приложение, так как обладает следующими функциями:
Ниже я расскажу как сделать PWA на сайте за 15 минут или даже быстрее.
В большинстве случаев можно будет использовать инструмент для поэтапного создания частей PWA: pwabuilder.
Часть определения Progressive Web App заключается в том, что оно должно работать в автономном режиме.
Поскольку компонент, позволяющий веб-приложению работать в автономном режиме, - это Service Worker, это означает, что Service Worker является обязательной частью PWA.
Service Worker - это JavaScript-файл, который выполняет роль посредника между веб-приложением и интернетом. Благодаря этому он может кешировать и ускорять рендеринг приложения, а также улучшать пользовательский интерфейс.
Из соображений безопасности только HTTPS-сайты могут использовать Service Workers, и это одна из причин, по которым Progressive Web App можно и нужно устанавливать только на домены с HTTPS.
Service Worker отсутствует на устройстве при первом посещении пользователем. При первом посещении сайта Service Worker устанавливается в браузере, а затем, при последующих посещениях отдельных страниц сайта, этот Service Worker будет запускаться браузером автоматически.
Service Worker устанавливается в два этапа:
В коде всех страниц сайта необходимо указать для браузера, что у нас есть свой Service Worker по отдельному адресу. В шаблон страниц вставляется простой JavaScript код, пример:
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); }); }
Обратите внимание! В примере выше в четвёртой строке указано название файла - sw.js. Это значит, что файл, в котором будет расположен код нашего Service Worker должен называться именно так. В противном случае браузер так и не найдёт нужный нам функционал.
В отдельном файле на сервере (например, как у меня - sw.js) необходимо разместить следующий код:
self.addEventListener('install', function(event) { var indexPage = new Request('index.html'); event.waitUntil( fetch(indexPage).then(function(response) { return caches.open('pwabuilder-offline').then(function(cache) { console.log('[PWA Builder] Cached index page during Install'+ response.url); return cache.put(indexPage, response); }); })); }); self.addEventListener('fetch', function(event) { var updateCache = function(request){ return caches.open('pwabuilder-offline').then(function (cache) { return fetch(request).then(function (response) { console.log('[PWA Builder] add page to offline'+response.url) return cache.put(request, response); }); }); }; event.waitUntil(updateCache(event.request)); event.respondWith( fetch(event.request).catch(function(error) { console.log( '[PWA Builder] Network request Failed. Serving content from cache: ' + error ); return caches.open('pwabuilder-offline').then(function (cache) { return cache.match(event.request).then(function (matching) { var report = !matching || matching.status == 404?Promise.reject('no-match'): matching; return report }); }); }) ); })
Это и есть наш Service Worker, что будет делать всю работу. Существует несколько примеров работы Service Worker, доступных в конструкторе pwabuilder. Подбирайте на свой вкус.
Обращаю внимание, что код JS, используемый на моём сайте немного визуально отличается от того, что в примерах этой статьи. В руководстве по оптимизации скорости загрузки сайта я описывал минификацию JS. Для всех JS-скриптов на сайте я старался провести минификацию. Это полностью рабочие файлы и ими можно пользоваться.
Манифест приложения или App Manifest - это файл JSON, в котором необходимо предоставить "справочную" информацию о строении и цели вашего Progressive Web App.
Ссылку на манифест необходимо включать во все заголовки страниц вашего сайта:
<link rel="manifest" href="manifest.json">
Этот файл расскажет устройству, как установить:
Пример содержимого файла manifest.json:
{
"dir": "ltr",
"lang": "Russian",
"name": "Александр Штеркель - заметки о SEO",
"scope": "/",
"display": "standalone",
"start_url": "https://shterkel.com/",
"short_name": "SEO",
"description": "Мои заметки по оптимизации сайта для результативного SEO. Тематические посты для сеошников, подробные инструкции. ¯\\_(ツ)_/¯",
"orientation": "any",
"background_color": "#fafafa",
"theme_color": "#fafafa",
"related_applications": [],
"prefer_related_applications": false,
"icons": [
{
"src": "/images/icons/apple-touch-icon.png",
"type": "image/png",
"sizes": "57x57"
},
{
"src": "/images/icons/android-icon-48x48.png",
"sizes": "48x48",
"type": "image/png"
}
]
}
Обратите внимание! В примере выше я убрал большую часть ссылок на иконки разных размеров для экономии места. В JSON манифесте необходимо указать как можно больше ссылок и размеров.
Для составления манифеста используйте генератор манифеста для сайта.
Не только по результатам проделанной работы, но и во время нужно всегда тестировать свои доработки. Для тестирования PWA на своём сайте можно использовать Google Lighthouse с подключенным отдельно отчётом - Progressive Web Apps:
Отчёты Google Lighthouse покажут все ошибки и как их исправить.
Ура, теперь на сайте есть PWA!
Биржа фрилансеров FREELANCEHUNT.COM
Серпстат один из немногих сервисов в SEO, который вызывает доверие и доказывает свою прогрессивность реализацией у себя новых технологий. Рассмотрим на этом примере как браузер сам предлагает установку приложения в вашу систему:
И после этого вы можете его открывать как отдельное приложение на своём компьютере:
Хороший курс по PWA можно посмотреть на канале TheNetNinja:
Оцените статью:
Опубликовано: 15.12.18
Изменено: 15.09.20
Написал: Александр Штеркель
Зацените и другие статьи:
Рассказываю какими инструментами пользуюсь и на что обращаю внимание при ускорении сайта. Приведу реальные примеры и покажу результаты оптимизации скорости сайта.
В этом руководстве будем настраивать наш MODx таким образом, чтобы он соответствовал минимальным требованиям SEO.