ワークボックスとサービスワーカーを介したプログレッシブWebアプリケーション入門

19734 ワード
workbox tutorial pwa テキストリンク
執筆Nic Raboy ✏️
それは、モバイルフレンドリーなユーザーエクスペリエンス(UX)、ネイティブデスクトップとモバイルAPIの統合、または単にインターネット接続せずにアプリケーションを使用できるようになっているかどうか、プログレッシブWebアプリケーションを構成する多くのものがあります.
このチュートリアルでは、Webアプリケーションをオフラインで動作するサービスワーカーズを使用してWorkbox , ツールはかなり簡単にキャッシュを作成するように設計.

以前にサービスワーカーに公開されたことがない場合は、ブラウザがバックグラウンドで実行され、Webページやユーザーインターフェイスを必要としない機能を実装できます.問題は、彼らのAPIが使用するのが難しくないとしても、サービス労働者がデザインするトリッキーでありえるということです.キャッシュの有効期限、更新、およびその他の多くのシナリオを考慮する必要があるためです.これがフレームワークのような理由ですWorkbox 開発にはこのようなメリットがある.
あなたがHugo開発者であるならば、私自身のように、あなたは私がそれを覚えているかもしれませんwrote a tutorial それは静的に生成されたウェブサイトのPWAを友好的にする方法を示しました.これは素晴らしいですが、今回はプロセスをもう少しジェネリックにしたいので、ヒューゴシナリオの外で使用できます.

ウェブサイトを構築する


シンプルなウェブサイトを作成し、何が起こっているのかを理解し、なぜサービスワーカーが我々のアプリケーションをPWAと呼ぶことができる理由だけでなく、私たちを助けてくれます.
ほとんどすべてのウェブサイトは、HTML、CSS、およびJavaScriptファイルを持っているので、プロジェクトをちょうどそれで始めましょう.お使いのコンピュータのどこか、新しいフォルダをインデックスを作成します.HTMLファイル、スタイル.CSSファイルとスクリプト.jsファイル.
スクリプト内で.jsファイルを次のコードを追加します.
console.log("HELLO WORLD!");
確かにあなたが今まで見た中で最も複雑なスクリプトではないが、それは時間が来るとき私たちのポイントを証明します.我々は、我々が我々のアプリケーションの中で別々のファイルでJavaScriptを持っていると言うことができたいです.同様に、次のプロジェクトのスタイルを追加します.CSSファイル:
body { margin: 0; }
h1 { margin: 0; }
再び、複雑さは、この特定のチュートリアルの目標ではありません.目標は、サービスワーカーがどのように我々のプロジェクトに価値を加えて、どのようにそれらを含めるべきかを示すことです.スクリプトとスタイルを含むHTMLファイルを作成することで、この非常に基本的なプロジェクトを終えましょう.プロジェクトのインデックスを開きます.HTMLファイルと以下を含みます.
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div>
            <h1>Hello World!</h1>
        </div>
        <script src="scripts.js"></script>
    </body>
</html>
我々が望むならば、我々は我々のHTMLファイルを開くことができて、完全に許容できるウェブサイトを見ることができました.早めに設定するには、ファイルシステムからファイルを開いてアクションを見ることはできません.我々は、Pythonやキャディーのようなツールを使用してプロジェクトを提供する必要がありますか、またはホスティングプロバイダに我々のアプリケーションを公開します.
MacOSやLinuxを使用している場合、またはWindowsコンピュータにPythonをインストールしている場合は、次のように実行できます.
python -m SimpleHTTPServer
上記のコマンドはhttp://localhost:8000/index.html この例は完璧です.
私たちが提供されている単純なWebアプリケーションを持っているので、Google Chromeを使用していると仮定して、Chromeの検査官を開きましょう.ネットワークタブに移動すると、次のようなイメージが表示されます.
ネットワークインスペクタ
特に大きくはなく、特に遅いわけではないが、HTML、CSS、JavaScriptリソースのそれぞれをフェッチしなければならなかった.これらのリソースは、すべてのユーザによって行われるリクエストごとに取得されます.あなたが現実的な生産ウェブアプリケーションを見ているならば、これはダウンロードのMBと時間の秒を加えることができました.
さらに、あなたのクロム検査官の監査タブに行くことによって物事を評価することができます.
監査情報監査情報
あなたは、アプリケーションが進行中のWebアプリケーションとして評価されていないことを見つけるでしょう、そしてときにチェックアウトすると、それは物事を欠落している、オフライン機能はそれらの1つです.我々はあまりにも100 %のPWA評価アプリケーションを構築するには興味がない、我々はサービスワーカーとオフラインの側面について気にしないでください.これは、我々のサイトがPWAであると人々に話すことができることを越えて助けます.
では、ワークボックス形式のサービスワーカーでキャッシュ戦略を追加することから始めましょう.

