1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

PWA: Workbox Core 和訳

Last updated at Posted at 2019-03-04

#Workbox Core
参照元ページ: https://developers.google.com/web/tools/workbox/modules/workbox-core

##Workbox Coreとは?

(すべてのファイルや機能が入った)単一のファイルをダウンロードせすに、ディベロッパーが必要なモジュールファイルのみを選んで使用できることを目的にWorkboxは作られました。

しかしながらモジュール間に重複した部分があります。例えば、各モジュールはコンソールを操ったり、意味のあるエラーやネットワーク、キャッシュを利用します。それぞれのモジュールが行なっている共通のロジックの実装を避けるために、workbox-coreはコードの共有化を行なっています。

workbox-coreはディベロッパーに機能を提供しますが、(ログやキャッシュのみではなく)ディベロッパーのためというよりむしろ各々のモジュールに対して内部で利用できるロジックを提供しています。

デフォルトのキャッシュの名前を確認し変更する

Workboxはworkbox.core.cacheNames経由でキャッシュを定義します。


console.log(workbox.core.cacheNames.precache);

console.log(workbox.core.cacheNames.runtime);

console.log(workbox.core.cacheNames.googleAnalytics);

これらのキャッシュ名はprefix(接頭辞)名前suffix(接尾辞)のパーツで組み立てられます。名前はキャッシュの利用に基づいて変わります。

<prefix>-<cache id (precache | runtime | googleAnalytics)>-<suffix>

デフォルトの命名規則はsetCacheNameDetails()に渡す値で変更可能です。


workbox.core.setCacheNameDetails({
  prefix: 'my-app',
  suffix: 'v1',
  precache: 'install-time',
  runtime: 'run-time',
  googleAnalytics: 'ga'
});

// Will print 'my-app-install-time-v1'
console.log(workbox.core.cacheName.precache)

// Will print 'my-app-run-time-v1'
console.log(workbox.core.cacheName.runtime)

// Will print 'my-app-ga-v1'
console.log(workbox.core.cacheName.googleAnalytics)

もしあなたがWorkboxを複数のプロジェクトで使っており、それぞれのプロジェクトが同じlocalhostを使用している場合、prefixとsuffixを使用することでプロジェクト間のキャッシュのコンフリクトを回避することができます。

Skip Waiting and Clients Claim

新しいサービスワーカーを配信して、即座にウェブページをそのサービスワーカーのコントロール下におきたい場合があります。(それはデフォルトのサービスワーカーのライフサイクルをスキップすることになります)

下記のように書くことでworkbox-coreが、ライフサイクルを簡単にスキップさせてくれます。


workbox.core.skipWaiting();
workbox.core.clientsClaim();
1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?