0

私は音声ベースの PWA を開発していますが、このテクノロジに詳しくないため、Service Worker でのキャッシュ管理と無効化について疑問がいくつかあります。

アプリケーションはオフラインで動作する必要があります。これについては、SW プリキャッシュを使用して説明しました。

私の唯一の疑いは、データの量です。経験上、5 つのユース ケース シナリオがあります。各シナリオには最大 30MB のオーディオ コンテンツが含まれます。つまり、約 150MB + すべての画像、js、および css の合計がプリキャッシュされます。

これが一部のブラウザーの制限を超えていることはわかっています (この質問とこの記事を参照してください)。一般に、ストレージ サイズには注意する必要があります。これは、ユーザーのデバイスのディスク上の空き容量にも依存します。

それが私が考えたことです: あるシナリオと別のシナリオの間に、ユーザーは WiFi 接続のあるデスクに立ち寄るので、私の考えは、ユーザーのアクション(ボタンを押すなど) の後にキャッシュランタイムを空にし、それを新しいコンテンツに置き換えることです. この方法では、一度に 1 つのシナリオのみを保存します。つまり、約 35 MB という妥当なサイズです。

それは良いアプローチだと思いますか？これを実装する最良の方法は何ですか?

これが私の現在のコードです：

service-worker.js

 const PRECACHE = 'precache-test-v1';

 // A list of local resources we always want to be cached.
 const PRECACHE_URLS = [
   '/',
   '/audio/scenario1.mp3',
   '/audio/scenario2.mp3',
   '/audio/scenario3.mp3',
   '/audio/scenario4.mp3',
   '/audio/scenario5.mp3',
   '/css/style.css',
   '/js/bundle.js',
   '/img/favicon.png',
   '/img/logo.png',
   '/img/image1.png',
   '/img/image2.png',
   '/img/image3.png',
   '/img/image4.png',
   '/img/image5.png',
 ];

 // never cache these resources
 const TO_SKIP = [/* empty for now */];

// The install handler takes care of precaching the resources we always need.
self.addEventListener('install', event => {
  const now = new Date();
  console.log(`PWA Service Worker installing - :: ${now} ::`);
  event.waitUntil(caches.open(PRECACHE).then(cache => {
    return cache.addAll(PRECACHE_URLS).then(() => {
      self.skipWaiting();
    });
  }));
});

// The activate handler takes care of cleaning up old caches.
self.addEventListener('activate', event => {
  const now = new Date();
  console.log(`PWA Service Worker activating - :: ${now} ::`);
  const currentCaches = [PRECACHE];
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return cacheNames.filter(cacheName => !currentCaches.includes(cacheName));
    }).then(cachesToDelete => {
      return Promise.all(cachesToDelete.map(cacheToDelete => {
        return caches.delete(cacheToDelete);
      }));
    }).then(() => self.clients.claim())
  );
});

// The fetch handler serves responses for same-origin resources from a cache.
self.addEventListener('fetch', event => {
  // Skip cross-origin requests, like those for Google Analytics and the other provided urls.
  if (event.request.url.startsWith(self.location.origin) && TO_SKIP.every(url => !event.request.url.includes(url))) {
    event.respondWith(
      caches.match(event.request).then(resp => {
        return resp || fetch(event.request).then(response => {
          return caches.open(PRECACHE).then(cache => {
            cache.put(event.request, response.clone());
            return response;
          });
        });
      })
    );
  }
});

index.js

if ('serviceWorker' in navigator) {
   navigator.serviceWorker.register('/sw.js').then(registration => {
     console.log('Registration successful, scope is:', registration.scope);
   }).catch(error => {
     console.log('Service worker registration failed, error:', error);
   });
}

時間をありがとう、フランチェスコ

4

1 に答える 1