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

Service Worker Cache Problems

biga816
April 17, 2019

Service Worker Cache Problems

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 抜粋