ファイル名に日本語が含まれるとMac版Chrome76でファイルアップロードができない

これは TOWN Advent Calendar 2019 16日目のエントリーです。

ファイル名に日本語が含まれるとMac版Chrome76でファイルアップロードができないという問題が発生したことがありました。

原因としてはPOSTメソッドのときにもService Worker と Cache API経由でリクエストをしていたためでした。

以下のようにしてGETメソッドのときだけ fetch(event.request) を呼ぶように修正しました。

self.addEventListener('fetch', (event) => {
  if (event.request.method === 'GET') { //GETリクエストだけ fetch(event.request) を呼ぶように修正
    event.respondWith(caches
      .open('cache-name')
      .then(cache => cache.match(event.request))
      .then(response =>
        response || fetch(event.request).catch(() => offlineAsset('offline.html'))));
  }
});