何年も前から、「ああ、このアプリをインストールし、オフラインでも動作させることができますか?」と誰かが言っています。 PWAのウサギの穴へのゆっくりとした痛ましいダウンロードを回避してください:フラッキーサービスワーカーのセットアップ、キャッシュの混乱、App Routerが物事を破壊し、ユーザーはCache Godsを手動で呼び出さない限り、古いバージョンに閉じ込められました。 だから私は、あまりにもたくさんのコーヒーと十分な忍耐力がない合理的な開発者がやろうとしていることをしました:私は自分のクソパッケージを作りました。 Introducing: next-pwa-pack それは Next.js のドロップイン ウォレッパー (Yep, App Router でうまく機能します) で、あなたは単に 1 つのプロバイダーとあなたのレイアウトを包むことで、完全な PWA サポートを提供します。 import { PWAProvider } from "next-pwa-pack"; export default function layout({ children }) { return <PWAProvider>{children}</PWAProvider>; } そして あなたのアプリをネイティブのようにインストールし、オフラインで動作し、キャッシュページ、同期タブ、および組み込みの開発パネルを持つ船さえあれば、何かが機能しているかどうかを推測する必要はありません。 boom それを捨てて、あなたの人生に進みましょう。 なぜこれを作ったのか クライアントが「オフラインファースト」や「PWA機能」を求めるたびに、私はちょっと内側で死んでしまいました。 最新の App Router をサポートしていなかったか、自分のページをリフレッシュして、サービスワーカーが実際にアップデートしたかどうかを確認するために、自分のページをロールしようとしました。 next-pwa 結局、私が望んでいたのはノーブライナーの設定だったことに気付きました. 僕に働くサービスワーカー、プレキャッシング、アップデートロジック、バージョン制御を与えてくれました. 僕がどんなNext.js プロジェクトにも接続して信頼できるものがありました. だから、これを建てた。 何が実際に起きているのか ハウスの下で、 船舶不具合 で、 そして、 sw.js が HTML や静的資産キャッシュを適切なデフォルトで処理する - HTML 応答は 10 分間の TTL を取得し、JS、CSS、画像などの資産は永久に保存されます。 next-pwa-pack sw.js manifest.json offline.html すべてのブラウザタブを同期するには、それを使用します。 セッションを通じて更新を放送するイベント. If you go offline, it serves a lightweight だから、ユーザーは恐ろしい白い画面に直面しない。 localStorage offline.html それは単に「オフラインであること」だけではないので、あなたがキャッシュレイヤーと相互作用できるように小さなAPIも追加しました。 新しいコンテンツを公開した後、いくつかのページをプレフェッチしたいですか? トリックは、こちらも インストール状態を追跡するか、新しいバージョンを聴く必要があります。 clearAllCache() updateSWCache(["/blog", "/dashboard"]) usePWAStatus() DEV MODE GOODIES できれば プロバイダーで、あなたのアプリケーションで浮動するPWAデバッグパネルが表示されます. それはあなたのオンライン/オフライン状態を表示し、キャッシュをクリアまたは更新し、サービスワーカーを登録しなくなり、テスト中にキャッシュをオンまたはオフに切り替えます. もうChrome DevToolsを掘り下げたり、5分ごとにサービスワーカーを手動で非登録したりしないでください. devMode A Few Things To Keep In Mind シングル それは魔法ではありませんので、あなたはまだあなたの manifest.json をカスタマイズし、バナーをインストールして見たくなる場合はアイコンをアップロードする必要があります。我々はGET リクエストのみをキャッシュします - 変異や敏感な POST データはありません - そして、HTML TTL または他のキャッシュ ルールを変更したい場合は、あなたはキャッシュ ルールを調整する必要があります。 直接(現時点で - コンフィグシステムが来ている)。 sw.js しかし、パフォーマンス面では、影響は最小限であり、もし何かあれば、戻ってくる訪問者はキャッシュされた回答からスピードアップを見るでしょう。 次は何 このロードマップには、構成ベースの TTL ルール、 push 通知、URL パターンに基づくよりスマートなキャッシュ 戦略、ISR (Incremental Static Regeneration) との統合、そしてリアルタイムでキャッシュ ヒット/ミス メトリックを追跡するための組み込みダッシュボードも含まれています。 トップ > DR I 構築 なぜなら、私は手動でワイヤーサービスの労働者と生産のストールキャッシュのデバッグをしました。それはボックスから動作し、最新の 機能、およびあなたのアプリが速く、インストール可能で、および耐久性を維持するのに役立ちます - あなたの開発者意識を損なうことなく。 next-pwa-pack Next.js オープンソースなので、こちらで試してみてください。 <https://github.com/dev-family/next-pwa-pack](https://github.com/dev-family/next-pwa-pack) 使って、折って、壊して、あなたがどう思うか教えてください。 隠れなさい!
