Вы хотите офлайн? Вы оказались в автономном режиме. Мертвый промежуточный
17 июля 2025 г.Это были годы, когда кто -то говорил: «Эй, мы можем сделать это приложение, можно было бы также работать в автономном режиме?»
Позвольте медленному, болезненному происхождению в кроличьей дыре PWA: настройки служебных работников, кеш -хаос, маршрутизатор приложений, разбивая вещи и пользователи, застрявшие со старыми версиями, если только они вручную не вызвали богов кеша. Всегда казалось, что пытаться приклеить поддержку в автономном режиме вместе с тем, что надежда и переполнения надежды и стека.
Так что я сделал то, что сделал любой разумный разработчик со слишком большим количеством кофе, и не хватало бы терпения: я построил свой собственный проклятый пакет.
Представляем:next-pwa-pack
Это обертка для Next.js (да, отлично работает с маршрутизатором приложений), которая дает вам полную поддержку PWA, просто завершив макет одним провайдером. Вы буквально пишете:
import { PWAProvider } from "next-pwa-pack";
export default function layout({ children }) {
return <PWAProvider>{children}</PWAProvider>;
}
Ибум! Торжко устанавливается приложение, как нативное, работает офлайн, кэширует страницы, синхронизирует вкладки и даже отправляется со встроенной панелью разработчика, поэтому вам не нужно догадаться, работает ли что-нибудь.
Просто бросьте его и продолжайте свою жизнь.
Почему я построил это
Каждый раз, когда клиент спрашивал «офлайн-первый» или «функции PWA», я умер немного внутри. Я достигнуnext-pwaТолько для того, чтобы обнаружить, что он не поддерживал последнее маршрутизатор приложений, или я попытался бы бросить свой собственный и в конечном итоге внести яроз, чтобы увидеть страницу, чтобы увидеть, действительно ли обслуживающий работник обновил. Мне казалось, что я строю ту же самую хрупкую SW Setup снова и снова.
В конце концов, я понял, что я хотел, чтобы это не сложно. Что-то, что только что дало мне работника службы, предварительно кеширование, логику обновления и контроль версий-и ушло с дороги. Что -то, что я мог бы подключить к любому проекту и доверию следующего.js.
Итак, я это построил.
Что на самом деле происходит
Под капюшоном,next-pwa-packотправляется по умолчаниюsw.jsВmanifest.json, иoffline.htmlв вашу публику/ папку, если они еще не существуют. Этот SW.JS обрабатывает HTML и статическое кэширование активов с здравым дефолтом-ответы HTML получают 10-минутный TTL, а активы, такие как JS, CSS и изображения, хранятся навсегда.
Чтобы поддерживать синхронизацию всех браузеров, он используетlocalStorageСобытия для трансляции обновлений по всему сеансу. Если вы останетесь в автономном режиме, он обслуживает легкий весoffline.htmlТак что пользователи не сталкиваются с страшным белым экраном.
И поскольку речь идет не только о «быть офлайн», я также добавил крошечный API, чтобы вы могли взаимодействовать с кэширующим слоем. Хотите очистить все кэшированные данные после входа в систему? ЕстьclearAllCache()вызов. Хотите предварительно переполировать несколько страниц после публикации нового контента?updateSWCache(["/blog", "/dashboard"])делает трюк. Есть такжеusePWAStatus()Если вам нужно отслеживать состояние установки или прослушать новые версии.
Dev Mode Wandies
Если вы включитеdevModeВ поставщике вы получаете плавуческую панель отладки PWA прямо в вашем приложении. Он показывает ваш онлайн -статус/автономный статус, позволяет очистить или обновлять кэш, не регистрировать обслуживающего работника и даже включать или выключить кэширование или выключение во время тестирования. Больше не нужно копаться в хромированных Devtools или вручную нерегистрировать работников обслуживания каждые пять минут.
Несколько вещей, которые нужно иметь в виду
Это не волшебство, поэтому вам все равно нужно настроить свой Manifest.json и загрузить значки, если вы хотите, чтобы установка баннеров выглядела хорошо. Мы кэшируем только запросы - нет мутации или конфиденциальных данных о публикации - и если вы хотите изменить HTML TTL или другие правила кэширования, вам нужно будет настроитьsw.jsнапрямую (на данный момент - наступает система конфигурации).
Но по производительности, влияние минимально, и, во всяком случае, возвращающиеся посетители увидят повышение скорости от кэшированных ответов.
Что дальше
Дорожная карта включает в себя поддержку правил TTL на основе конфигурации, уведомления о PUSH, более умные стратегии кэша на основе шаблонов URL, интеграцию с ISR (инкрементная статическая регенерация) и даже встроенную панель для отслеживания метрик Hit/Miss в режиме реального времени.
TL; DR
Я построилnext-pwa-packПотому что я закончил работники с проводками вручную и отлаживал устаревшие кэши в производстве. Это работает из коробки, хорошо играет с последними последнимиNext.jsОсобенности и помогают приложению оставаться быстрым, установленным и устойчивым - не разрушая ваше развитие.
Это открытый исходный код, вы можете попробовать это здесь:
Используйте его, разбивайте, сломайте - и скажите мне, что вы думаете.
Оставайся кэшированным!
Оригинал