[英]node.js - Caching handlebars.js using service worker
我想問一下服務人員。 我制作了一個 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
文件?
我認為您應該像在應用路由器上調用它們一樣調用 .hbs。
如果您的路由器中有:
router.get('/home', (req, res) => {
res.render('home');
});
然后在您的服務工作者中,您可以像這樣緩存它:
var filesToCache = [
'/home',
'css/style.css',
'js/app.js'
];
js 之前沒有點,你拼錯了“風格”。 希望能幫助某人
你的服務工作者代碼真的很糟糕。 我希望有一個錯字,但是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();
})
);
});
...
...
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.