Как заставить ваш сайт работать в автономном режиме

Итак, вы создали свой сайт. Будь то приложение React, приложение Vue или старый добрый HTML-сайт — молодцы. Вы должны гордиться им. Вспомните, как вы написали свою первую строчку кода, теперь у вас есть сайт. Он находится в Интернете, и другие люди могут его видеть.

Однако сайт работает только тогда, когда вы подключены к Интернету. Если ваши пользователи потеряют соединение, то вместо вашего прекрасного сайта они увидят хромированного динозавра.

Каково же ваше решение? Принимаете ли вы статус-кво? Возможен ли вообще автономный сайт?
Конечно, возможен! Прогрессивные веб-приложения (PWA) — вот ваше решение.

Что такое прогрессивные веб-приложения?

Прогрессивные веб-приложения — это веб-приложения, которые могут работать как родные приложения. Используя 2 файла, ваш сайт может иметь push-уведомления, автономный режим и стать загружаемым, как приложение. Эти два файла называются Service Worker и JSON-файл манифеста.

Рабочий сервис

Первый файл, который вам понадобится, это service worker, который представляет собой файл Javascript, являющийся мозгом PWA. Вам нужно будет зарегистрировать его, добавив тег script в ваш базовый HTML и добавив этот код.

    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/service-worker.js')
        .then(function(registration) {
          console.log('Service worker started');
        })
        .catch(function(error) {
          console.log('Service worker failed, error:', error);
        });
    }

Вход в полноэкранный режим Выход из полноэкранного режима

В отдельном файле service-worker.js вам понадобятся 2 блока кода.

self.addEventListener('install', (event) => {
    // run caching when installing service worker.
});

self.addEventListener('activate', (event) => {
  // After install and all active pages have been closed, this will run.
});
Вход в полноэкранный режим Выход из полноэкранного режима

Теперь у вас есть начальный код для вашего PWA. Просмотрите оставшийся код, чтобы добавить функциональность.

Manjest.json

Файл manifest.json похож на файл package.json в проекте node. Он содержит некоторую информацию о сайте, например, название, цвет фона и иконку. Полный список смотрите здесь на MDN. Этот файл определяет некоторые метаданные веб-приложения, например, какой будет иконка сайта при его загрузке.
Добавьте <link rel="manifest" href="/manifest.json"> в элемент head корневого HTML-файла, чтобы связать веб-сайт с ним, и добавьте свой значок в папку images.

{
    "short_name": "My Example PWA",
    "name": "Example PWA",
    "start_url": "/index.html",
    "background_color": "#1c5680",
    "display": "standalone",
    "theme_color": "#1c5680",
    "icons": [
       {
           "src": "/images/icon.png",
           "type": "image/png",
           "sizes": "128x128"
       }
     ]
}
Вход в полноэкранный режим Выход из полноэкранного режима

Создание автономной страницы

const custom_offline_page = "offline.html"

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('CacheName').then((cache) => {
      return cache.addAll([
        custom_offline_page
      ])
    })
  )
})

self.addEventListener("fetch", (event) => {
  event.respondWith(
    (async () => {
      try {
        // Fetch request from network
        const networkResponse = await fetch(event.request)
        return networkResponse
      } catch (error) {
        // Error thrown when a user has no internet connection
        const cache = await caches.open('CacheName')
        const cachedResponse = await cache.match(custom_offline_page)
        return cachedResponse
      }
    })()
  )
})
Вход в полноэкранный режим Выйдите из полноэкранного режима

Теперь у вас есть автономная страница.

Проверка работы

В chrome откройте dev tools и перейдите на вкладку маяка. Вы можете запустить аудит. Одна из галочек — PWA. Запустите аудит, и это выявит все проблемы, если они есть.

Вы также можете проверить вкладку application в dev tools, чтобы увидеть manifest json и убедиться, что service worker был успешно зарегистрирован.

Чтобы поблагодарить вас, вы могли бы угостить меня кофе?

Если у вас есть вопросы или проблемы, задавайте их в комментариях ниже. Я буду более чем счастлив помочь

Ресурсы:

  • https://developers.google.com/web/tools/workbox

  • https://www.google.com/amp/s/www.freecodecamp.org/news/build-a-pwa-from-scratch-with-html-css-and-javascript/amp/

  • https://web.dev/progressive-web-apps/

Оцените статью
Procodings.ru
Добавить комментарий