node.js - 使用 Service Worker 缓存 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文件； 我无法离线访问我的网站。

我应该怎么做才能修复它？

这是我的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

我认为您应该像在应用路由器上调用它们一样调用 .hbs。

如果您的路由器中有：

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

然后在您的服务工作者中，您可以像这样缓存它：

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

js 之前没有点，你拼错了“风格”。 希望能帮助某人

Answer 2

你的服务工作者代码真的很糟糕。 我希望有一个错字，但是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();
    })
  );
});
...
...