Progressive Web Apps для сайта

Progressive Web Apps или прогрессивное веб-приложение (англ. progressive web app) — гибрид сайта и приложения для мобильных устройств, простыми словами: это вэб-сайт, который построенный с использованием веб-технологий, но который взаимодействует с пользователем как приложение.

Для начала нужно создать иконку для сайта. С сегодняшними возможностями это не составит труда, например, можно воспользоваться сайтами thenounproject.com или www.ucraft.ru

Когда у Вас есть иконка сайта, нужно HTML кодом прикрепить её к сайту. Можно воспользоватся генератором: www.favicon-generator.org

Получим что-то типа этого:

<link rel="apple-touch-icon" sizes="57x57" href="/themes/img/ico/logo.png">
<link rel="apple-touch-icon" sizes="60x60" href="/themes/img/ico/logo.png">
<link rel="apple-touch-icon" sizes="72x72" href="/themes/img/ico/logo.png">
<link rel="apple-touch-icon" sizes="76x76" href="/themes/img/ico/logo.png">
<link rel="apple-touch-icon" sizes="114x114" href="/themes/img/ico/logo.png">
<link rel="apple-touch-icon" sizes="120x120" href="/themes/img/ico/logo.png">
<link rel="apple-touch-icon" sizes="144x144" href="/themes/img/ico/logo.png">
<link rel="apple-touch-icon" sizes="152x152" href="/themes/img/ico/logo.png">
<link rel="apple-touch-icon" sizes="180x180" href="/themes/img/ico/logo.png">
<link rel="icon" type="image/png" sizes="192x192" href="/themes/img/ico/logo.png">
<link rel="icon" type="image/png" sizes="32x32" href="/themes/img/ico/logo.png">
<link rel="icon" type="image/png" sizes="96x96" href="/themes/img/ico/logo.png">
<link rel="icon" type="image/png" sizes="16x16" href="/themes/img/ico/logo.png">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/themes/img/ico/logo.png">
<meta name="theme-color" content="#ffffff">

Далее нужно прописать манифест, это такой файл, который содержит данные о сайте. Выглядит он следующим образом:

{
"name": "Web SITE",
"short_name": "Web NAME",
"description": "Web PAGE",
"lang": "en-EN",
"start_url": "/",
"display": "standalone",
"theme_color": "#FFFFFF",
"background_color": "#FFFFFF",

"icons": [
{
"src":"\/icons/logo-512.png",
"sizes": "512x512",
"type": "image\/png"
},
{
"src": "\/icons/icon-36x36.png",
"sizes": "36x36",
"type": "image\/png",
"density": "0.75"
},
{
"src": "\/icons/icon-48x48.png",
"sizes": "48x48",
"type": "image\/png",
"density": "1.0"
},
{
"src": "\/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image\/png",
"density": "1.5"
},
{
"src": "\/icons/icon-96x96.png",
"sizes": "96x96",
"type": "image\/png",
"density": "2.0"
},
{
"src": "\/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image\/png",
"density": "3.0"
},
{
"src": "\/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image\/png",
"density": "4.0"
}
]
}

Создайте его в корне Вашего сайта, пропишите пути к иконкам и подключите к сайту с помощью кода межу тегами HEAD:

<link rel="manifest" href="/manifest.json">

Теперь нужно создать несколько файлов, чтобы подключить service worker, так как это одно из требований технологии PWA.

Создаём файл в корне под названием sw-toolbox.js и добавляем туда следующий код: ССЫЛКА

Создаём файл sw.js и записываем в него следующее:

'use strict';
importScripts('sw-toolbox.js');
toolbox.precache(["index.html","style/style.css"]);
toolbox.router.get('/images/*', toolbox.cacheFirst);
toolbox.router.get('/*', toolbox.networkFirst, {
networkTimeoutSeconds: 5
});

Проверьте, чтобы все пути к папке с изображениями, стилями были правильные!

Теперь подключаем наши файлы следующим кодом между тегами HEAD:

<script>
if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/sw.js').then(function(registration) {
      // Registration was successful
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, function(err) {
      // registration failed :(
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}
</script>

Проверяем наш сайт открыв страницу в браузере. В адресной строке должен появится знак «+», а это значит что подключенная технология работает:

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

Стоит отметить, что для самой популярной в мире CMS WordPress уже существует плагин, который довольно хорошо работает и подключает данную технологию: PWA for WP & AMP

Оставьте ответ