Extending Workbox: Custom strategies and plugins Google Chrome Developers Japanese English

Extending Workbox: Custom strategies and pluginsYouTube↗ IA↗(long shot)
Science & Technology 4.5K views 83 likes 5 dislikes 18 Dec 2020

Chrome for Developers 814K subscribers N/A YouTube↗

Click to Play Video

（明るい音楽）

- 皆さんこんにちは

- [Instructor] Hi folks,

今回ご紹介するのは

we are going to take a quick tour of

Workboxを拡張するいくつかの方法です

some ways of extending Workbox.

最終的にカスタム戦略とプラグインを書き

By the end, you'll be writing your own strategies

できれば世界と共有していただきたいです

and plugins and hopefully sharing them with the world.

ところで Workboxとは何でしょうか

But first what's Workbox?

初めて聞くという方は

If you've never heard of it before

リンク先のドキュメントを読んでから

you could follow that link to the docs,

このビデオをご覧になると良いでしょう

and then come back to this video.

端的に言えば Workboxとは一般的なサービスワーカーの

At its core Workbox is a set of libraries

キャッシュシナリオを支援するライブラリのセットです

to help with common service worker caching scenarios.

以前Workboxについてお話したときは

And when we've talked about workbox in the past,

一般的な処理パターンに重点を置いていました

the emphasis has been on common scenarios

ほとんどのデベロッパーは Workboxがすでに提供している戦略で

for most developers the strategies that Workbox already

必要なキャッシュの処理ができるからです

provides will handle your caching needs.

Workboxにはすぐに使える戦略が含まれています

Workbox includes ready to use strategies like

例えばstale-while- revalidateでは

stale-while-revalidate where a cached response is used,

キャッシュされた応答を使用してリクエストに即座に応答し

respond to requests immediately

一方でキャッシュも更新して

while the cache is also updated

次回は更新された状態にしておくことができます

so that's fresh the next time around

キャッシュにフォールバックする network-firstのような

Other common strategies like network-first

他の一般的な戦略もあります

falling back to the cache are available for use as well.

でもそれ以上のことはできないのでしょうか

But what if you wanted to go beyond these common scenarios?

ユースケースにもっと多くの矢印がある場合は？

What if your use case involves more arrows?

大丈夫です

I've got you covered.

一般的なキャッシュの処理を超えましょう

Let's go beyond the common caching scenarios

Workboxをカスタマイズすれば

and talk about customizing Workbox

あらゆるキャッシュのニーズに対応できます

to help with all your caching needs.

まずは独自のキャッシュ戦略の書き方を

First let's cover writing your own

説明します

custom caching strategies.

Workboxバージョン６では新しく Strategyという基底クラスが提供され

Workbox version six offers a new strategy based class

fetchやCache Storageなどの低レベルAPIよりも

that sits in front of lower level APIs like fetch

使いやすくなっています

and cache storage.

この基底クラスのStrategyを拡張して独自のロジックを

You can extend the strategy based class and then implement

_handle()メソッドに実装できます

your own logic in the underscore handle method.

すべての矢印を描き入れた図を見てみましょう

Let's go back to that diagram with all the arrows.

この図の戦略では同じURLに対して同時に送信された

This represents a strategy that can handle multiple

複数のリクエストを処理するため

simultaneous requests for the same URL

重複除去を行います

by de duplicating them.

次にレスポンスの単一のコピーを使用して

A copy of the response is then used to fulfill all

すべてのインフライトリクエストを実行し

the inflight requests,

使用帯域幅を節約します

saving bandwidth that would otherwise be wasted.

これだけのコードで

And here's all the code you need

このようなカスタム戦略を実装できます

to implement that custom strategy.

Just a quick note,

このコードでは同じURLに対するすべてのリクエストに

this code assumes that all requests for the same URL can be

同じレスポンスを返せば良いと想定しています

satisfied with the same response,

よくあるのは Cookieの場合や

which one always be the case of cookies

セッション状態の情報が関わる場合ですね

or a session state information comes into play.

後でこのコードへのリンクを書いておきます

I'll link to this code later,

ここで注目していただきたい点がいくつかあります

but there are a few things I wanted to call attention to.

このクラスではまず既存の戦略である NetworkFirstを拡張し

This class extends an existing strategy network first

追加の状態マッピングで

and adds in some additional state mapping,

インフライトリクエストを

the inflight requests

対応するresponsePromiseに追加しています

to their corresponding response promises.

_handle()メソッドをオーバーライドし

It overrides the underscore handle method,

すでに同じURLに対するインフライトリクエストがないかを

checking to see if there's already an inflight request for

確認します

ある場合この戦略では

If there is, the strategy

その以前のリクエストに対する

will wait until there’s

レスポンスがあるまで待ちます

a response for that earlier request.

しかし同じURLに対するインフライトリクエストが

But if there isn't already an inflight request

まだない場合は

for the same URL

親クラスの_handle()メソッドを呼び出して

our strategy just calls the underscore handle method on

レスポンスを取得し

its parent class to get a response

インフライトリクエストのマッピングに追加するだけです

and adds to the mapping of inflight requests

レスポンスを受信した後クリーンアップします

and cleans up after itself once the response is received.

必要なコードはこれだけです

And that's all the code you need.

もうひとつカスタム戦略の例を挙げましょう

Here's another example of a custom strategy.

Stale-while-revalidate に工夫を加えたものです

This is a twist on still while revalidate

ネットワークとキャッシュの両方を

where both the network and cache are

同時にチェックしてどちらが先に応答するかを

checked at the same time with a race to see,

チェックします

which will return to response first.

この戦略を実装するコードを

Let's take a quick walkthrough code

ざっと見てみましょう

that implements that strategy

このクラスでも基底クラスを拡張します

like before our class extends a base.

今回拡張するのは

In this case, we're extending

Workboxにより提供されるジェネリッククラスのStrategyです

a generic strategy class that Workbox provides.

これを出発点にすると良いのはネットワークとキャッシュを探す順番を

This is a good starting point when you need more control

細かく制御する必要がある場合です

over the sequence of network and cache look-ups

レスポンス生成ロジックはすべて _handle()メソッドに入れます

all of our response generation logic is in the underscore

このメソッドには２つの引数があります

handle method, which has passed two parameters,

ブラウザのリクエストとハンドラです

the browsers request, and then a handler parameter,

後者はStrategyHandlerクラスのインスタンスです

which is an instance of the strategy handler class.

これは必須ではありませんが

Although it's not required,

このように引数のhandlerを使用して

it's strongly recommended that you use the handler parameter

ネットワーク要求とキャッシュ操作を行うことを

to make network requests and interact with the cache

強くお勧めします

like we're doing here.

このハンドラメソッドでは自動的に

Those handler methods will automatically pick up

戦略用に構成したキャッシュ名を取得し

the cache name you've configured for the strategy,

プラグインのライフサイクルコールバックを呼び出します

as well as invoke the plugin lifecycle callbacks

これについては後で説明します

that we'll talk about in a bit,

StrategyHandlerインスタンスには４つのハンドラメソッドがあります

A strategy handler instance provides four handler methods.

fetchとcachePut

There are fetch and cacheput along with the two others

そして前のスライドで見た２つです

we saw on the previous slide.

Workboxの戦略クラスを作成するのは

Writing a Workbox strategy class is a great way to package

応答ロジックを再利用と共有が可能な形でパッケージ化する良い方法です

up response logic in a reusable and shareable form.

これらの戦略は既存の Workboxルーティングルールに

You can drop any of these strategies directly into

直接入れることができます

your existing Workbox routing rules.

適切に書かれた戦略では自動的に

And a properly written strategy will automatically work with

すべてのWorkboxプラグインが使えます

all Workbox plugins as well.

Workboxで提供される標準プラグインも同様です

This applies to the standard plugins that Workbox provides

キャッシュの有効期限を扱うプラグインなどがあります

like the one that handles cache expiration,

自分で書いたプラグインも使えます

but it also applies to plugins that you write yourself

Workboxを拡張するもうひとつの優れた方法が

because another great way to extend Workbox

独自のプラグインを作成することですから

is to write your own plugins.

では Workboxプラグインとは何でしょうか

So what is a Workbox plugin

独自に書くのはなぜでしょうか

and why would you write your own?

前に見た図に戻りましょう

Let's go back to the diagram we looked at before,

プラグインを追加してもこの図の流れは

adding in a plugin, doesn't fundamentally change

基本的に変わりませんが

the flow of this diagram,

リクエストの存続期間中の

but it allows you to add an extra code

重要なポイントで実行されるコードを

that'll be run at critical points

追加することができます

in the lifetime of a request.

例えばネットワーク要求が失敗したときや

Like when a network request fails

キャッシュのレスポンスが

or when a cache response

ページに返されるときなどです

is about to be returned to the page.

各プラグインが応答する

Each plugin responds to

ライフサイクルイベントは

one or more life cycle events,

戦略ハンドラがネットワークやキャッシュと

which are invoked when a strategy handler

やりとりするときに発生します

interacts with a network or cache.

既存のライフサイクルイベントのいくつかを

You'd see a list of a few of

リストにしたものがあります

the existing life cycle events here.

この情報があるウェブページへのリンクも

We'll link to a webpage

後で載せておきます

for this information later on as well.

Workboxバージョン６では戦略のライフサイクル内の

Workbox version six has a number of additional life cycle

各段階に対応してプラグインが反応する

events that plugins can react to

複数のライフサイクルイベントが

all corresponding to different stages

追加されました

in a strategy's life cycle.

このようなライフサイクルコールバックを組み合わせて

Let's combine a couple of those life cycle callbacks into

戦略がエラーレスポンスを生成するような場合にフォールバックを提供する

reusable plug-in that provides a fallback

再利用可能なプラグインを

whenever a strategy would otherwise

作成してみましょう

generate an error response.

このクラスには２つのライフサイクルコールバック

This class implements two lifecycle callbacks

fetchDidSuceedと handlerDidErrorを実装します

fetchDidSuceed and handlerDidError

これは任意の戦略クラスに追加できます

It can be added to any strategy class.

この戦略を実行した結果

And if running that strategy does not

「200 OK」のレスポンスがない場合は

result in a 200 OK response,

代わりにキャッシュからのバックアップレスポンスを使用します

I'll use a backup response from the cache instead.

このプラグインを

My colleague, Andrea talks more about

信頼できるウェブアクティビティ内で使用する方法については

using this plugin within a trusted web activity

Chrome Dev Summitでアンドレアがお話ししています

in his Chrome Dev summit talk

詳細はそちらをご覧ください

and you can watch for that for more details.

カスタムの戦略とプラグインについて詳しくなったところで

Now that you know more about custom strategies and plugins,

特定のユースケースでどちらを書くべきか

you might be wondering which one to write

悩む方もいるかもしれません

for a given use case

まずは必要なリクエストとレスポンスのフローを

I think a good rule of thumb is to sketch out a diagram of

図にしてみることをお勧めします

your desired request and response flow.

描いた図にこの矢印のような

If your diagram has a novel set of connections,

目新しい接続のセットがある場合は

like all these extra arrows, then that's a sign that

カスタム戦略が最善の解決策になるでしょう

a custom strategy is the best solution.

逆にできあがった図は標準の戦略と

Conversely, if your diagram ends up looking mostly like

大体同じだけれども

a standard strategy,

重要なポイントに追加のロジックが挿入される場合は

but with a few extra pieces of logic injected at key points,

カスタムプラグインを書くと良いでしょう

then you should probably write a custom plugin

どちらの方法でWorkboxをカスタマイズするにしても

Whichever approach to customizing Workbox you go with

今回の説明をきっかけに次のことをしていただけると嬉しいです

I hope this talk has inspired you to do the following.

独自の戦略とプラグインを作成し

Write your own strategies and plugins,

Workbox-strategyか Workbox-pluginのタグを付けて

and then release them on NPM tagged with Workbox-strategy

npmでリリースすること

or Workbox-plugin.

または自分の組織のメンバーと共有すること

Or just share them with the rest of your organization.

すべてのサンプルコードとイベントの詳細など

You can learn more, including a detailed look at all

もっと詳しく知りたい場合は

the sample code and events

web.dev/extending- workboxを参照してください

by visiting web.dev/extending-workbox.

ビデオをご覧くださってありがとうございました

Thanks to everyone for tuning in

さっそくWorkboxを拡張してみてください

Now go out there and extend Workbox

できたものを共有しましょう

and share what you build.

（明るい音楽）

Similar videos:

The web ahead
Chrome for Developers
5.3K views 105 likes 3 dislikes 21 Dec 202058% match

Connecting hardware devices to the web
Chrome for Developers
11.5K views 445 likes 12 dislikes 21 Dec 202058% match

