Javascript node.js-使用service worker缓存handlebar.js

我想问一下服务人员的情况。我制作了一个web应用程序，并尝试实现ServicesWorker。我正在使用

.hbs

进行视图布局，当我缓存静态文件时，我无法缓存

.hbs

、

.css

和

.js

文件

• public/

  • css/

    • style.css

  • js/

    • app.js

  • manifest.json

  • service worker.js

• 视图/

  • home.hbs

  • partial/

    • header.hbs

      *

      footer.hbs

当我部署应用程序时，它无法缓存

home.hbs

、

style.css

和我的

app.js

文件；我无法脱机访问我的网站

我该怎么做才能修好它

这是我的

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

文件？

您的服务人员代码非常糟糕。我希望有输入错误，但是

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();
    })
  );
});
...
...

---

我认为你应该像在你的应用路由器上那样给.hbs打电话

如果您的路由器中有：

router.get('/home', (req, res) => {
    res.render('home');
});

然后，您可以在service worker中缓存它，如下所示：

var filesToCache = [
'/home',
'css/style.css',
'js/app.js'
];

js前面没有点，你错贴了“风格”。

---

希望这对某人有所帮助

请阅读。块引号（

）不用于代码块或列表。请使用适当的标记。您好@fabio Marzocca非常感谢您的回答。我试着提出一个新问题。那里更清楚。这是我尝试你的代码并修复它的链接。但是所有的文件都是404找不到的错误。。我不知道该怎么办。我不是专家，但可能服务人员不会将“.hbs”保存在缓存中，因为这些文件永远不会到达客户端。“.hbs”扩展名用于指示在将最终的“.html”文件发送到客户端之前需要呈现的把手文件。您面临的问题是，您试图缓存由服务器动态创建的内容。一个可能的解决方案是：首先尝试保存handlebar在第一个req中给出的呈现的“.html”响应。然后尝试在内存、redis、使用服务工作者的客户端等中进行缓存。