ワークボックスによるキャッシュ戦略の定義


ワークボックスは、多くの方法で使用することができますが、最初にサービスの労働者にランタイムの交換です.どのように動作するかを確認するには、SWを作りましょう.JSファイルは、我々のサービスワーカーを代表します.
importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");

workbox.routing.registerRoute(
    /\.(?:css|js)$/,
    new workbox.strategies.StaleWhileRevalidate({
        "cacheName": "assets",
        plugins: [
            new workbox.expiration.Plugin({
                maxEntries: 1000,
                maxAgeSeconds: 31536000
            })
        ]
    })
);

workbox.routing.registerRoute(
    /\.(?:png|jpg|jpeg|gif|bmp|webp|svg|ico)$/,
    new workbox.strategies.CacheFirst({
        "cacheName": "images",
        plugins: [
            new workbox.expiration.Plugin({
                maxEntries: 1000,
                maxAgeSeconds: 31536000
            })
        ]
    })
);
上記JavaScriptは、ワークボックスで作成されたサービスワーカーを表します.上記のコードで起こっている2つの主要なことがあり、それはあなたのビジネス要件に応じて変更することができます.つのことは、ファイルに応じて2つの異なるキャッシュ戦略です.
JavaScriptとCSSファイルの場合StaleWhileRevalidate 戦略を使用します.これは、インターネットが利用できない限り、資産が常に得られて、キャッシュされることを意味します.のためにCacheFirst 戦略は、画像を使用して、キャッシュされたバージョンは常にキャッシュされたバージョンが期限切れになるまで使用されるか、手動でキャッシュからクリアされます.
もう一度、あなたのビジネスニーズのための戦略を選択する必要があります.以上StaleWhileRevalidate and CacheFirst 戦略が存在する.
このサービスワーカーを起動するには、インデックスを編集できます.以下に示すHTMLファイル
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div>
            <h1>Hello World!</h1>
        </div>
        <script src="scripts.js"></script>
        <script>
            if ("serviceWorker" in navigator) {
                window.addEventListener("load", () => {
                    navigator.serviceWorker.register("sw.js").then(swReg => { }).catch(err => {
                        console.error('Service Worker Error', err);
                    });
                });
            }
        </script>
    </body>
</html>
swに注意してください.JSファイルは現在、Webアプリケーションに登録されています.我々はブラウザを再読み込みし、Chromeの検査官のネットワークタブに行った場合、物事はわずかに異なるはずです.
サービス従事者
今回、JavaScriptとCSSファイルはサービスワーカーを通してキャッシュからロードされています.リクエスト時間の節約は、この例では明らかではないかもしれませんが、サイズのMBに近いかもしれないファイルになると、キャッシュからの読み込みは、オフラインでの互換性に加えて、アプリケーションを大幅にスピードアップします.
では、どのように我々はこのプロセスを改善することができますか?

ワークボックス構築戦略による事前キャッシング資産


