node.js - サービスワーカーを使用してhandlebars.jsをキャッシュする

Question

サービスワーカーについて質問したいと思います。私はWebアプリケーションを作ってサービスワーカーを実装しようとしました。私はビューのレイアウトに.hbsを使っています。静的なファイルをキャッシュすると、.hbs、.css、.jsのファイルをキャッシュできません。

• public/
  • css/
    • style.css
  • js/
    • app.js
  • manifest.json
  • service-worker.js
• views/
  • home.hbs
  • partial/
    • header.hbs * footer.hbs

私は私のアプリを展開するとき、それはhome.hbs、style.cssと私のapp.jsファイルをキャッシュするために失敗しました。私はオフラインで自分のWebにアクセスできません。

修正するにはどうすればよいですか？

これは私のapp.jsです：

if ('serviceWorker' in navigator) { 

    navigator.serviceWorker 
    .register('./service-worker.js', { scope: './service-worker.js' }) 
    .then(function(registration) { 
     console.log("Service Worker Registered"); 
    }) 
    .catch(function(err) { 
     console.log("Service Worker Failed to Register", err); 
    }) 

} 

var get = function(url) { return new Promise(function(resolve, reject) { 

    var xhr = new XMLHttpRequest(); 
    xhr.onreadystatechange = function() { 
     if (xhr.readyState === XMLHttpRequest.DONE) { 
      if (xhr.status === 200) { 
       var result = xhr.responseText 
       result = JSON.parse(result); 
       resolve(result); 
      } else { 
       reject(xhr); 
      } 
     } 
    }; 

    xhr.open("GET", url, true); 
    xhr.send(); 

    }); }; 

は、これは私のサービスワーカーです：

var cacheName = 'v1'; var cacheFiles = [ './login', './css/styles.css', './js/app.js', ]; self.addEventListener('install', function(e) { 
    console.log('[ServiceWorker] Installed'); 

    // e.waitUntil Delays the event until the Promise is resolved 
    e.waitUntil(

     // Open the cache 
     caches.open(cacheName).then(function(cache) { 

      // Add all the default files to the cache   console.log('[ServiceWorker] Caching cacheFiles');   return cache.addAll(cacheFiles); 
     }) ); // end e.waitUntil }); 


self.addEventListener('activate', function(e) { 
    console.log('[ServiceWorker] Activated'); 

    e.waitUntil(

     // Get all the cache keys (cacheName)  caches.keys().then(function(cacheNames) {   return Promise.all(cacheNames.map(function(thisCacheName) { 

       // If a cached item is saved under a previous cacheName 
       if (thisCacheName !== cacheName) { 

        // Delete that cached file 
        console.log('[ServiceWorker] Removing Cached Files from Cache - ', thisCacheName); 
        return caches.delete(thisCacheName); 
       }   }));  }) ); // end e.waitUntil 

}); 


self.addEventListener('fetch', function(e) { console.log('[ServiceWorker] Fetch', e.request.url); 

    // e.respondWidth Responds to the fetch event e.respondWith(

     // Check in cache for the request being made  caches.match(e.request) 


      .then(function(response) { 

       // If the request is in the cache 
       if (response) { 
        console.log("[ServiceWorker] Found in Cache", e.request.url, response); 
        // Return the cached version 
        return response; 
       } 

       // If the request is NOT in the cache, fetch and cache 

       var requestClone = e.request.clone(); 
       fetch(requestClone) 
        .then(function(response) { 

         if (!response) { 
          console.log("[ServiceWorker] No response from fetch ") 
          return response; 
         } 

         var responseClone = response.clone(); 

         // Open the cache 
         caches.open(cacheName).then(function(cache) { 

          // Put the fetched response in the cache 
          cache.put(e.request, responseClone); 
          console.log('[ServiceWorker] New Data Cached', e.request.url); 

          // Return the response 
          return response; 

         }); // end caches.open 

        }) 
        .catch(function(err) { 
         console.log('[ServiceWorker] Error Fetching & Caching New Data', err); 
        }); 


      }) // end caches.match(e.request) ); // end e.respondWith }); 

は私が.hbsファイルをキャッシュすることができますので、何をすべきでしょうか？

Answer 1

あなたのサービスワーカーコードは本当に悪いです。私はタイプミスがあることを願っていますが、cache.addAll()ファンクションはコメントアウトされています！

とにかく、私は

var cacheName ='v2'; 
var filesToCache = [ 
'/', 
'public/css/style.css', 
'js/app.js', 
'views/home.hbs', 
]; 


self.addEventListener('install', function(e) { 
    console.log('[ServiceWorker] Install'); 
    e.waitUntil(
    caches.open(cacheName).then(function(cache) { 
     console.log('[ServiceWorker] Caching app shell'); 
     return cache.addAll(filesToCache); 
    }).then(function() { 
     return self.skipWaiting(); 
    }) 
); 
}); 
... 
...