L17. Офлайн і значок на телефоні

Перевіримо офлайн-режим «Мого дня» та додамо значок на телефон. Орієнтовно потрібно 30–40 хвилин, HTTPS-посилання з уроку 16, Android із Chrome та інтернет для першого відкриття. Для iPhone нижче є окремий маршрут; без телефона можна розібрати порядок дій і виконати домашню вправу на папері.

Наш застосунок — PWA: вебпрограма, яку сумісний браузер може встановити зі значком. Ми не створюємо нативного пакета Android чи iOS для магазинів Google Play або App Store. Встановлення й офлайн-режим — окремі можливості: значок ще не доводить, що файли доступні без мережі. [B208]

На занятті

Викладач продемонструє перший онлайн-запуск і повторне відкриття без мережі. Разом відокремимо значок, кеш файлів і збережені позначки та визначимо, що саме перевіряє кожна дія.

Звідки береться офлайн-копія

manifest.webmanifest описує назву, значки й спосіб відкриття застосунку. sw.js містить service worker — фоновий обробник, який у нашому прикладі зберігає копії файлів і віддає їх браузеру. Ці копії називаються кешем. Позначки справ, як і раніше, зберігає localStorage, а не кеш файлів. [B209]

• У локальній папці my-day відкрийте manifest.webmanifest у Блокноті. Знайдіть наступні налаштування JSON. Це фрагмент наявного файла; не замінюйте ним увесь manifest:

"start_url": "./",
"scope": "./",
"display": "standalone"

./ означає поточну папку. Так застосунок відкриється за /my-day/, а не випадково в корені вашого домену. standalone просить окреме вікно застосунку. У тому самому файлі мають бути посилання на значки 192×192 та 512×512 пікселів. Для встановлення потрібна вебадреса HTTPS; локальне розробницьке середовище є окремим винятком. [B208]

• На телефоні відкрийте Chrome й уведіть точну адресу з Visit site. Поки інтернет увімкнений, дочекайтеся «Готово до роботи офлайн». Це повідомлення застосунку, а не кнопка браузера. Натисніть Почати новий день, а потім позначте першу справу.
• У Chrome натисніть меню ⋮ → Install and create shortcut → Install — «Встановити й створити ярлик → Встановити» в перекладі. Підтвердьте встановлення у вікні, що з’явиться. Англійські назви наведено за довідкою Chrome; переклад меню залежить від мови браузера. [B210]
• Поверніться на домашній екран і знайдіть значок «Мій день». Відкрийте його. Перевірте назву, три справи та лічильник.
• Закрийте застосунок. Вимкніть на телефоні і Wi-Fi, і мобільні дані. Знову відкрийте «Мій день» зі значка. Очікуємо список справ, попередню позначку й повідомлення «Ви офлайн. Справи доступні». Позначте третю справу, закрийте й відкрийте знову: очікуємо першу й третю позначки та число 2. Після тесту поверніть з’єднання.

[[VIS:b5_app_offline]]

[[VIS:b5_app_browser]]

Якщо маєте iPhone

У Chrome на iPhone відкрийте ту саму HTTPS-адресу. Натисніть Share → Add to Home Screen, перевірте назву й натисніть Add. За довідкою Google ярлик відкриває вебзастосунок, якщо сайт його підтримує; інакше відкривається звичайна сторінка. Окремо повторіть перевірку без мережі та збереження позначок саме у вікні зі значка. [B211]

Оновлення після встановлення

Перед оновленням натисніть Почати новий день, позначте першу й третю справи та запишіть цей стан. Після оновлення мають залишитися ті самі дві позначки й число 2: нові файли програми не повинні починати новий день замість вас.

Кеш навмисно тримає робочу копію. Якщо змінити напис у HTML, старий встановлений варіант може його ще показувати. У готовому sw.js знайдіть рядок JavaScript:

const cacheName = prefix + "v1";

Для наступної версії замініть v1 на v2; якщо вже маєте v2, використайте v3. Збережіть файл. У репозиторії виберіть Add file → Upload files, завантажте змінені файли й sw.js, натисніть Commit changes та дочекайтеся розгортання. Відкрийте застосунок онлайн, закрийте всі його вкладки та вікна, потім відкрийте знову. Новий обробник активується після закриття старих вікон. Не змінюйте схожий ключ my-day:v1 у app.js: він належить позначкам, а не кешу.

> [FIX]

> Пункту встановлення немає або офлайн не працює? Спочатку перевірте HTTPS і наявність усіх семи файлів у репозиторії. У рядку адреси після /my-day/ допишіть icon-192.png і натисніть Enter: має з’явитися значок. Для власної генерації попросіть ШІ: «Перевір відносні шляхи manifest і список кешування sw.js для папки /my-day/. Поясни, який файл не завантажується». Поки встановлення недоступне, застосунок можна використовувати у вкладці.

Практика вдома

• Створіть у Блокноті Documents\AI-practice\offline-card.txt або використайте аркуш. Напишіть коротку інструкцію для людини, яка вперше відкриває ваш застосунок на іншому телефоні.
• Укажіть, коли потрібен інтернет, як упізнати готовність офлайн і що зробити після встановлення для перевірки. Додайте окреме речення: чи з’являться на її телефоні ваші позначки?
• Звірте інструкцію з кроками 2–5. Вона має включати перше онлайн-відкриття, перевірку без обох з’єднань і повернення мережі. Якщо встановлення на телефоні не перевіряли, зазначте це в інструкції.

Самотест

• Що зберігає кеш файлів, а що — localStorage у нашому застосунку?
• На телефоні є значок, але ви ще не вимикали мережу. Чи можна записати «офлайн перевірено»?
• Чому інший телефон не відкриє застосунок уперше без інтернету?

Терміни

• PWA — вебзастосунок із можливістю встановлення через сумісний браузер.
• Manifest — файл із назвою, значками й параметрами відкриття.
• Кеш — збережені копії файлів для повторного використання.