サービスワーカーとPWAS：オフラインファーストWebアプリの構築

サービスワーカーとPWAは、バックグラウンドスクリプト、キャッシュ、およびアプリのような機能を組み合わせて、オフラインファーストWebアプリを有効にします。 1.サービスワーカーは、ネットワークプロキシとして機能し、要求を傍受し、キャッシュファーストや陳腐化した場合の陳腐化などの戦略を使用してキャッシュを管理します。 2。インストール中にコア資産をPrecache Appシェルがオフラインでロードされるようにします。 3。API応答などの動的コンテンツのランタイムキャッシュを実装します。 4.ネーム、アイコン、表示モードなどのインストール可能なアプリプロパティを定義するWebアプリマニフェストを追加します。 5. JavaScriptでサービスワーカーを登録して、オフライン機能をアクティブにします。 6.ネットワークとキャッシュが失敗したときにオフラインフォールバックページを提供し、ユーザーエクスペリエンスを維持します。 7.バージョンキャッシュとアクティベーション中に古いものをクリーンアップして、老化を防ぎます。 8。ワークボックスを使用して、キャッシングとワークフローを同期します。 9.ブラウザDevToolsを使用したオフライン動作をテストします。オフラインファーストを構築することで、特に信頼性の低いネットワークで、すべてのユーザーの信頼性、速度、エンゲージメントが向上し、進歩的な強化を通じて達成可能です。

オフラインファーストのWebアプリの構築は、特に信頼性の低いインターネット接続を持つユーザーやモバイルデバイスでWebアプリを使用しているユーザーにとって、特に有益なものになるだけでなく、実用的な必要性になりました。この機能の中心には、サービスワーカーとプログレッシブWebアプリ（PWAS）があります。一緒に、ネットワークが遅い場合や完全に欠如している場合でも、迅速で信頼性の高い魅力的なエクスペリエンスを可能にします。

サービスワーカーとPWAが協力してオフラインファーストを可能にする方法と、接続なしでシームレスに動作するアプリの構築を開始する方法を分析しましょう。

サービスワーカーとは何ですか？

サービスワーカーは、Webページとは別にバックグラウンドで実行され、プログラム可能なネットワークプロキシとして機能するスクリプトです。ネットワークリクエストを傍受し、キャッシュを管理し、プッシュ通知やバックグラウンドの同期などの機能を有効にします。

重要な特性：

• ワーカーのコンテキストで実行されます（DOMアクセスなし）
• 別のスレッドで動作します
• HTTPS（または開発中にローカルホスト）を介して提供する必要があります
• ライフサイクルには、登録、インストール、アクティベーション、終了が含まれます

サービスワーカーの真の力は、ネットワークリクエストを傍受および処理する能力にあり、開発者がネットワークが利用できないときにキャッシュされたコンテンツを提供できるようにします。

サービスワーカーがオフライン機能を有効にする方法

オフラインファーストアプリを構築するには、ネットワークがない場合でも、コアコンテンツと機能が利用できるようにする必要があります。サービスワーカーがそれを実現する方法は次のとおりです。

1。キャッシュ戦略

サービスワーカーは、どのように、どのようにキャッシュするかを定義できます。一般的な戦略には以下が含まれます。

• キャッシュファースト：キャッシュからサーブ。キャッシュされていない場合にのみネットワークに移動します
• ネットワークファースト：最初にネットワークを試して、キャッシュに戻ります
• Stale-while-revalidate ：すぐにキャッシュから提供し、バックグラウンドでキャッシュを更新します
• キャッシュのみ：めったに変わらない静的資産に役立ちます

オフラインファーストアプリの場合、ネットワークフォールバックアプローチを備えたキャッシュファーストが最適に機能することがよくあります。

2。重要な資産を事前に増やします

サービスワーカーのinstallイベント中に、HTML、CSS、JS、画像などの必須ファイルを事前にキャッシュできます。

 const cache_name = 'v1';
const precache_urls = [
  '/'、
  '/styles/main.css'、
  '/scripts/app.js'、
  '/images/logo.png'
];

self.addeventlistener（ 'install'、（event）=> {
  event.waituntil（
    caches.open（cache_name）
      .then（cache => cache.addall（precache_urls））
  ）;
}）;

