JavaScript ServiceWorker APIの利点は、Web開発者がキャッシュを簡単に制御できることです。 ETAGSなどのテクノロジーを使用することもキャッシュを制御するテクノロジーですが、JavaScriptを使用すると、プログラムがより強力かつ自由にキャッシュを制御できるようになります。もちろん、ストロングにはその利点と欠点があります - あなたはケア後の治療を行う必要があります。いわゆるケア後治療は、キャッシュをクリーンアップすることです。
キャッシュオブジェクトの作成方法を見て、キャッシュに要求キャッシュデータを追加し、キャッシュからリクエストキャッシュデータを削除し、最後にキャッシュを完全に削除する方法を見てみましょう。
キャッシュオブジェクトキャッシュAPIに対するブラウザのサポートを決定します
ブラウザがキャッシュAPIをサポートしているかどうかを確認してください...
if（window in Window）{//サポート！}…ウィンドウにキャッシュオブジェクトがあるかどうかを確認してください。
キャッシュオブジェクトを作成します
キャッシュオブジェクトを作成する方法は、caches.open（）を使用し、キャッシュ名に渡すことです。
caches.open（ 'test-cache'）。then（function（cache）{//キャッシュが作成され、今すぐアクセスできます}）;このcaches.openメソッドは約束を返し、その中のキャッシュオブジェクトは新しく作成されます。以前に作成された場合、再作成されません。
キャッシュされたデータを追加します
このタイプのキャッシュでは、リクエストオブジェクトの配列と考えることができ、リクエスト要求によって取得された応答データはキー値によってキャッシュオブジェクトに保存されます。キャッシュにデータを追加するには、追加と追加方法が2つあります。これらの2つの方法を使用して、要求のアドレスをキャッシュするように追加します。リクエストオブジェクトの紹介については、Fetch APIの記事を参照できます。
Addallメソッドを使用して、バッチにキャッシュリクエストを追加します。
caches.open（ 'test-cache'）。then（function（cache）{cache.addall（['/'、 '/images/logo.png']）.then（function（）{// cached！}）;}）;このAddallメソッドは、アドレス配列をパラメーターとして受け入れることができ、これらの要求アドレスの応答データはキャッシュオブジェクトでキャッシュされます。 Addallは約束を返します。単一のアドレスを追加するには、追加方法を使用します。
caches.open（ 'test-cache'）。then（function（cache）{cache.add（ '/page/1'）; // "/page/1"アドレスが要求され、応答データがキャッシュされます。}）;add（）メソッドは、カスタムリクエストを受け入れることもできます。
caches.open（ 'test-cache'）。then（function（cache）{cache.add（new request（ '/page/1'、{/* request parameter*/}）;}）;add（）メソッドに非常に似ています。 Put（）メソッドは、リクエストアドレスを追加して、その応答データを同時に追加することもできます。
fetch（ '/page/1'）。then（function（response）{return caches.open（ 'test-cache'）。then（function（cache）{return cache.put（ '/page/1'、response）;}）;}）;キャッシュされたデータにアクセスします
変更された要求データを表示するには、キャッシュオブジェクトのkeys（）メソッドを使用して、すべてのキャッシュリクエストオブジェクトを配列形式で取得できます。
caches.open（ 'test-cache'）。then（function（cache）{cache.keys（）。then（console.log（cachedRequests）; // [request、request]}）;}）;/*request {bodyuse：bodyuse：false credentys： "omit： 「フォロー」リファラー： "" url： "http://www.webhek.com/images/logo.png" }*/キャッシュリクエストリクエストの応答コンテンツを表示する場合は、cache.match（）またはcache.matchall（）メソッドを使用できます。
caches.open（ 'test-cache'）。then（function（cache）{cache.match（ '/page/1'）。then（function（matchedResponse）;}）;/*respons {body：（...）、bodyused：fals：ok： "ok：" " "https://www.webhek.com/page/1" }*/応答オブジェクトの使用と詳細の詳細については、Fetch APIの記事を参照できます。
キャッシュ内のデータを削除します
キャッシュからデータを削除すると、キャッシュオブジェクトでdelete（）メソッドを使用できます。
caches.open（ 'test-cache'）。then（function（cache）{cache.delete（ '/page/1'）;}）;このようにして、キャッシュに /1ページ /1要求データはありません。
既存のキャッシュでキャッシュ名を取得します
キャッシュに既に存在するキャッシュデータの名前を取得するには、caches.keys（）メソッドを使用する必要があります。
caches.keys（）。then（function（cachekeys）{console.log（cachekeys）; // ex：["test-cache"]}）;window.caches.keys（）は約束を返します。
キャッシュオブジェクトを削除します
キャッシュされたオブジェクトを削除するには、キャッシュされたキー名のみが必要です。
caches.delete（ 'test-cache'）。
古いキャッシュされたデータを大量に削除する方法：
// `cache_name`は新しいキャッシュの名前であると仮定します}}））;}）;
サービスワーカーの専門家になりたいですか？上記のコードはあなたのライブラリに置く価値があります。 FirefoxとGoogle Chromeサポートサービスワーカーであり、より多くのWebサイトやアプリがこのキャッシングテクノロジーを使用して、すぐにランニング速度を向上させると思います。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。