Habr<p>Как я устал вручную писать сервис-воркеры и сделал next-pwa-pack, чтобы больше не страдать</p><p>Сколько лет уже кто-то говорит: «А можно, чтобы оно работало без интернета и ставилось на домашний экран?» И каждый раз после этой фразы начинается медленный спуск в персональный ад — ты лезешь в документацию по PWA, где всё разваливается на ровном месте, service worker живёт своей жизнью, кеш то работает, то ломается, App Router рушит весь твой кастомный пайплайн, а пользователи сидят на старых версиях, потому что вручную обновлять им, конечно, влом. Словом, если ты когда-то пробовал прикрутить оффлайн-режим к Next.js-проекту, ты наверняка вспоминал всех, кто придумал этот стек. Я — точно. Поэтому, как человек, у которого было слишком много кофе и слишком мало терпения, я сделал единственное разумное: написал свою обёртку. Так и появился next-pwa-pack — дроп-ин пакет, который превращает любой Next.js-проект в полноценное PWA, буквально одной строкой. Да, даже с App Router. Просто заворачиваешь свой layout в PWAProvider, и всё: приложение можно установить, оно кэширует страницы, работает оффлайн, синхронизирует вкладки и даже показывает отладочную панель, чтобы не гадать, сработало ли что-нибудь. Воткнул — и живи дальше. А то: Сервис-воркер? Напиши вручную. Кешировать HTML? Сам придумай как. Синхронизация вкладок? Ну это уже магия, удачи. Обновление кеша после деплоя? Ну ты ж senior, сам справишься. 🤡 И ты сидишь, как идиот, с 300 вкладками про Workbox, cache-first , network-only , костылями из Stack Overflow 2019 года, и потеешь. Если раньше каждый запрос «сделай оффлайн» вызывал у меня флэшбэк на тему next-pwa, неподдерживаемых версий, кривого кеша и плясок с бубном вокруг обновлений — теперь всё это ушло. Я хотел простой setup, который просто работает: предзагрузка, нормальные TTL, понятное обновление и синхронизация. Без фокусов, без багов, без “подожди, сейчас DevTools открою”. Погнали дальше!</p><p><a href="https://habr.com/ru/articles/935024/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">habr.com/ru/articles/935024/</span><span class="invisible"></span></a></p><p><a href="https://zhub.link/tags/nextjs" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>nextjs</span></a> <a href="https://zhub.link/tags/progressive_web_apps" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>progressive_web_apps</span></a> <a href="https://zhub.link/tags/app_router" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>app_router</span></a> <a href="https://zhub.link/tags/serviceworker" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>serviceworker</span></a> <a href="https://zhub.link/tags/reactjs" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>reactjs</span></a> <a href="https://zhub.link/tags/react" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>react</span></a></p>