Как сделать PWA на сайте за 15 минут

Одной из тем обсуждения последних двух лет является Progressive Web Apps. Представители Google активно рекламируют свою разработку и продвигают идеи в массы, а Андрей Липатцев даже приезжал в Минск (и не только) для того чтобы рассказать нам о технологии PWA и её возможностях.

Содержание:

• Что такое PWA
• Зачем нужно PWA
• Главные принципы PWA
• Как сделать PWA из своего сайта
  • Настройка Service Worker
  • Настройка Manifest.json
• Отладка и тестирование PWA
• Примеры PWA
• Где можно научиться делать PWA?
  

Что такое PWA

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

Разработчики имеют возможность создавать практически первоклассные приложения с использованием веб-технологий, что всегда значительно проще и дешевле в обслуживании, чем создание собственных приложений. Особенное преимущество PWA - кроссплатформенность. Также одним из преимуществ можно выделить отсутвие необходимости готовое приложение регистрировать в маркетах приложений (таких как Google Play Маркет и App Store), так как приложение устанавливается на телефоне прямо из браузера).

Таким образом PWA - это веб-сайт, который разработан с использованием технологий, что делают опыт взаимодействия с контентом сайта на мобильных устройствах намного приятнее, чем с обычным сайтом, оптимизированном под мобильные устройства. В то же время PWA работает почти как нативное приложение, так как обладает следующими функциями:

• Работа в оффлайне
• Быстрая загрузка
• Работа по защищенному протоколу
• Умеет в push-уведомления
• Может выглядеть как полноценное приложение без строки адреса в браузере (например, как этот крайне красивый сайт)

Зачем нужно PWA

• PWA легче. Отдельные приложения из магазина могут весить 200 МБ или более, в то время как PWA может находиться в диапазоне КБ.
• Снизить стоимость привлечения пользователя (гораздо сложнее убедить пользователя установить приложение, чем посетить сайт)
• Для создания и выпуска обновлений требуется значительно меньше усилий
• Гораздо больше возможностей с URL, чем в обычных приложениях из магазинов приложений (можно делить ссылками прямом на якоря на сайте - в мобильных приложенииях так нельзя)

Главные принципы PWA

• Адаптивность: интерфейс адаптируется к размеру экрана устройства
• Похоже на приложение: PWA не похоже на веб-сайт, а скорее на приложение
• Автономность: PWA будет использовать хранилище устройства для кеширования самого себя, с возможностью работать офлайн
• Устанавливается: браузер устройства предлагает пользователю установить ваше приложение на рабочий экран устройства
• Повторное привлечение аудитории: push-уведомления помогают возвращать часть пользователей на сайт после первого взаимодействия
• Доступно для индексации: поисковые системы и хорошая SEO-оптимизация дают возможность сайту-приложению ранжироваться в поиске
• Почти всегда свежие данные: приложение обновляет себя и свой контент, когда подключается к сети
• Использует HTTPS (типа безопасно и всё такое)
• Прогрессивность: будет работать на любых устройствах, даже старых, даже с меньшим количеством возможностей (например, просто как сайт, не устанавливаемый)
• Использует обычные URL: поэтому легко делиться с кем-то информацией путём обычных урлов. 

Как сделать PWA из своего сайта

Ниже я расскажу как сделать PWA на сайте за 15 минут или даже быстрее.

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

Настройка Service Worker

Часть определения 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 должен называться именно так. В противном случае браузер так и не найдёт нужный нам функционал.

Создание файла с 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-скриптов на сайте я старался провести минификацию. Это полностью рабочие файлы и ими можно пользоваться.

Настройка Manifest.json

Манифест приложения или App Manifest - это файл JSON, в котором необходимо предоставить "справочную" информацию о строении и цели вашего Progressive Web App.

Ссылку на манифест необходимо включать во все заголовки страниц вашего сайта:

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

Этот файл расскажет устройству, как установить:

• Название и краткое название приложения
• URL-адреса иконок разных размеров
• Адрес домена
• Ориентацию экрана по умолчанию
• Заставка

Пример содержимого файла 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

Не только по результатам проделанной работы, но и во время нужно всегда тестировать свои доработки. Для тестирования PWA на своём сайте можно использовать Google Lighthouse с подключенным отдельно отчётом - Progressive Web Apps:

Отчёты Google Lighthouse покажут все ошибки и как их исправить.

Ура, теперь на сайте есть PWA!

Где заказать разработку PWA

Биржа фрилансеров KWORK

Биржа фрилансеров FREELANCEHUNT.COM

Примеры PWA

• Веб-версия Telegram;
• Financial Times как пример большого контентного проекта с PWA;
• Guitar Tuner для музыкантов. Отличная и простая замена GuitarTuna :D
• Serpstat.com - хороший пример того, как можно из SAAS-инструмента сделать PWA. 

Серпстат один из немногих сервисов в SEO, который вызывает доверие и доказывает свою прогрессивность реализацией у себя новых технологий. Рассмотрим на этом примере как браузер сам предлагает установку приложения в вашу систему:

И после этого вы можете его открывать как отдельное приложение на своём компьютере:

Где можно научиться делать PWA?

Хороший курс по PWA можно посмотреть на канале TheNetNinja:

Оцените статью:

Опубликовано: 15.12.18
Изменено: 15.09.20

Написал: Александр Штеркель

Как сделать PWA на сайте за 15 минут Как сделать PWA на сайте за 15 минут - пошаговая инструкция по настройке Progressive Web Apps

Зацените и другие статьи: