🆓 FREE PROJECT

🔔 Урок 7: Таксі прибуло!

📱 Сидиш, чекаєш таксі, гортаєш TikTok...

Раптом — PUSH! "🚖 Водій на місці!"

🔔 Notification API — показує сповіщення навіть коли вкладка неактивна!

🔐 Permission — спочатку питає дозвіл у користувача

Сьогодні створюємо СПРАВЖНІ сповіщення! 🔔

💡

А ТИ ЗНАВ?

🔔 Push-сповіщення збільшують залученість на 88%!
📱 Uber та Bolt надсилають мільйони сповіщень щодня
⚠️ Але спам сповіщеннями — найшвидший спосіб втратити користувача!

😂 Жарт для розігріву!

Чому користувач заблокував сповіщення від сайту?

Бо сайт питав "Увімкнути сповіщення?" ще до того, як він встиг прочитати заголовок! 🔔🚫

📱 ЖИВИЙ ДОДАТОК

Спробуй сповіщення!

9:41 🔋 100%

🚖

Koodi Taxi

зараз

🚖 Водій прибув!

Олександр чекає на вас. Білий Peugeot 308, АА 1234 ВВ

🔔 СПОВІЩЕННЯ

❓ Статус: не перевірено

👆 Спочатку увімкни сповіщення → потім натисни "Тест"!

🔔

Що таке Notification API?

Notification API — вбудований інструмент браузера, який дозволяє показувати системні сповіщення користувачу.

✨ Головна фішка: Сповіщення працюють навіть коли:

Вкладка браузера згорнута
Користувач в іншому додатку
Екран заблокований (на мобільних)

⚠️ Але є правило: Браузер захищає користувачів від спаму. Перед тим як надсилати сповіщення — потрібно отримати явний дозвіл від користувача.

Це схоже на підписку на розсилку: сайт не може просто надсилати email без дозволу. Так само і зі сповіщеннями — спочатку питаємо, потім надсилаємо.

Notification 🔐 Permission 📲 Push

🚪

Сповіщення — це дзвінок у двері

Уяви: ти в кімнаті, двері зачинені. Щоб хтось міг подзвонити — потрібен дверний дзвінок (дозвіл).

requestPermission() — встановлюємо дзвінок.
new Notification() — хтось дзвонить!
permission: denied — дзвінок вимкнено, ніхто не потурбує.

🔄

Як працює дозвіл?

Натисни кнопку щоб побачити процес

📱

Сайт

→

❓

Запит

→

👤

Користувач

→

✅

Результат

🔐

3 стани дозволу

Notification.permission може бути одним з трьох

❓

"default"

Ще не питали. Можна запитати!

✅

"granted"

Дозволено! Можна надсилати.

🚫

"denied"

Заборонено. Не питати знову!

Натисни на картку щоб дізнатись більше!

🔬

Анатомія сповіщення

Натисни на частини щоб дізнатись більше

🚖

Koodi Taxi

зараз

🚖 Водій прибув!

Олександр чекає. Peugeot 308, АА 1234 ВВ

Натисни на частину сповіщення щоб побачити код!

Запитуємо дозвіл

🔐

Уяви, що ти хочеш зайти до когось в гості. Ти ж не вламуєшся в двері — ти спочатку питаєш дозвіл!

requestPermission() — це ввічливий стук у двері. Господар (браузер) питає користувача: "Впустити?"

Користувач може відповісти: "Так" (granted), "Ні, і більше не питай" (denied), або просто не відповісти (default).

Напиши цей код:

// Перевіряємо чи браузер підтримує сповіщення if ('Notification' in window) { // Запитуємо дозвіл Notification.requestPermission().then(function(permission) { if (permission === 'granted') { alert('✅ Сповіщення увімкнено!'); } else { alert('❌ Сповіщення заблоковано'); } }); } else { alert('Браузер не підтримує сповіщення'); }

🔍 Що тут відбувається:

1. Перевірка підтримки браузером:
• 'Notification' in window — перевіряємо чи браузер взагалі підтримує сповіщення
• Не всі браузери підтримують цю функцію (наприклад, старі версії або деякі мобільні)
• Завжди перевіряй перед використанням — це defensive programming

2. Запит дозволу:
• requestPermission() — показує системний діалог браузера
• Користувач бачить: "Цей сайт хоче надсилати вам сповіщення" з кнопками "Дозволити" / "Заблокувати"
• Цей запит можна зробити тільки після дії користувача (клік на кнопку) — браузери блокують автоматичні запити

3. Promise та асинхронність:
• .then() — це Promise, бо користувач відповідає НЕ одразу
• Код продовжує виконуватись, а коли користувач натисне кнопку — виконається .then()
• Можна також використати async/await: const permission = await Notification.requestPermission();

4. Результат:
• 'granted' — користувач дозволив, можна надсилати!
• 'denied' — користувач заблокував, НЕ питай знову
• 'default' — користувач закрив діалог без вибору

🧪 Тест: Notification.requestPermission() повертає...

Створюємо сповіщення

📲

Тепер уяви телефонний дзвінок. Коли хтось тобі дзвонить — телефон показує:

• Хто дзвонить (title) — "Водій Олександр"
• Деталі (body) — "Білий Peugeot 308"
• Фото (icon) — аватарка контакту

new Notification() працює так само! І найкрутіше — цей "дзвінок" прийде навіть якщо ти граєш у гру або дивишся YouTube. Вкладка може бути згорнута!

Напиши цей код:

// Перевіряємо що дозвіл є if (Notification.permission === 'granted') { // Створюємо сповіщення new Notification('🚖 Koodi Taxi', { body: 'Водій Олександр прибув! Білий Peugeot 308', icon: '🚖' }); }

📦 Конструктор Notification:

Синтаксис:
new Notification(title, options)

1. Перший параметр — title (обов'язковий):
• Заголовок сповіщення — перше що бачить користувач
• Має бути коротким та зрозумілим: "Водій прибув!", "Нове повідомлення"
• Можна використовувати емодзі для привернення уваги 🚖

2. Другий параметр — options (об'єкт з налаштуваннями):
• body — детальний текст сповіщення (до 2-3 рядків)
• icon — URL картинки або емодзі (з'являється зліва)
• tag — унікальний ID, щоб не дублювати однакові сповіщення
• requireInteraction — чи залишати сповіщення поки користувач не закриє
• silent — чи вимкнути звук сповіщення

3. Особливості системних сповіщень:
• Працюють навіть коли вкладка згорнута або браузер у фоні
• Відображаються операційною системою, не браузером
• На Windows з'являються справа знизу, на Mac — справа зверху
• Користувач може клікнути на сповіщення — можна додати обробник notification.onclick

🧪 Тест: Сповіщення працюють коли вкладка...

Перевіряємо статус дозволу

🔍

Уяви охоронця біля входу в клуб. Перед тим як впустити когось — він перевіряє список.

Notification.permission — це той самий "список":
• "granted" — "Ви в списку, проходьте!" ✅
• "denied" — "Вам заборонено вхід, навіть не питайте" 🚫
• "default" — "Хм, вас немає в списку... Давайте перевіримо" ❓

Завжди перевіряй статус перед створенням сповіщення — це гарний тон!

Напиши цей код:

// Перевіряємо поточний статус const status = Notification.permission; if (status === 'granted') { // Можна надсилати! console.log('✅ Дозволено'); } else if (status === 'denied') { // Заборонено - не питати! console.log('🚫 Заборонено'); } else { // 'default' - можна запитати console.log('❓ Ще не питали'); }

🔐 Три стани дозволу:

1. 'granted' — Дозвіл отримано ✅
• Користувач натиснув "Дозволити"
• Можна вільно створювати сповіщення через new Notification()
• Цей стан зберігається в браузері для цього домену

2. 'denied' — Заборонено 🚫
• Користувач натиснув "Заблокувати"
• ВАЖЛИВО: НЕ питай знову! requestPermission() навіть не покаже діалог
• Користувач може змінити це тільки вручну в налаштуваннях браузера
• Покажи повідомлення: "Сповіщення заблоковано. Увімкніть в налаштуваннях браузера"

3. 'default' — Ще не вирішено ❓
• Користувач закрив діалог без вибору або ще не бачив запит
• Можна запитати знову через requestPermission()
• Поводься так само як з 'denied' — не надсилай сповіщення

💡 Best Practice — перевіряй статус ПЕРЕД надсиланням:
Не викликай new Notification() якщо permission !== 'granted'. Це викличе помилку в консолі та поганий user experience.

🧪 Тест: Notification.permission може бути...

🏆 Що ти вивчив:

✓ requestPermission() — запитувати дозвіл

✓ new Notification() — створювати сповіщення

✓ permission — перевіряти статус (granted/denied/default)

✓ body, icon — налаштовувати вигляд

⚠️

Best Practices: НЕ спамуй сповіщеннями!

❌ Погано: Питати дозвіл одразу при відкритті сайту — користувач ще не знає навіщо йому це. 88% відхилять запит!

✅ Добре: Питати дозвіл коли користувач клікає кнопку "Увімкнути сповіщення" — він САМ хоче їх отримувати.

❌ Погано: Надсилати сповіщення кожні 5 секунд — користувач заблокує сайт назавжди.

✅ Добре: Надсилати тільки важливі сповіщення: "Водій прибув", "Замовлення готове", "Нове повідомлення".

💡 Правило: Якщо користувач не буде радий бачити сповіщення — не надсилай його. Сповіщення = цінна інформація, а не реклама!

🌍

Реальні приклади використання

🚖 Uber/Bolt: "Водій прибув!", "Поїздка завершена"

💬 Telegram/WhatsApp: "Нове повідомлення від Олени"

🍕 Glovo/Rozetka: "Замовлення прийнято", "Кур'єр у дорозі"

📧 Gmail: "Новий лист від GitHub"

✅ Коли все працює:

Натисни "Готово" в редакторі!

⏱️ ~15 хв • Урок 7 з 8

Потрібна допомога?

💡 Підказка

🤖 AI-KOODI

index.html ✏️

style.css

app.js

1 2 3 4 5 6 7 8 9 10

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🚖 Koodi Taxi — Сповіщення</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- =============================================
         🔔 ЗАВДАННЯ: Сповіщення
         =============================================

         Створи інтерфейс для сповіщень:
         ✅ div (notifications) — контейнер
         ✅ h2 — заголовок "🔔 Сповіщення"
         ✅ p (notifStatus) — статус дозволу
         ✅ button (enableNotif) — "🔔 Увімкнути"
         ✅ button (testNotif) — "📲 Тест"

         ⬇️ ПИШИ КОД НИЖЧЕ ⬇️
    -->

    <div id="app">
        <h1>🚖 Koodi Taxi</h1>

        <!-- Твій код тут -->

    </div>

    <script src="app.js"></script>
</body>
</html>

/* =============================================
   🎨 СТИЛІ ДЛЯ KOODI TAXI — СПОВІЩЕННЯ
   =============================================
   Стилі готові! Фокус уроку — Notification API.
*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Arial, sans-serif;
    background: linear-gradient(135deg, #1A1A2E, #16213e);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

#app {
    background: rgba(255, 213, 0, 0.1);
    padding: 30px;
    border-radius: 25px;
    border: 3px solid #FFD500;
    text-align: center;
    max-width: 420px;
    width: 100%;
}

h1 {
    color: #FFD500;
    font-size: 1.8em;
    margin-bottom: 20px;
}

#notifications {
    background: rgba(0,0,0,0.3);
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 15px;
}

#notifications h2 {
    color: #FFD500;
    font-size: 1.3em;
    margin-bottom: 20px;
}

#notifStatus {
    padding: 12px 15px;
    border-radius: 10px;
    margin-bottom: 15px;
    font-weight: bold;
    background: rgba(255,213,0,0.2);
    color: #FFD500;
}

#notifStatus.granted {
    background: rgba(76,175,80,0.2);
    color: #4CAF50;
}

#notifStatus.denied {
    background: rgba(255,78,153,0.2);
    color: #FF4E99;
}

button {
    width: 100%;
    padding: 15px;
    border: 3px solid #000;
    border-radius: 12px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 10px;
    background: linear-gradient(135deg, #FFD500, #E5BF00);
    color: #000;
}

button:hover {
    transform: scale(1.03);
    box-shadow: 0 5px 20px rgba(255,213,0,0.3);
}

#testNotif {
    background: linear-gradient(135deg, #4CAF50, #45a049);
    color: #FFF;
}

#testNotif:disabled {
    background: #444;
    color: #888;
    cursor: not-allowed;
    transform: none;
}

// =============================================
// 🚖 KOODI TAXI — Notifications (Урок 7)
// =============================================
// Вивчаємо: Notification API, дозволи, сповіщення

// ─────────────────────────────────────────────
// 📦 КРОК 1: Знайди елементи
// ─────────────────────────────────────────────
// Використай document.getElementById() для:
// - notifStatus (p для статусу)
// - enableNotif (кнопка увімкнути)
// - testNotif (кнопка тест)
//
// ⬇️ ПИШИ ТУТ:



// ─────────────────────────────────────────────
// 🔔 КРОК 2: Функція запиту дозволу
// ─────────────────────────────────────────────
// Створи функцію enableNotifications() яка:
// 1. Перевіряє чи 'Notification' in window
// 2. Викликає Notification.requestPermission()
// 3. Оновлює статус в залежності від результату
//
// ⬇️ ПИШИ ТУТ:



// ─────────────────────────────────────────────
// 📲 КРОК 3: Функція показу сповіщення
// ─────────────────────────────────────────────
// Створи функцію showTaxiNotification() яка:
// 1. Перевіряє Notification.permission === 'granted'
// 2. Створює new Notification() з title та body
//
// ⬇️ ПИШИ ТУТ:



// ─────────────────────────────────────────────
// 🖱️ КРОК 4: Обробники кнопок
// ─────────────────────────────────────────────
// Додай addEventListener на обидві кнопки
//
// ⬇️ ПИШИ ТУТ:



// ─────────────────────────────────────────────
// 🔍 КРОК 5: Перевірка статусу при завантаженні
// ─────────────────────────────────────────────
// При завантаженні сторінки покажи поточний статус
//
// ⬇️ ПИШИ ТУТ:



console.log('🔔 Koodi Taxi Notifications!');

16px

localhost/taxi-notif.html

🔔

Напиши код і натисни Run ▶

Koodi Taxi

🔔 Урок 7: Таксі прибуло!

📱 Сидиш, чекаєш таксі, гортаєш TikTok...

Що таке Notification API?

🏆 Що ти вивчив:

Best Practices: НЕ спамуй сповіщеннями!

Реальні приклади використання

✅ Коли все працює:

Потрібна допомога?

🎉 Урок 7 Завершено!

🤖 AI-KOODI

💡 Підказка

🔔 Сповіщення загубилось!