LogRocket випустили гайд, який добре розділяє два поняття, які часто плутають. Перше - app shell offline: коли застосунок відкривається без інтернету завдяки кешу, але не може працювати з даними. Друге - true offline support: коли застосунок і відкривається, і дозволяє робити дії офлайн (створювати, редагувати, видаляти), а потім коректно синхронізується.
У прикладі автор збирає простий todo-додаток на Next.js 16 і показує “потрібний мінімум” для справжнього офлайн-патерну:
1) Service worker для кешу оболонки та статичних ресурсів.
Використовується Serwist, який бере на себе precache базових файлів, а також runtime-caching (стратегія на кшталт stale-while-revalidate для ассетів). Це дає швидке завантаження і можливість старту без мережі.
2) Маніфест PWA для встановлення застосунку.
Через app/manifest.ts задаються назва, short_name, start_url, режим standalone, іконки тощо - щоб браузер міг “інсталювати” застосунок на телефон/десктоп.
3) Локальні дані в IndexedDB, а не в пам’яті/LocalStorage.
Ключова ідея - дані мають жити локально, щоб список завдань був доступний без мережі. У статті IndexedDB використовується як невелика база, а кожен todo має, серед іншого, прапорець synced (чи вже відправлено зміни на сервер).
4) Синхронізація після відновлення мережі.
Коли користувач офлайн - зміни зберігаються локально і позначаються як не синхронізовані. Коли мережа повертається - застосунок “доганяє” сервер: відправляє накопичені дії/оновлює список. Це робить офлайн-режим корисним, а не декоративним.
5) UX-деталі: індикатор online/offline і передбачувана поведінка.
Автор окремо додає компонент статусу мережі, щоб користувач бачив, чи зміни реально вже на сервері, чи ще “в черзі”.
З практичних нюансів: у Next.js 16 дефолтний бандлер - Turbopack, але в описаному підході PWA-збірка потребує webpack (звідси next build --webpack). Це важливо врахувати, щоб service worker коректно згенерувався і не ламав дев-флоу.
Висновок: стаття корисна тим, що показує “офлайн” як архітектурне рішення (кеш + локальна база + синк), а не як галочку “додали плагін - і готово”.