あなたのアプリをサービス労働者とオフラインで作業させる

Feb 8, 2026

操作方法

ページ1/2：

Page 1：ロード速いロード

Page 1：ロード速いロード
Page 2：オフラインアクセスの追加

サービス労働者は、サイトやWebアプリケーションのロード時間とオフラインサポートを改善するために使用できます。このチュートリアルでは、サービスワーカーを使ってWebアプリを次第に強化する方法を説明します。まず、サービス労働者とそのライフサイクルがどのように機能するのかをカバーします。その後、サイト（このページ）をスピードアップしてオフラインコンテンツを提供する方法を説明します（2ページ）。

それから私達はあなたにどのようにしているかをあなたに見せます アプリを構築する方法 サービス労働者と。静的資産をキャッシュしてサービス提供するBare-Bonesワーカーを設定する方法を学びます（後続のロードで巨大なパフォーマンスを向上させること）、次に動的APIの応答をキャッシュし、デモAppフルオフラインサポートを提供する方法を学びます。まず、サービス労働者がどのようにしているか、そしてどのように機能するかを見てみましょう。

ウェブサイトを構築する？プロセスを素晴らしいもので合理化させます ウェブサイトビルダー そして、それをまともなもので維持します ウェブホスティング サービス。そしてあなたのストレージをこれらに並べ替えましょう クラウドストレージ オプション。

サービス労働者は何ですか？

それでは、サービス労働者は何ですか？これはJavaScriptで書かれた、ブラウザがバックグラウンドで実行されるスクリプトです。メインスレッド（JavaScriptは通常Webページで実行されている）には影響しません。アプリコードと競合したり、ランタイムパフォーマンスに影響しません。

サービスワーカーは、Webページ自体で発生したDOMまたはイベントやユーザーの対話に直接アクセスできません。 Webページとネットワークの間に座っているレイヤーとして考えて、それがあなたのページによって行われたネットワーク要求（例えばAjax要求）を傍受し操作することを可能にします。これにより、キャッシュの管理やオフライン使用量のサポートに最適です。

サービスワーカーライフサイクル

サービス労働者の寿命は単純な流れに従いますが、すぐに働くだけでJSスクリプトに慣れているときは少し混乱している可能性があります。

インストール＆gt;待機（インストール）＆gt。活性化＆gt。アクティブ化された＆gt。冗長

ページが最初にロードされているときは、追加された登録コード index.html サービスワーカーのインストールを開始します。既存のワーカーがない場合は、新しいサービスワーカーがインストール直後にアクティブになります。 Webページには一度に1つのサービスワーカーしかアクティブになっていません。

労働者がすでにインストールされている場合は、新しいサービスワーカーがインストールされ、次にページが完全に閉じられてから再ロードされるまで待機ステップに座ります。他のタブが開いている可能性があるため、リフレッシュでは十分ではありません。それ以外の場合は、ページのすべてのインスタンスが閉じられていることを確認する必要があります。タブを閉じる必要はありません、あなたはただ別のサイトに移動して戻ることができます。

両方とも インストール そして 有効にする イベントは労働者ごとに1回だけ発生します。アクティブ化されると、サービスワーカーはページを制御し、フェッチなどのイベントの処理を開始します。

最後に、ブラウザがワーカーファイル自体が更新されたことを検出した場合、またはインストールまたはアクティベーションが失敗した場合、サービスワーカーは冗長になります。ブラウザは、ワーカースクリプトが更新されたかどうかを判断するためにバイトの違いを探します。

あなたがあなたのサービス労働者の名前を変更（またはrev）変更することは決してないでください。また、Browsersはキャッシングヘッダーを無視するのに十分なほどスマートなので、サーバー上のワーカーファイル自体をキャッシュする必要もあります。

01.デモAppを複製します

さて、サービス労働者からの助けを借りてWebアプリを構築する方法を学ぶことができましょう。このチュートリアルでは、最近のバージョンのNode.jsとNPMがコンピュータにインストールされている必要があります。

