既存サイトをPWA化してオフラインでも使用できるようにしたいのですが、index.htmlならうまくいきますが
phpやpythonのサイトではキャッシュされません。
PythonはDjangoを使っており、sw.jsには"/"をキャッシュするようにしています。
しかし、PCやスマホにPWAサイトをインストールしても、オフラインの状態で開くと「インターネットに接続されていません」的なメッセージが出ます。
同じやりかたでも、index.htmlはキャッシュされます。
なにか特殊な方法が必要でしょうか?
追記
index.htmlでのServiceWorkerの登録は下記のようになっています。
JacaScript
1 2if ('serviceWorker' in navigator) { 3 navigator.serviceWorker.register('sw.js') 4 .then(reg => { 5 console.log('Service worker registered.', reg); 6 reg.onupdatefound = () => { 7 console.log('cash update.'); 8 reg.update(); 9 } 10 if (typeof reg.update == 'function') { 11 console.log('cash update.'); 12 reg.update(); 13 } 14 }); 15} else console.log('Service worker can\'t registered.');
sw.jsの中身です。
JacaScript
1var CACHE_NAME = "otft-info-20200914"; 2var urlsToCache = [ 3 "/", 4 "index.html", 5 "info/otftnamelogo.png", 6 "info/note.svg", 7 "info/beat01.png", 8 "info/LogIcon.png" 9]; 10 11self.addEventListener('install', function(event) { 12 event.waitUntil( 13 caches 14 .open(CACHE_NAME) 15 .then(function(cache){ 16 return cache.addAll(urlsToCache); 17 }) 18 ); 19}); 20 21self.addEventListener('fetch', function(e) { 22}); 23 24self.addEventListener('activate', function(event) { 25 event.waitUntil( 26 caches.keys().then(function(cacheNames) { 27 return Promise.all( 28 cacheNames.filter(function(cacheName) { 29 return cacheName !== CACHE_NAME; 30 }).map(function(cacheName) { 31 console.info("delete cache: " + cacheName); 32 return caches.delete(cacheName); 33 }) 34 ); 35 }).then(() => { 36 clients.Claim(); 37 }) 38 ); 39});