Transitioning to modern JavaScript
Chrome for Developers
83.1K views 3.8K likes 72 dislikes 17 Dec 202056% match

Superpowers for next gen web apps: Machine learning
Chrome for Developers
65.1K views 1.9K likes 30 dislikes 15 Dec 202056% match

Canvas2D is getting an update
Chrome for Developers
13.9K views 783 likes 35 dislikes 22 Dec 202056% match

Chrome Dev Summit Adventure: How we built it
Chrome for Developers
4.4K views 131 likes 6 dislikes 14 Dec 202056% match

Updating the way we work
Chrome for Developers
16.5K views 200 likes 24 dislikes 16 Dec 202056% match

Patterns for privacy
Chrome for Developers
4.6K views 105 likes 10 dislikes 23 Dec 202055% match

Web development on Chrome OS (Chrome Dev Summit 2019)
Chrome for Developers
17.3K views 455 likes 25 dislikes 25 Nov 201946% match

Predictive prefetching for the Web (Chrome Dev Summit 2019)
Chrome for Developers
6.2K views 215 likes 2 dislikes 25 Nov 201946% match

Web bingo at Chrome Dev Summit '19
Chrome for Developers
3.5K views 133 likes 9 dislikes 22 Nov 201946% match

Facilitating payments on the web (Chrome Dev Summit 2019)
Chrome for Developers
2.5K views 86 likes 3 dislikes 22 Nov 201946% match

What’s new in Material Design for the web (Chrome Dev Summit 2019)
Chrome for Developers
38.1K views 915 likes 22 dislikes 22 Nov 201945% match

Chrome and the web in 2020
Chrome for Developers
54K views 552 likes 56 dislikes 09 Dec 202044% match

Chrome Dev Summit 2019 - Day 2 Livestream
Chrome for Developers
12.3K views 195 likes 7 dislikes 12 Nov 201944% match

Chrome Dev Summit 2019 - Day 1 Livestream
Chrome for Developers
21.8K views 461 likes 5 dislikes 11 Nov 201944% match

Day 1: Chrome Dev Summit 2020
Chrome for Developers
15.9K views 628 likes 8 dislikes 09 Dec 202044% match

Speed highlights (Chrome Dev Summit 2019)
Chrome for Developers
6.7K views 188 likes 5 dislikes 14 Nov 201943% match

Faster apps with JSON.parse (Chrome Dev Summit 2019)
Chrome for Developers
300.2K views 12.8K likes 0 dislikes 22 Nov 201943% match

You should focus — supporting different devices on the web (Chrome Dev Summit 2019)
Chrome for Developers
4K views 206 likes 6 dislikes 19 Nov 201943% match

The gift of giving up (Chrome Dev Summit 2019)
Chrome for Developers
4.6K views 167 likes 4 dislikes 16 Nov 201943% match

Chrome’s ecosystem collaboration (Chrome Dev Summit 2019)
Chrome for Developers
2.7K views 51 likes 5 dislikes 18 Nov 201942% match

PWAs and capability highlights (Chrome Dev Summit 2019)
Chrome for Developers
8.1K views 200 likes 5 dislikes 16 Nov 201942% match

Tools for fast Angular applications (Chrome Dev Summit 2019)
Chrome for Developers
8.8K views 328 likes 6 dislikes 22 Nov 201942% match

5 tips to make your PWA stand out (Chrome Dev Summit 2019)
Chrome for Developers
6.4K views 233 likes 5 dislikes 25 Nov 201942% match

Blending PWA into native environments (Chrome Dev Summit 2019)
Chrome for Developers
5.3K views 147 likes 8 dislikes 25 Nov 201942% match

WebP in its 10th year (Chrome Dev Summit 2019)
Chrome for Developers
5K views 187 likes 3 dislikes 19 Nov 201942% match

Building Faster, More Resilient Apps with Service Worker (Chrome Dev Summit 2018)
Chrome for Developers
8.2K views 144 likes 2 dislikes 12 Nov 201841% match

Hello dark mode, my old friend (Chrome Dev Summit 2019)
Chrome for Developers
24.5K views 824 likes 25 dislikes 22 Nov 201941% match

Ready player web: Building modern web games (Chrome Dev Summit 2019)
Chrome for Developers
13.5K views 412 likes 28 dislikes 17 Nov 201941% match

Settings Privacy About Contact Donate