私たちはこのチュートリアルの基礎として使用するデモアプリをノックアップしました（ Demoアプリをここに複製します）。アプリは、ユーザーの場所に基づいて5日間の天気予報をフェッチする楽しい小さなプロジェクトです。それはそれから一日の終わりの前に雨が予測され、それに応じてUIを更新するかどうかを確認します。

これは、jQueryやBootstrapなどの大きくて不要なライブラリを使用して非効率的に構築されており、サービスワーカーを使用するときのパフォーマンスの違いを実証するための大きなオプションなイメージを持つ。それは現在ばかげた4.1MBで中で体重を量ります。

02.あなたのAPIキーを入手してください

APIから天気データを取得するためには、自分自身をから無料のAPIキーに入手する必要があります。 OpenWeatherMap. ：

あなたがあなたの鍵を持っていたら、開いてください index.html そしてを探します window.api_key. の変数 ＆lt;頭＆gt; 。キーを値に貼り付けます。

    window.API_KEY = 'paste-your-key-here';

03.開発サーバーを起動します

今、プロジェクトの取り組みを開始する準備が整いました。まず最初に実行して依存関係をインストールしましょう。

    npm install

ビルドツールには2つのタスクがあります。走る NPMスタート ポート3000で開発サーバを起動する NPM Run Build. 「製作」のバージョンを準備するため。これはデモだけであることを念頭に置いてください。

アルゴリズムは、ファイルの内容から9C616053E5などのハッシュを作成するために使用されます。アルゴリズムは常に同じ内容のために同じハッシュを出力します。つまり、ファイルを変更しない限り、ハッシュは変更されません。ハッシュはファイル名に追加されるため、StyleS.cssはStyle-9 C616053E5.CSSになる可能性があります。ハッシュはファイルの改訂を表します - したがって 'Revuved'。

キャッシュを無効にする必要なしに、サーバー上のファイルの各リビジョンを安全にキャッシュすることも、誤ったバージョンを提供する他のサードパーティのキャッシュについても心配していることを心配します。

04.あなたのサービスワーカーを紹介します

