タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
アクセスするとメガ単位でたくさんの画像を読み込むサービスがありまして・・。 リファクタによって、動的に必要な画像だけを読み込むように改修はしたけど、それでも回遊するとサイズがすごいことになる。 これをなんとかするならServiceWorkerしかない！というわけで。 Workbox 最初は0から手書きしようかと思ったけど、ちょっとやり始めただけであれこれ面倒なことがわかったので、先人に頼ることにした。 Workbox | Google Developers ご丁寧に、こういうことがやりたいんじゃろ？っていうのがガイドの中にあって、そうそうこれこれ〜って感じだった。 事前キャッシュではなく、あくまでランタイムでのキャッシュがしたかったので、これ。 import { CacheableResponsePlugin } from "workbox-cacheable-response"; i
昨今の世界的な情勢を受けて、GoogleはWebサイトが常に利用可能であるためのガイダンスを公開しました。「Availability, reliability, resilience, and stability」のセクションでは主にファイルの配信について書かれており、サイトへのトラフィックが増えることによって起こりうる問題に備えるための手法を見ることができます。そのうちの1つがService Workerを利用してオフライン対応をすることです。オフライン対応をするには必要なファイルを適切にキャッシュすることが求められますが、Googleはその手段の1つとしてWorkboxの利用を推奨しています。 Workboxとは WorkboxとはService Workerを手軽に扱うためのツールキットです。BackgroundSyncやGoogle Analytics用のモジュールが多数用意されて
目標：ServiceWorkerにキャッシュを保持して、とりあえずオフラインでも表示できるようにする。 PWAやってみたい ページスピードあげたい はじめに そもそもサービスワーカーって何!?という方はこちらの記事が分かりやすかったです。 参考：Service Workerってなんなのよ (Service Workerのえほん) 実装するにあたりWorkboxというGoogleのライブラリを使います。PWAのライブラリというよりはサービスワーカーの設定が簡単にできるライブラリという認識です。（※そのためホーム画面追加やプッシュ通知はこのライブラリには含まれません。多分。） 今回は最も簡単な方法をご説明したいので、GulpやWorkboxCLI等のビルトツールは使いません。キャッシュしたい（オフライン対応させたい）リソースを地道に書いていきます。（別の記事で書きます） Servicework
JSer.info #516 - Service WorkerライブラリであるWorkbox 6.0.0がリリースされました。 Release Workbox v6.0.0 · GoogleChrome/workbox workbox-webpack-pluginのwebpack 5の対応が含まれています。 大きめな変更としてworkbox-strategiesのStrategy/Pluginの仕組みの変更がされています。 カスタムStrategyを作る場合はStrategyというbase classを継承して書くようになり、これに合わせてライフサイクルメソッドなどが追加されています。 またWorkboxのレシピをライブラリとして利用できるworkbox-recipesパッケージが追加されています。 Workbox Recipes | Google Developers その他には、W
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Workboxで画像をランタイムでキャッシュする - console.lealog();
WebpackとWorkboxでらくらくオフライン対応 | フロントエンドBlog | ミツエーリンクス
WorkboxでPWAを導入する方法～オフライン対応編～ - Qiita
2020-12-01のJS: Workbox v6.0.0、TS auto mock、TypeScriptToLua
totalnewsjp.com
anna14.lo.gob.jp
totalnewsjp.com
bear-snow.com
encount.press
projectofnapskint.com