ワークボックスを使用することは特に困難ではありませんが、我々はプロセスを改善するだけでなく、機能を改善するためにいくつかの変更を加えることができます.
ウェブサイトが最初にロードされるとき、我々の資源をキャッシュしたいと言いましょう.事前にキャッシュする戦略を考え出す必要がある.これを行うには、ノードで実行できるWorkboxのビルド構成を使用します.のJSまたはexample of Hugo , じっとして.
先に行くと、新しい発電機を作成します.プロジェクト内のJSファイル.オープンする前に、プロジェクトをノードを使用して設定する必要があります.これは、私たちの依存関係を得ることを意味します.ノードがあると仮定します.JSがインストールされ、次のように実行されます.
npm init -y
npm install workbox-build --save-dev
明らかにすると、これらは開発依存です.Webアプリケーションではノードを使用する必要はありません.js
依存関係を使用してプロジェクトのジェネレータを開きます.JSファイルと以下を含みます.
const workbox = require("workbox-build");

workbox.generateSW({
    cacheId: "example",
    globDirectory: "./",
    globPatterns: [
        "**/*.{css,js}"
    ],
    globIgnores: [
        "node_modules/**/*",
        "**/gulpfile.js",
        "**/sw.js"
    ],
    swDest: "./sw.js",
    runtimeCaching: [
        {
            urlPattern: /\.(?:html|htm|xml)$/,
            handler: "staleWhileRevalidate",
            options: {
                cacheName: "markup",
                expiration: {
                    maxAgeSeconds: 60 * 60 * 24 * 7,
                },
            },
        }
    ],
});
それで、このジェネレータスクリプトで何が起こっているかを理解しましょうruntimeCaching パート.
にruntimeCaching 任意のファイルタイプに対する戦略を定義しています.この場合、我々はHTMLまたはXMLファイルのための戦略を定義しています.JavaScriptやCSSなどの資産を実行時にキャッシュするのではなく、事前にキャッシュするようにしています.リソースをプリキャッシュするには、globPatterns 配列.我々の開発依存関係をキャッシュするリスクを除去するには、リソースをglobIgnores 配列.
事前のキャッシングは注意して使用する必要がありますので、すぐにアプリケーションの負荷として発生します.あなたがあまりにも前または非常に大きなファイルをプリキャッシュしようとしている場合は、ユーザーエクスペリエンスはひどいでしょう.その代わりに、あなたのユーザーに最高の経験を与える資源だけをあらかじめキャッシュしてください.
あなたが実行するならばnode generator.js それはSWを加えるべきです.プロジェクトへのJSファイル.このファイルは手動で作成されたサービスワーカーに似ています.

結論


Webアプリケーションのパフォーマンスを向上させるだけでなく、オフラインで使用できるようにWebアプリケーションリソースをキャッシュする方法を見ました.サービスワーカーは、完全に準拠したプログレッシブWebアプリケーション(PWA)を開発するための最初のステップであり、ワークボックスのようなフレームワークは非常に簡単になります.
我々はプッシュ通知のようなネイティブAPIを使用しているという意味でPWAを作らなかったが、我々はまだGoogle Chromeのようなブラウザが認識するPWAを構築するための作業を行った.
このポストで何か悪いことを見ている?あなたは正しいバージョンを見つけることができますhere .

プラグイン：ログオン、WebアプリのDVR


畝

畝
LogRocket あなたが自分のブラウザで起こったかのように問題を再生することができるフロントエンドのログツールです.代わりに、エラーが発生したり、スクリーンショットやログのダンプのユーザーを求めるのを推測するのではなく、LogRocketすぐに何が間違って理解するためにセッションをリプレイすることができます.これは、フレームワークに関係なく、任意のアプリケーションを完全に動作し、RedUx、Vuex、および@ NGRX/ストアからの追加のコンテキストを記録するプラグインがあります.
畝
ログのReduxのアクションと状態に加えて、ログログオンレコードコンソールログ、JavaScriptのエラー、StackTrart、ヘッダー/本文、ブラウザのメタデータ、およびカスタムログを使用してネットワークのリクエスト/応答.また、DOMは、最も複雑な単一ページのアプリのピクセル完璧なビデオを再現、ページ上のHTMLとCSSを記録するために楽器を計る.
畝
Try it for free .
郵便Getting started with progressive web applications through Workbox and service workers 最初に現れたLogRocket Blog .
無効な領域変数を参照するとどうなりますか?
Gitコンパイルインストール、FAQレコード(Centos 6)