Головна » Розробка » Розробка прогресивних веб-додатків (PWA): крок за кроком

Розробка прогресивних веб-додатків (PWA): крок за кроком

PWA

Сьогодні користувачі хочуть, щоб веб-додатки працювали так само швидко та надійно, як нативні. Саме тут на сцену виходять прогресивні веб-додатки (Progressive Web Apps, PWA) — рішення, яке об’єднує найкраще від вебу та мобільних додатків. У цій статті ми розглянемо, що таке PWA, і крок за кроком навчимося створювати власний прогресивний веб-додаток.

Що таке PWA?

PWA — це веб-додаток, який виглядає і працює як нативний додаток. Користувач може додати його на головний екран, працювати з ним офлайн і отримувати push-сповіщення.

Основні характеристики PWA:

  1. Прогресивність: PWA працює на будь-якому пристрої, який підтримує сучасні браузери.
  2. Офлайн-режим: Завдяки Service Workers PWA може працювати навіть без інтернету.
  3. Швидкість: PWA завантажується швидше, ніж звичайні веб-сайти.
  4. Нативний досвід: Додаток виглядає та працює як мобільний, включаючи можливість встановлення на головний екран.

Крок 1: Створіть структуру проєкту

Для початку створимо простий веб-додаток. Припустимо, що ви використовуєте базовий стек: HTML, CSS, і JavaScript. Створіть основні файли:

/my-pwa
  /css
    styles.css
  /js
    app.js
  index.html

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Мій PWA</title>
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>
<h1>Ласкаво просимо до PWA!</h1>
<script src="/js/app.js"></script>
</body>
</html>

Крок 2: Додайте файл маніфесту

Файл Web App Manifest надає браузеру інформацію про ваш додаток (назва, іконки, кольори тощо). Створіть файл manifest.json у кореневій директорії:

{
  "name": "Мій PWA",
  "short_name": "PWA",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0000ff",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Додайте посилання на маніфест у index.html:

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

Крок 3: Реалізуйте Service Worker

Service Worker — це скрипт, який виконується у фоновому режимі та забезпечує офлайн-роботу, кешування і push-сповіщення.

Створіть Service Worker:

Створіть файл /sw.js у кореневій директорії:

const CACHE_NAME = 'pwa-cache-v1';
const urlsToCache = [
  '/',
  '/css/styles.css',
  '/js/app.js',
  '/manifest.json'
];

// Встановлення Service Worker
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME).then((cache) => {
      console.log('Кешування файлів');
      return cache.addAll(urlsToCache);
    })
  );
});

// Перехоплення запитів
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    })
  );
});

// Оновлення Service Worker
self.addEventListener('activate', (event) => {
  const cacheWhitelist = [CACHE_NAME];
  event.waitUntil(
    caches.keys().then((cacheNames) => {
      return Promise.all(
        cacheNames.map((cacheName) => {
          if (!cacheWhitelist.includes(cacheName)) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

Крок 4: Зареєструйте Service Worker

У файлі app.js зареєструйте ваш Service Worker:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then((registration) => {
      console.log('Service Worker зареєстровано:', registration);
    })
    .catch((error) => {
      console.error('Помилка реєстрації Service Worker:', error);
    });
}

Крок 5: Додайте іконки

Створіть директорію /icons і додайте іконки у форматах 192×192 і 512×512. Це необхідно для того, щоб додаток міг бути доданий на головний екран.

Крок 6: Тестуйте ваш PWA

  1. Встановлення PWA:
    Відкрийте ваш додаток у Chrome, перейдіть до “Додати на головний екран”. Ви побачите, що додаток поводиться як нативний.
  2. Тест офлайн-режиму:
    Відключіть інтернет і переконайтеся, що PWA працює завдяки кешованим файлам.

Переваги PWA

  1. Швидкість та продуктивність: Завантажується миттєво завдяки кешуванню.
  2. Офлайн-доступ: Користувачі можуть працювати навіть без інтернету.
  3. Зручність: Легко встановлюється на пристрої без потреби у магазинах додатків.
  4. Економія ресурсів: Розробка дешевша і простіша порівняно з нативними додатками.

Висновок

Прогресивні веб-додатки — це сучасний підхід до створення веб-додатків, який дозволяє поєднати переваги вебу та мобільних додатків. Дотримуючись цього гайда, ви зможете створити PWA, що підвищить зручність користувачів і продуктивність вашого додатка.

Тож, якщо ви хочете створити щось зручне, швидке та сучасне — спробуйте PWA!