FlutterWebのService Workerキャッシュ
FlutterWebで最新版のアプリをサーバーにアップロードしたにもかかわらず、ブラウザからアクセスすると古いバージョンのアプリが動作することがありました。これは一般的なウェブアプリでよく見られる「ブラウザのキャッシュ」問題かと思われましたが、興味深いことに、ページをリロードせずに再度サイトにアクセスすると、今度は正しく最新バージョンが実行されました。
通常、ブラウザのキャッシュによる古いコンテンツの表示は（強制）リロードで解決されることが多いです。しかし、このケースでは単にサイトを開き直すだけで最新版が表示されるという現象が起きました。つまり初回のアクセスと2回目で挙動が異なることを示しています。
原因
- FlutterWebはService Workerを利用してリソースをキャッシュしている（Service Workerキャッシュ）
- リソースとはアプリのソースをJavaScriptにコンパイルした
main.dart.jsファイル、プログラムの実行に必要な.jsファイル、アプリのアセットに含まれるフォントや画像など
- リソースとはアプリのソースをJavaScriptにコンパイルした
- Service Workerキャッシュを利用することによりロード時間の短縮などを図っている
- アップデート後の初回アクセスではService Workerキャッシュに保存されたmain.dart.jsが読み込まれる
- 同時に、Service Workerは非同期（バックグラウンド）で最新のmain.dart.jsを取得してキャッシュに保存する
- ただし既にブラウザ上に読み込まれたmain.dart.jsは更新されない
- 更新後の2回目以降のアクセスではキャッシュに保存済みの最新のmain.dart.jsが読み込まれる
ブラウザにおけるキャッシュ
- ブラウザキャッシュ
- ディスクキャッシュ、メモリキャッシュ
- HTTP Header(Cache-Controlなど）で制御できるが、最終的にはブラウザ実装依存
- リロードで消すのはこちら
- Service Workerキャッシュ
- APIを使って利用するCache Storageなど
Service Worker
Service Workerはブラウザ上で動作するワーカースレッドで、Webアプリケーションでのプッシュ通知やPWA(Progressive web apps)などで利用されます。
Service Workerの主要な機能として、ブラウザとサーバー間の間に割り込むProxyとしての振る舞いがあります、図にすると以下のような感じです（AIに描いてもらいました）。
FlutterWebではこの機能を利用してアプリケーションに必要なリソースをService Workerを経由してキャッシュしています。起動時の読み込みを高速化する狙いがあるようです。
FlutterWebではデバッグ実行とリリースビルドではWebの挙動に差があり、Service Workerの挙動を確認するにはflutter build webコマンドでビルドしたファイルをブラウザで表示します。Chromeの開発者ツールを起動してApplicationのタブから、メニューのService workersを選択すると起動状態が確認できます。以下のような表示になっていればService Wokerが起動しています。
Service Workerを使用していないサイトでは以下のような表示になります。
左側のメニューのCache Storageに表示される2つのflutter-app-で始まる項目がFlutterWebのService Workerによってキャッシュされた内容です。末尾に-manifestが付与されている方はキャッシュ対象のリソースのハッシュ値が記載されたファイルが管理されていてます、キャッシュを更新するか評価する際に利用しているようです。
もう一つの-cacheが付く方は実際にService Workerによってキャッシュされたファイルが管理されています、プレビューで中身を確認することもできます。
Service Workerにキャッシュを作成する処理はFlutterWebのビルド成果物に含まれるbuild/web/flutter_service_worker.jsに実装されています。
flutter_service_worker.js
flutter_service_worker.jsはFlutterWebにおけるService Workerのロジックが実装されたファイルです。
flutter_service_worker.js 出力例
'use strict';
const MANIFEST = 'flutter-app-manifest';
const TEMP = 'flutter-temp-cache';
const CACHE_NAME = 'flutter-app-cache';
const RESOURCES = {"flutter_bootstrap.js": "deb1a1a731423133f8b9468837e29c56",
"version.json": "5651fad194d365e81dff68c21810842f",
"index.html": "7885fdbe86babf4998be4dbb6ea0ee03",
"/": "7885fdbe86babf4998be4dbb6ea0ee03",
"main.dart.js": "39a84ef33242c74229debed90f39683f",
"flutter.js": "f393d3c16b631f36852323de8e583132",
"favicon.png": "5dcef449791fa27946b3d35ad8803796",
"icons/Icon-192.png": "ac9a721a12bbc803b44f645561ecb1e1",
"icons/Icon-maskable-192.png": "c457ef57daa1d16f64b27b786ec2ea3c",
"icons/Icon-maskable-512.png": "301a7604d45b3e739efc881eb04896ea",
"icons/Icon-512.png": "96e752610906ba2a93c65f8abe1645f1",
"manifest.json": "96ad07c57bb97f3f5da60e326a01818b",
"assets/AssetManifest.json": "2efbb41d7877d10aac9d091f58ccd7b9",
"assets/NOTICES": "151b0bacf84aaf6bbb1b0550962540f9",
"assets/FontManifest.json": "dc3d03800ccca4601324923c0b1d6d57",
"assets/AssetManifest.bin.json": "69a99f98c8b1fb8111c5fb961769fcd8",
"assets/packages/cupertino_icons/assets/CupertinoIcons.ttf": "e986ebe42ef785b27164c36a9abc7818",
"assets/shaders/ink_sparkle.frag": "ecc85a2e95f5e9f53123dcaf8cb9b6ce",
"assets/AssetManifest.bin": "693635b5258fe5f1cda720cf224f158c",
"assets/fonts/MaterialIcons-Regular.otf": "8ea08ea2444cc58ec5807fd7669e488f",
"canvaskit/skwasm.js": "694fda5704053957c2594de355805228",
"canvaskit/skwasm.js.symbols": "262f4827a1317abb59d71d6c587a93e2",
"canvaskit/canvaskit.js.symbols": "48c83a2ce573d9692e8d970e288d75f7",
"canvaskit/skwasm.wasm": "9f0c0c02b82a910d12ce0543ec130e60",
"canvaskit/chromium/canvaskit.js.symbols": "a012ed99ccba193cf96bb2643003f6fc",
"canvaskit/chromium/canvaskit.js": "671c6b4f8fcc199dcc551c7bb125f239",
"canvaskit/chromium/canvaskit.wasm": "b1ac05b29c127d86df4bcfbf50dd902a",
"canvaskit/canvaskit.js": "66177750aff65a66cb07bb44b8c6422b",
"canvaskit/canvaskit.wasm": "1f237a213d7370cf95f443d896176460",
"canvaskit/skwasm.worker.js": "89990e8c92bcb123999aa81f7e203b1c"};
// The application shell files that are downloaded before a service worker can
// start.
const CORE = ["main.dart.js",
"index.html",
"flutter_bootstrap.js",
"assets/AssetManifest.bin.json",
"assets/FontManifest.json"];
// During install, the TEMP cache is populated with the application shell files.
self.addEventListener("install", (event) => {
self.skipWaiting();
return event.waitUntil(
caches.open(TEMP).then((cache) => {
return cache.addAll(
CORE.map((value) => new Request(value, {'cache': 'reload'})));
})
);
});
// During activate, the cache is populated with the temp files downloaded in
// install. If this service worker is upgrading from one with a saved
// MANIFEST, then use this to retain unchanged resource files.
self.addEventListener("activate", function(event) {
return event.waitUntil(async function() {
try {
var contentCache = await caches.open(CACHE_NAME);
var tempCache = await caches.open(TEMP);
var manifestCache = await caches.open(MANIFEST);
var manifest = await manifestCache.match('manifest');
// When there is no prior manifest, clear the entire cache.
if (!manifest) {
await caches.delete(CACHE_NAME);
contentCache = await caches.open(CACHE_NAME);
for (var request of await tempCache.keys()) {
var response = await tempCache.match(request);
await contentCache.put(request, response);
}
await caches.delete(TEMP);
// Save the manifest to make future upgrades efficient.
await manifestCache.put('manifest', new Response(JSON.stringify(RESOURCES)));
// Claim client to enable caching on first launch
self.clients.claim();
return;
}
var oldManifest = await manifest.json();
var origin = self.location.origin;
for (var request of await contentCache.keys()) {
var key = request.url.substring(origin.length + 1);
if (key == "") {
key = "/";
}
// If a resource from the old manifest is not in the new cache, or if
// the MD5 sum has changed, delete it. Otherwise the resource is left
// in the cache and can be reused by the new service worker.
if (!RESOURCES[key] || RESOURCES[key] != oldManifest[key]) {
await contentCache.delete(request);
}
}
// Populate the cache with the app shell TEMP files, potentially overwriting
// cache files preserved above.
for (var request of await tempCache.keys()) {
var response = await tempCache.match(request);
await contentCache.put(request, response);
}
await caches.delete(TEMP);
// Save the manifest to make future upgrades efficient.
await manifestCache.put('manifest', new Response(JSON.stringify(RESOURCES)));
// Claim client to enable caching on first launch
self.clients.claim();
return;
} catch (err) {
// On an unhandled exception the state of the cache cannot be guaranteed.
console.error('Failed to upgrade service worker: ' + err);
await caches.delete(CACHE_NAME);
await caches.delete(TEMP);
await caches.delete(MANIFEST);
}
}());
});
// The fetch handler redirects requests for RESOURCE files to the service
// worker cache.
self.addEventListener("fetch", (event) => {
if (event.request.method !== 'GET') {
return;
}
var origin = self.location.origin;
var key = event.request.url.substring(origin.length + 1);
// Redirect URLs to the index.html
if (key.indexOf('?v=') != -1) {
key = key.split('?v=')[0];
}
if (event.request.url == origin || event.request.url.startsWith(origin + '/#') || key == '') {
key = '/';
}
// If the URL is not the RESOURCE list then return to signal that the
// browser should take over.
if (!RESOURCES[key]) {
return;
}
// If the URL is the index.html, perform an online-first request.
if (key == '/') {
return onlineFirst(event);
}
event.respondWith(caches.open(CACHE_NAME)
.then((cache) => {
return cache.match(event.request).then((response) => {
// Either respond with the cached resource, or perform a fetch and
// lazily populate the cache only if the resource was successfully fetched.
return response || fetch(event.request).then((response) => {
if (response && Boolean(response.ok)) {
cache.put(event.request, response.clone());
}
return response;
});
})
})
);
});
self.addEventListener('message', (event) => {
// SkipWaiting can be used to immediately activate a waiting service worker.
// This will also require a page refresh triggered by the main worker.
if (event.data === 'skipWaiting') {
self.skipWaiting();
return;
}
if (event.data === 'downloadOffline') {
downloadOffline();
return;
}
});
// Download offline will check the RESOURCES for all files not in the cache
// and populate them.
async function downloadOffline() {
var resources = [];
var contentCache = await caches.open(CACHE_NAME);
var currentContent = {};
for (var request of await contentCache.keys()) {
var key = request.url.substring(origin.length + 1);
if (key == "") {
key = "/";
}
currentContent[key] = true;
}
for (var resourceKey of Object.keys(RESOURCES)) {
if (!currentContent[resourceKey]) {
resources.push(resourceKey);
}
}
return contentCache.addAll(resources);
}
// Attempt to download the resource online before falling back to
// the offline cache.
function onlineFirst(event) {
return event.respondWith(
fetch(event.request).then((response) => {
return caches.open(CACHE_NAME).then((cache) => {
cache.put(event.request, response.clone());
return response;
});
}).catch((error) => {
return caches.open(CACHE_NAME).then((cache) => {
return cache.match(event.request).then((response) => {
if (response != null) {
return response;
}
throw error;
});
});
})
);
}
細かい解説は省略しつつ、main.dart.jsなどのアプリ本体がService Workerキャッシュを利用してキャッシュされていることや、ファイルが更新された際にはキャッシュを更新する処理が実装されていました。実装を読み進めると、アプリ更新後の初回アクセスでは以下の状況が発生しているようでした。
- ユーザーがサイトにアクセスするとブラウザはService Workerキャッシュから
main.dart.jsを読み込み実行する - Service Workerによって最新の
main.dart.jsがキャッシュに保存されるが、これは表示中のセッションでは使用されない- 結果としてユーザーは古いバージョンの
main.dart.jsが実行された状態となる
- 結果としてユーザーは古いバージョンの
ChromeのDeveloperツールにあるNetworkタブを使うと上記の動作を確認することができます。main.dart.jsに注目すると、アプリ更新後の初回のアクセスでService Workerキャッシュからロードされ（1つ目のログ）、その後に非同期でサーバーから取得されています（2つ目のログ）。
初回アクセスでキャッシュを参照しないようにするには
以下の方法を検証しました（検証中）
-
--pwa-strategyオプション - Cache Busting
--pwa-strategy オプション
flutter build webの--pwa-strategyオプションを使うとCacheのポリシーを変更できます。
--pwa-strategy The caching strategy to be used by the PWA service worker.
| option | description | 翻訳 |
|---|---|---|
none |
Generate a service worker with no body. This is useful for local testing or in cases where the service worker caching functionality is not desirable. | 本文のないサービスワーカーを生成します。これは、ローカルテストや、サービスワーカーのキャッシュ機能が望ましくない場合に役立ちます |
offline-first (default) |
Attempt to cache the application shell eagerly and then lazily cache all subsequent assets as they are loaded. When making a network request for an asset, the offline cache will be preferred. | アプリケーションのシェルを積極的にキャッシュし、その後、後続のアセットがロードされるにつれて遅延的にキャッシュするよう試みます。アセットに対してネットワークリクエストを行う際、オフラインキャッシュが優先されます |
noneを指定してビルドするとflutter_service_worker.jsの中身が空っぽになりました。Service Workerの処理を無効化しているようです（ただしService Worker自体は登録されていました）。
diff --git a/flutter_service_worker.js b/flutter_service_worker.js
index d21384f..e69de29 100644
--- a/flutter_service_worker.js
+++ b/flutter_service_worker.js
@@ -1,205 +0,0 @@
-'use strict';
-const MANIFEST = 'flutter-app-manifest';
-const TEMP = 'flutter-temp-cache';
-const CACHE_NAME = 'flutter-app-cache';
-
-const RESOURCES = {"flutter_bootstrap.js": "410b4e50f7750f7f007ad0785da49a8e",
-"version.json": "5651fad194d365e81dff68c21810842f",
-"index.html": "7885fdbe86babf4998be4dbb6ea0ee03",
-"/": "7885fdbe86babf4998be4dbb6ea0ee03",
-"main.dart.js": "39a84ef33242c74229debed90f39683f",
この状態での動作を確認したところ、確かにServiceWorkerキャッシュは使用されなくなりました。ただし、更新後の初回アクセスでmain.dart.jsがロードされるかどうかはブラウザキャッシュの挙動に依存するようです。そのためサーバー側で適切にHTTP HeaderのCache-Control
などを設定すれば今回の問題の対処法になりそうでした。
Cache Busting
ビルド後のmain.dart.jsなどにCache Bustingを適用するパッチを書いている人がいましたCache Bustingとは、リソースのrequestパラメータの末尾に?v=x.y.zなどを付与してユニークなrequestを生成することでブラウザキャッシュを回避する方法です。
ビルド後のファイルを改変するのでトリッキーなやり方ですが、こちらも効果がありそうでした。
まとめ
「更新後の初回アクセス」という限定的な条件での問題について調べてみました。サイトにもう一度アクセスしたり、リロードをすれば最新のプログラムがロードされるため気づかないことも多いかと思います。
逆に、BtoBなどの業務アプリケーションなどの場合で、カジュアルに「もう一度アクセスしてください」をお願いできないようなシチュエーションでは影響がありそうでした。
Tips
Service Workerキャッシュの削除
ChromeのリロードボタンではService Workerキャッシュは削除できません（削除されるのはブラウザキャッシュ）
削除するには開発者ツールApplicationタブからStorageを選択してClear site dataをクリックします。
バージョン番号の罠
package_info_plusなどを使ってアプリのバージョンを確認することで最新のプログラムが実行されているか分かりますよね。
僕もそう思っていました...
以下のコードはpackage_info_plusのFlutterWeb用の実装であるpackage_info_plus_webがアプリのバージョンを取得しているコードです、最終的にサーバー上のversion.jsonというファイルを参照していることが分かります。
version.jsonはFlutterWebをビルドすると一緒に生成されるjsonファイルです。
{
"app_name": "your_app_name",
"version": "1.0.0",
"build_number": "1",
"package_name": "your_app_name"
}
つまりpackage_info_plusはversion.jsonからバージョン情報を取得していてアプリ本体であるmain.dart.jsを参照していません。そのため、package_info_plusで表示したバージョン番号は最新のリソースを参照しているが、その時ブラウザにロードされているmain.dart.jsは古いキャッシュを参照しているという状況が起こりえます（起こりました）。
参考情報
Discussion