Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Service Worker Cache Problems

Avatar for biga816 biga816
April 17, 2019

Service Worker Cache Problems

Avatar for biga816

biga816

April 17, 2019
Tweet

More Decks by biga816

Other Decks in Technology

Transcript

  1. 問題1 〜キャッシュの上限に到達〜 ɾ画像をキャッシュするようにしたら下記エラーが発⽣。 ɾファイルをキャッシュしすぎたためキャッシュ可能容量の上限 に達していた。 self.toolbox.router.get(/<ファイルサーバーのURL>/, (request) => { return

    new Promise((resolve, reject) => { caches.match(request).then((response) => { if (response) { // from cache resolve(response); } // from network return fetch(request) .then((response) => resolve(response)) .catch((error) => reject(error)); }); }); });
  2. self.toolbox.router.get(/<ファイルサーバーのURL>/, (request) => { return new Promise((resolve, reject) => {

    if (request.headers.get('range')) { // Range request let rangeHeader = request.headers.get('range'); let rangeMatch = rangeHeader.match(/^bytes¥=(¥d+)¥-(¥d+)?/) let pos = Number(rangeMatch[1]); let pos2 = rangeMatch[2]; if (pos2) { pos2 = Number(pos2); } caches.open('ionic-cache') .then((cache) => { return cache.match(request.url); }).then((res) => { if (!res) { return fetch(request.url).then(res => res.arrayBuffer()); } else { return res.arrayBuffer(); } }).then((ab) => { let responseHeaders = { status: 206, statusText: 'Partial Content', headers: [ ['Content-Type', 'video/mp4'], ['Content-Range', 'bytes ' + pos + '-' + (pos2 || (ab.byteLength - 1)) + '/' + ab.byteLength]] }; : Qiita: Service Worker(PWA)でRangeリクエストに対応する https://qiita.com/biga816/items/dcc69a265235f1c3f7e0 抜粋