Делаем свой веб-сайт прогрессивным

stock photo from pexels

По версии Google Lighthouse мой сайт на 100% прогрессивен. Ваш может также. Для этого нужно сделать пару небольших шагов и всё,- мы у цели и можно двигаться к следующей.

Итак, что же нам потребуется? Потребуется https соединение, создать и зарегистрировать Service Worker, добавить manifest.json. Делается это просто, и если вы знакомы с JavaScript, труда это не составит.

Service Worker'ы потребуются нам для того чтобы браузер пользователя вашего сайта при первом заходе сохранял (кэшировал) в память все необходимые указанные вами данные (css, html, js, etc.). Использование этой технологии существенно ускорит загрузку страницы при повторном заходе на нее, а значит, и увеличит лояльность вашей аудитории.

При условии что все жизненноважные данные закэшированы, ServiceWorker способен поддерживать работу сайта и в оффлайне.

Часть 1: Service Worker

Начнем работу с того что зарегистрируем наш SW. Для этого идем и открываем html главной страницы вашего сайта. Перед закрывающимся тэгом body вставляем скрипт:

        
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('./serviceWorker.js')
    .then(registration => {
      // Регистрация прошла успешно
      console.log('SW registered with scope:');
      console.log('registration.scope');
    })
    .catch(err => {
      // Регистрация не удалась
      console.log('SW registration failed:');
      console.log(err);
    });
  });
}
      
      

Этот скрипт регистрирует расположенный по адресу './serviceWorker.js' воркер,- собственно, он и будет кэшировать и отдавать нужные нам файлы. Важно чтобы serviceWorker.js лежал в корне вашего сайта, так как все url на файлы статики будут брать начало от его директории.

Теперь можно приступить непосредственно к написанию самого воркера. Для этого создаем в корне проекта файл serviceWorker.js и инициируем в нём хранящуюю произвольное имя кэша переменную. В нашем случае кэш будет называться 'cache_v1':

            
let cache_v1 = 'cache_v1';
  

Чтобы наш SW приносил пользу, его нужно не только установить, но и указать ему какие файлы кэшировать.
(Все пути до статики заменяем на нужные нам)

          
self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(cache_v1)
    .then(cache => cache.addAll(
      [
        './index.html',
        './about.html',
        './krooshkin.html',
        './stories.html',
        './works.html',
        './favicon.png',
        './dist/bundle.js',
        './dist/style.css'    
      ]
    ))
  )
})
            
            

event.waitUntil() ждет момента завершения кэширования

caches.open() открывает кэш

cache.addAll() добавляет указанные нами файлы в кэш

Будьте внимательны: установка Service Worker'а пройдет успешно только в случае успешного кэширования.

Далее нам нужно прослушивать событие "fetch". Это событие триггерится каждый раз, когда браузер делает запрос на получение файлов. Мы сделаем проверку есть ли в кэше данные по этому запросу, и если данные есть, вернем их из кэша, а если нету, то возьмем их из интернета:

          
self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(matching => {
        return matching || fetch(event.request)
          .catch(err => `${err} нет сети`)
      })
    )
})
        
      

event.respondWith() принимает в качестве аргумента то, чем мы будем отвечать на запрос

caches.match(event.request) проверяет есть ли запрашиваемый ресурс в кэше


Часть 2: manifest.json

Самое сложное позади. Осталось чуть-чуть. Обещаю.

Теперь мы должны рассказать браузеру о нашем приложении. Сделать так чтобы его (приложение) можно было установить. (При этом Chrome на мобильном телефоне станет сам предлагать пользователю установить приложение на рабочий стол)

Для того, чтобы получить ожидаемый результат, создаем в корне нашего проекта файлик manifest.json, с примерно таким содержимым:

        
{
  "short_name": "Frontend",
  "name": "Frontend Blog",
  "icons": [
    {
      "src": "./src/icons/soyuz_apollo192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "./src/icons/soyuz_apollo512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/index.html",
  "display": "standalone",
  "theme_color": "#fafbfb",
  "background_color": "#fafbfb"
}

        
      

Указываем короткое и полное имя приложения, указываем пути до 2ух ваших иконок 192px и 512px, которые станут лого на рабочем столе и задаем урл с которого начинается приложение.

display: "standalone" будет запускать приложение без интерфейса браузера

theme_color определяет цвет фона статус бара

background_color определяет цвет фона приложения до его загрузки

Подключаем manifest.json сверху нашей страницы внутри тэга "<head>":
"<link rel="manifest" href="./manifest.json>"

Часть 3: Готово

Вот и всё.
Прикрепляю ссылки на код Service Worker'а и Manifest.json
Надеюсь статья получилась полезной.