🚀 Веб-разработка с нуля: Урок 15 - Превращаем To-Do List в PWA

Привет, будущие PWA-разработчики! 👨💻👩💻
Сегодня сделаем наш To-Do List полноценным Progressive Web App, который будет работать даже оффлайн!

🔥 Что нового узнаем:
1. Что такое PWA и его основные компоненты
2. Создание manifest.json
3. Работу с Service Worker

📱 Основные характеристики PWA:
✓ Работает оффлайн
✓ Устанавливается на устройство
✓ Быстрая загрузка

💻 Практика: преобразуем приложение

1. Создаем manifest.json:

{
  "name": "Мой To-Do List",
  "short_name": "ToDo",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#007bff",
  "icons": [
    {
      "src": "icon-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "icon-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ]
}

2. Добавляем в head HTML:

<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#007bff">

3. Создаем sw.js (Service Worker):

const CACHE_NAME = 'todo-v1';
const ASSETS = [
  '/',
  '/index.html',
  '/styles.css',
  '/script.js',
  '/icon-192.png',
  '/icon-512.png'
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(ASSETS))
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
  );
});

4. Регистрируем Service Worker в script.js:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(registration => {
        console.log('ServiceWorker зарегистрирован');
      })
      .catch(err => {
        console.log('Ошибка регистрации:', err);
      });
  });
}

🔧 Что мы добавили:
✅ Манифест для установки приложения
✅ Иконки для разных устройств
✅ Service Worker для оффлайн-работы
✅ Кеширование основных ресурсов

💡 Профессиональные советы:
1. Для генерации иконок используйте https://www.pwabuilder.com/imageGenerator
2. Добавьте splash screen:

// В manifest.json
"splash_pages": null

3. Оптимизируйте кеширование:

// В sw.js
const ASSETS = [
  '/',
  '/index.html',
  '/styles.css',
  '/script.js',
  '/icon-192.png',
  '/icon-512.png'
];

👉 В следующем уроке:
Добавим синхронизацию между устройствами через Firebase!

Подписывайтесь: [t.me/rm_programmer](https://t.me/rm_programmer)
Пробовали ли вы уже PWA? Делитесь в комментариях! 💬

#вебразработка #PWA #javascript #ServiceWorker #программирование