オフラインサイトにVitepwaプラグインを使用します

Anthony FuのVitepwaプラグインは、オフライン機能を備えたViteベースのWebサイトを強化するための強力なツールです。このプラグインは、サービスワーカーを追加して、オフラインサポート、アセットキャッシング、および通知を更新するプロセスを簡素化します。サービスワーカーとVitepwaを使用してそれらを実装する方法を探りましょう。

サービスワーカーの理解

サービスワーカーは、Webアプリケーションとは独立して実行されるバックグラウンドスクリプトです。その重要な機能は、さまざまなアクションを有効にするネットワークリクエストを傍受することです。オンザフライタイプスクリプトコンピレーションやビデオトランスコーディングなどの複雑なタスクが可能ですが、最も一般的な用途は、パフォーマンスの向上とオフラインアクセスのためのキャッシュ資産です。

Vitepwaは、最初のサイト訪問時にHTML、CSS、およびJavaScriptファイルを事前にキャッシュするサービスワーカーを作成します。その後の訪問は、これらのリソースをキャッシュからロードし、ネットワークリクエストを排除します。最初の訪問でさえ、その後のクリックは多くの場合、事前にキャッシュされたコンテンツをロードし、速度を大幅に改善します。

バージョン化およびマニフェストファイル

コードの変更には慎重なバージョンが必要な場合、サービスワーカーの更新を管理します。ビルドシステムは通常、ファイルのハッシュを組み込んだファイル名（ foo-ABC123.jsなど）を生成します。更新の結果、新しいファイル名（ foo-XYZ987.jsなど）が得られます。サービスワーカーは、これらの変更を効率的に処理する必要があります。

サービスワーカーAPIは低レベルです。キャッシュされたファイルを手動で管理することは複雑です。 GoogleライブラリであるWorkboxはこれを簡素化しますが、ビルドプロセスからの詳細な資産情報が必要です。 Vitepwaは、Workboxと統合し、Viteのビルド出力で自動的に構成することにより、これにエレガントに対処します。

Vitepwaでサービスワーカーを実装します

1. インストール： npm i vite-plugin-pwaを使用してプラグインをインストールします。

2. Vite構成：プラグインをvite.config.jsにインポートして追加します：

    「Vite-Plugin-Pwa」から{vitepwa}をインポート。
   
   デフォルトのデフォルトdefineconfigをエクスポートする（{
     プラグイン：[vitepwa（）]、
     // ...その他の構成
   }）;

3. サービスワーカー登録：アプリケーションのエントリポイントにサービスワーカーを登録します。

    「Virtual：PWA-Register」から{registersw}をインポートします。
   
   if（navigatorの "serviceworker"）{
     registersw（）; //開発環境に条件付きロジックを追加することを検討してください
   }

   registerSW機能は、サービスワーカーのライフサイクルを処理します。条件付きロジック（例、 localhostを除く）は、開発中のサービスワーカーの活性化を防ぎます。

4. オフライン機能： VitePWAが提供する事前キャッシュは、基本的なオフライン機能を自動的に有効にします。アセットは、ネットワークアクセスがなくてもキャッシュから提供されます。より高度なオフライン機能（例：IndexEdDBを使用）には、カスタムサービスワーカーロジックが必要です。

サービスワーカーの更新

コードが変更されると、更新されたプリキャッシュマニフェストを備えた新しいサービスワーカーが生成されます。古いサービスワーカーは、すべてのタブが閉じて再開されるまで実行され続け、セッション全体で一貫したユーザーエクスペリエンスを確保します。

onNeedRefreshによる更新処理の改善

registerSW関数は、よりスムーズな更新プロセスを可能にします。 onNeedRefreshコールバックは、新しいサービスワーカーが利用可能になったときにトリガーされ、ユーザーに通知し、制御されたリロードを開始する機会を提供します。

レジスタワ（{
  onneedrefresh（）{
    //ユーザーに通知を表示し、更新するように促します
    // ...
  }
}）;

ランタイムキャッシュ

VITEPWAのworkbox構成オプションは、アプリケーションの実行中に取得されたアセットのランタイムキャッシュを有効にします。これにより、事前にキャッシュされたリソースを超えてオフライン機能が拡張されます。

 Vitepwa（{
  workbox：{
    runtimecaching：[ / * ...ランタイムキャッシュ構成... * /]
  }
}）

カスタムサービスワーカーコードの追加

カスタムロジックを組み込むには、 workbox構成内のimportScriptsオプションを使用して、外部JavaScriptファイルを含めます。

 Vitepwa（{
  workbox：{
    importscripts：["sw-code.js"]
  }
}）

結論

Vitepwaは、サービスワーカーの実装を大幅に簡素化し、オフライン機能とパフォーマンスの向上のための堅牢な基盤を提供します。高度な機能にはカスタムコードが必要ですが、プラグインはキャッシュと更新の複雑さを処理し、開発者がアプリケーションロジックに集中できるようにします。オフラインの機能から始めて、必要に応じてより高度なサービスワーカー機能を調べます。

以上がオフラインサイトにVitepwaプラグインを使用しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。