今すぐ私たちのサービス労働者を始めましょう。のルートにSW.JSというファイルを作成します。 SRC ディレクトリ。その後、ログを記録するためにこれら2つのイベントリスナーを追加します インストール そして 有効にする イベント：

 Self.AdDeventListener（ 'install'、（イベント）=＆gt; {
      console.log（イベント）;
    }）;）

    self.addeventListener（ 'activate'、（イベント）=＆gt; {
      console.log（イベント）;
    ;）;

the 自己ここでの変数は、サービスワーカーのグローバルな読み取り専用スコープを表します。それはちょっとしたことです窓 Webページ内のオブジェクト。

次に、index.htmlファイルを更新し、サービスワーカーをインストールするためのコマンドを追加する必要があります。クローズ直前にこのスクリプトを追加してください ＆lt; / body＆gt; 鬼ごっこ。労働者を登録して現在のステータスを記録します。

＆lt;スクリプト＆gt。
     （ 'ServiceWorker'のナビゲータの '）{
       Navigator.ServiceWorker.Register（ '/ sw.js'）
         .then（関数（reg）{
           if（reg.installing）{
             console.log（ 'swインストール'）;
           そうでなければ（reg.waiting）{
             console.log（ 'SW Waiting'）;
           }それ以外の場合（Reg.active）{
             console.log（ 'SW Activated'）。
           }
         }）。キャッチ（機能（エラー）{
           // 登録に失敗しました
           console.log（ '登録は' +エラーで失敗しました）。
         }）;）
     }
   ＆lt;＆script＆gt;

実行して開発サーバーを起動します NPMスタート そして最新のブラウザでページを開きます。それはそのDevToolsで良いサービスワーカーサポートを持っているのでGoogle Chromeを使用することをお勧めします。あなたはあなたのコンソールに記録された3つのことがあるのを見るべきです。のためのサービス労働者からの2つ インストール そして 有効にする イベント、もう1つは登録からのメッセージになります。

05.ワーカーを有効にします

私たちは私達の労働者に待機ステップをスキップして今有効にするように言うつもりです。 sw.jsファイルを開き、この行を内側に任意に追加します。 インストール イベントリスナー：

 self.skipwaiting（）;

さて、ワーカースクリプトを更新すると、インストール後すぐにページを制御します。これは、新しい労働者があなたの労働者の以前のバージョンによってロードされたかもしれないページの管理を行うことができることを心配する価値があるでしょう - それが問題を引き起こしたいのなら、あなたのアプリでこのオプションを使用しないでください。

これを確認することで、ページから移動してから戻ってください。あなたは見るべきです インストール そして 有効にする 新しい労働者がインストールされたときに、イベントが再び燃えます。

Chrome DevToolsには、リロードだけで労働者を更新できることを意味するのが役立つオプションがあります。 DevToolsを開き、[アプリケーション]タブに移動してから、左側の列から[サービスワーカー]を選択します。パネルの上部にあるチェックボックスは、リロードでアップデートされたカスタマイズボックスです。更新された労働者は更新時にインストールされ有効化されます。

06.変更を確認します

追加してこれを確認しましょう console.log（ 'foo'） イベントリスナーのいずれかで呼び出して、ページを更新します。私たちが更新されたときにコンソールのログインを見ることを期待していたので、これは私たちを捉えましたが、私たちが見ていたのは 'SW Activated'メッセージでした。 Reload On Reloadオプションの更新がチェックされていると、Chromeが2回更新されます。

これを確認するには、[コンソール設定]パネルに[ログ保護]チェックボックスをクリックして再度更新することで確認できます。インストールとアクティブ化されたイベントが 'foo'と一緒に、その後に「http：// localhost：3000 /」に移動して、ページが再ロードされ、その後最後の 'SW Activated'メッセージを表示します。

07.フェッチイベントを追跡します

別のリスナーを追加する時間。今回は追跡します フェッチ ページがCSSファイル、画像、さらにはAPI応答などのリソースをロードするたびに発生するイベント。キャッシュを開く、ページへのリクエスト応答を返し、次に背景 - 応答をキャッシュします。最初にオフにしてリスナーを追加して更新してみましょう。コンソールでは、多くの人が見えます フェッチ ログ

 Self.AdDeventListener（ 'fetch'、（イベント）=＆gt; {
 console.log（イベント）;
;）;

私たちのサーブモードはブラウザ同士を使用します。これはそれ自身のスクリプトをページに追加し、WebSocket要求を行います。あなたもこれらのためのフェッチを見るでしょうが、これらを無視したいです。私達はまた私達の独自のドメインからの要求をキャッシュしたいだけです。それでは、明示的に無視することを含む、不要な要求を無視するためにいくつかのことを追加しましょう。 / / インデックスパス：

 Self.AdDeventListener（ 'fetch'、（イベント）=＆gt; {
 //クロスドメインリクエストを無視してください
 if（！Event.Request.url.startswith（self.location.origin））{
   帰国;
 }
 // get requestsを無視します
 if（Event.Request.Method！== 'get'）{
   帰国;
 }
 //ブラウザ同期を無視します
 if（event.request.url.indexof（ 'browser-sync'）＆gt; -1）{
   帰国;
 }
 //キャッシュされているインデックスルートを防ぎます
 if（event.request.url ===（self.location.origin + '/'））{
   帰国;
 }
 //キャッシュされているindex.htmlを防ぎます
 if（event.request.url.endswith（ 'index.html'））{
   帰国;
 }
 console.log（イベント）;
;）;

これで、ログは多くのクリーナーであり、キャッシングを開始するのは安全です。

08.資産をキャッシュする

今度はこれらの回答をキャッシュし始めることができます。最初に私達は私達のキャッシュを名前に与える必要があります。私たちのと呼びましょう v1-資産 。この行をsw.jsファイルの上部に追加します。

 Const AssetsCacheName = 'v1  - アセット';

それから私たちはページに返されるものを制御できるように、FetchEventsをハイジャックする必要があります。イベントを使ってそれをすることができます応答方法。このメソッドは約束を受け取りますので、このコードを追加することができます。 console.log. ：

 //この約束チェーンで応答するためにフェッチを教えてください
 イベント。
   //キャッシュを開きます
   caches.open（AssetsCachename）
     ···（（キャッシュ）=＆gt; {
       //ネットワークへの要求を行います
       返品フェッチ（Event.Request）
         ···（（応答）=＆gt; {
           //レスポンスをキャッシュします
           cache.put（event.request、response.clone（））;
           //オリジナルの応答をページに返す
           返信応答
         }）;）
     ）
 ）;

これにより、元の応答をページに戻す前に、リクエストをネットワークに転送してから、レスポンスをキャッシュに保存します。

ここでは、このアプローチは実際には、ユーザーがページをロードする2回目までに応答をキャッシュしないことがわかります。初めては労働者をインストールしてアクティブにしますが、 フェッチ リスナーは準備ができています、すべてがすでに要求されています。

数回更新し、DevTools＆GTのキャッシュを確認してください。アプリケーションタブ。左側の列にあるキャッシュストレージツリーを展開し、すべてのストアドレスポンスを持つキャッシュを表示する必要があります。

09.キャッシュからサーブします

すべてがキャッシュされていますが、私たちは実際にはキャッシュを使用していません。今すぐフックしましょう。まず、キャッシュ内のリクエストの一致を検索し、存在する場合はそれを提供します。存在しない場合は、ネットワークを使用してから応答をキャッシュします。

//このチェーンで応答するためにフェッチを教えてください
 イベント。
   //キャッシュを開きます
   caches.open（AssetsCachename）
     ···（（キャッシュ）=＆gt; {
       //キャッシュ内の一致要求を探します
       cache.matchを返す（Event.Request）
         ···（（一致）= gt; {
           //一致が見つかった場合は、キャッシュされたバージョンを最初に返します。
           if（一致）{
             返品が一致しました。
           }
           //そうでない場合はネットワークに進みます
           返品フェッチ（Event.Request）
             ···（（応答）=＆gt; {
               //レスポンスをキャッシュします
               cache.put（event.request、response.clone（））;
               //オリジナルの応答をページに返す
               返信応答
             }）;）
         }）;）
     ）
）;

ファイルを保存して更新します。 DevTools＆GTをチェックしてください。ネットワークタブと、各静的資産のサイズ列にリストされている（Serviceworkerから）表示されます。

ホウ、私たちはやった。そのような少量のコードのために、理解するのは多くあります。すべての資産がキャッシュされた後にページを更新するのがわかりますが、スロットル接続（DevTools＆GT; Network Tab）で迅速な（不在的な）ロード時間を実行しましょう。

サービス労働者がなければ、シミュレートされた高速3Gネットワークの上にロードすると、すべてがロードされるまでほぼ30秒かかります。サービスワーカーでは、同じ絞り接続ではなくキャッシュからロードすると、もう1秒かかります。

オフラインボックスをオンにして更新し、APIから予測データを取得することはできませんが、ページが接続なしでロードされていることもわかります。 2ページではこれに戻り、API応答のキャッシュ方法を学びます。

次のページ：サービスワーカーを使用してオンラインアクセスを提供する

現在のページ： Page 1：ロード速いロード

次のページ Page 2：オフラインアクセスの追加

あなたのアプリをサービス労働者とオフラインで作業させる

サービス労働者は何ですか？

サービスワーカーライフサイクル

01.デモAppを複製します

02.あなたのAPIキーを入手してください

03.開発サーバーを起動します

04.あなたのサービスワーカーを紹介します

05.ワーカーを有効にします

06.変更を確認します

07.フェッチイベントを追跡します

08.資産をキャッシュする

09.キャッシュからサーブします

操作方法 - 最も人気のある記事

How to make a photo collage in Photoshop CC

アクセス可能なWebフォームを作成する方法

Photoshopのミキサーブラシをマスター

ARアプリの構築方法

スライドアウトメニューを作成する

あなたのコンテンツとのGoogleランキングに影響を与える方法

WordPressのWebサイトの多言語を作る方法

3Dレンダリングの動きを捉える方法

カテゴリ