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 

當我部署我的應用程序時，它無法緩存 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();

  });  };

這是我的 service-worker.js

var cacheName = 'v1';
var cacheFiles = [
    './',
    './home',
    './login',
'./welcome',
'./register',
'./css/styles.css',
'./js/app.js',
'./images/fb-logo.png',
'./images/g-logo.png',
'./images/t-logo.png',
'./images/logofix.png',
'./images/icon192.png',
'https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js',
'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css',
'https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700',
'https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.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

試試這種方式，沒有點，並向安裝程序添加一個 skipWaiting 功能。 （順便說一句，你正在緩存“styles.css”，而我在樹中讀到“style.css”）

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

Answer 2

我認為您應該像在應用路由器上調用它們一樣調用 .hbs。

如果您的路由器中有：

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

然后在您的服務工作者中，您可以像這樣緩存它：

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

是的，你拼錯了“風格”。 希望能幫助某人