これにより、アプリシェルが最初の訪問からオフラインで利用できるようになります。

3。動的コンテンツのランタイムキャッシュ

fetchイベントを使用して、API応答やユーザー生成コンテンツなど、オンデマンドでアセットをキャッシュします。

 self.addeventlistener（ 'fetch'、（event）=> {
  if（event.request.destination === 'script' || event.request.destination === 'style'）{
    event.respondwith（
      caches.match（event.request）.then（cached => cached || fetch（event.request））
    ）;
  }
}）;

これをAPIからJSONデータをキャッシュするために拡張でき、以前にロードされたコンテンツへのオフラインアクセスを可能にします。

アプリをPWAに変えます

プログレッシブWebアプリは、最新のWeb機能を使用してアプリのようなエクスペリエンスを提供するWebアプリケーションです。 PWAと見なされるには、アプリは次のようにする必要があります。

• 信頼性が高い（ネットワーク条件が悪くなっている、または条件なしで作業）
• 速くなる（ユーザーのインタラクションに迅速に応答する）
• 魅力的です（ネイティブアプリのように感じ、ホーム画面のインストール、通知のプッシュなど）

アプリを真のPWAにするために必要なものは次のとおりです。

1。Webアプリマニフェスト

manifest.jsonファイルを追加して、インストール時にアプリの表示方法を定義します。

 {
  「名前」：「私のオフラインアプリ」、
  「short_name」：「offlineapp」、
  「start_url」： "/"、
  「ディスプレイ」：「スタンドアロン」、
  「background_color」：「#ffffff」、
  「Theme_Color」：「＃000000」、
  「アイコン」：[
    {
      「SRC」：「ICON-192.png」、
      「サイズ」：「192x192」、
      「タイプ」：「画像/PNG」
    }、
    {
      「SRC」：「Icon-512.png」、
      「サイズ」： "512x512"、
      「タイプ」：「画像/PNG」
    }
  ]
}

HTMLにリンクします：

 <link rel = "manifest" href = "/manifest.json">

2。サービスワーカーを登録します

メインのJavaScriptファイルで：

 if（ 'serviceworker' in Navigator）{
  window.addeventlistener（ 'load'、（）=> {
    navigator.serviceworker.register（ '/sw.js'）
      .then（reg => console.log（ 'sw Registered：'、reg.scope）））
      .catch（err => console.log（ 'SW登録失敗：'、err））;
  }）;
}

3.オフライン状態を優雅に処理します

キャッシングであっても、一部のリクエストは失敗します。オフラインのフォールバックページまたはUIでユーザーに通知します。

 self.addeventlistener（ 'fetch'、（event）=> {
  event.respondwith（
    caches.match（event.request）
      .then（cached => {
        キャッシュされた||を返しますfetch（event.request）
          .catch（（）=> caches.match（ '/offline.html'））;
      }）
  ）;
}）;

ユーザーの信頼を維持するために、フレンドリーなoffline.htmlページを設計します。

オフラインファーストの成功のための高度なヒント

• バージョンあなたのキャッシュ：古いコンテンツを避けるために、バージョン番号のキャッシュ名を使用します。
• 古いキャッシュのクリーンアップ： activateイベントを使用して、時代遅れのキャッシュを削除します。
• Workboxの使用：GoogleのWorkboxライブラリは、キャッシュ、前ケーチ、バックグラウンドの同期を簡素化します。
• オフラインの動作をテストする：devtools（アプリケーション>サービスワーカー）を使用して、オフラインモードをシミュレートし、キャッシュを確認します。

最終的な考え

サービスワーカーとPWAは、ネイティブアプリの回復力をWebにもたらす強力なツールです。アプリをオフラインで最初に作業するように設計することで、接続性が低いだけでなく、すべてのユーザーにとってより速く、より信頼性の高いエクスペリエンスを構築しています。

小さいスタート：アプリシェルをキャッシュし、マニフェストを追加し、徐々に強化します。時間が経つにつれて、バックグラウンド同期、プッシュ通知、および動的コンテンツキャッシングを追加できます。

それは魔法ではありません - それはただの優れたウェブエンジニアリングです。そして、それはこれまで以上に達成可能です。

以上がサービスワーカーとPWAS：オフラインファーストWebアプリの構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。