我正在学习编写渐进式Web应用程序,所有示例都使用html文件。我更喜欢在node服务器上使用EJS。是否可以缓存ejs以便在本地使用?
我正在学习编写渐进式Web应用程序,所有示例都使用html文件。我更喜欢在node服务器上使用EJS。是否可以缓存ejs以便在本地使用?
简短回答:是的。
服务工作线程将缓存特定URL的响应,因此您使用EJS或任何其他模板引擎都无关紧要。
当然,您需要确定是否使用服务工作线程缓存模板文件(例如:templates/mytemplate.ejs)还是渲染后的HTML。如果缓存输出HTML,则它将从缓存返回,而不是在连续请求中从模板动态呈现。
const cacheName = 'pwa-demo-v1';
const filesToCache = [
'/',
'/index.ejs',
'/partials/header.ejs',
'/partials/footer.ejs',
'/css/style.css',
'/js/app.js',
'/js/menu.js',
'/images/refresh.svg',
'/images/pwa.png'
]
// Install Service Worker
self.addEventListener('install', function(event){
console.log('Service Worker: Installing....');
event.waitUntil(
// Open the Cache
caches.open(cacheName).then(function(cache) {
console.log('Service Worker: Caching App Shell at the moment......');
// Add Files to the Cache
return cache.addAll(filesToCache);
})
);
})
// Fired when the Service Worker starts up
self.addEventListener('activate', function(event) {
console.log('Service Worker: Activating....');
event.waitUntil(
caches.keys().then(function(cacheNames) {
return Promise.all(cacheNames.map(function(key) {
if( key !== cacheName) {
console.log('Service Worker: Removing Old Cache', key);
return caches.delete(key);
}
}));
})
);
return self.clients.claim();
});
self.clients.claim()
self.addEventListener('fetch', function(event) {
console.log('Service Worker: Fetch', event.request.url);
console.log("Url", event.request.url);
event.respondWith(
caches.match(event.request).then(function(response) {
return response || fetch(event.request);
})
);
});
manifest.json文件:
{
"name": "Progressive Web App - Demo",
"short_name": "PWADemo",
"description": "Progressive Web Apps - demo application",
"start_url": "/",
"display": "standalone",
"background_color": "#4c4849",
"theme_color": "#4c4849",
"icons": [
{
"src": "/images/192x192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/images/168x168.png",
"type": "image/png",
"sizes": "168x168"
},
{
"src": "/images/144x144.png",
"type": "image/png",
"sizes": "144x144"
},
{
"src": "/images/96x96.png",
"type": "image/png",
"sizes": "96x96"
},
{
"src": "/images/72x72.png",
"type": "image/png",
"sizes": "72x72"
},
{
"src": "/images/48x48.png",
"type": "image/png",
"sizes": "48x48"
}
],
"gcm_sender_id": "1001123745362"
更多细节请查看我的代码库 - https://github.com/deepakgd/PWA-Demo
我认为Service Worker只缓存其范围内的文件 - 它只能访问其文件夹或“以下”的文件。您的Service Worker应该在公共文件夹中而不是视图文件夹中。并且在缓存时,您应该缓存文件夹中的所有静态文件,然后缓存呈现视图文件的URL路径。
例如.. '/about', '/404', '/admin/signup', '/admin/signin',
就这些了。希望对您有所帮助。