Вы хотите офлайн? Вы оказались в автономном режиме. Мертвый промежуточный
hackernoon-top-story programming nextjs typescript react webdev opensource developer-experience nextjs-app-router

Вы хотите офлайн? Вы оказались в автономном режиме. Мертвый промежуточный

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Особенности и помогают приложению оставаться быстрым, установленным и устойчивым - не разрушая ваше развитие.

Это открытый исходный код, вы можете попробовать это здесь:<https://github.com/dev-family/next-pwa-pack] (https://github.com/dev-family/next-pwa-pack)

Используйте его, разбивайте, сломайте - и скажите мне, что вы думаете.

Оставайся кэшированным!

Оригинал

Recent Post

Categories

PREVIOUS ARTICLE
NEXT ARTICLE