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函数。（顺便说一下，你正在缓存＆＃34; styles.css＆＃34;而在树中，我读到＆＃34; style.css＆＃34;）

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',
];

是的，您拼错了“样式”。希望能对某人有所帮助

node.js - 如何使用服务工作者缓存handlebars.js

2 个答案: