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

Результаты внедрения PWA на сайте

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

Содержание:

Не забудьте оценить статью в самом конце, если вам всё понравилось! Мне будет очень приятно.

Что такое PWA

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

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

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

Зачем нужно PWA

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

Как сделать 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">

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

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

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

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

Примеры PWA

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

Пример установки PWA из браузера

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

Пример установленного на компьютер PWA

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

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

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

+25

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

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

На чём работает этот сайт
Об авторе Логотип Империи Elite Dangerous - Изображение в BASE64