Question

我正在使用Nodejs和EJ作为Node的模板引擎。我是PWA的新手，我想创建一个渐进式Web应用程序，并希望将所有ejs模板文件都缓存在浏览器缓存中。我怎样才能做到这一点？是否可以离线工作？我尝试这样做，并且服务人员已成功注册。它还缓存文件，但是当我以脱机模式运行它时，它会在获取时自动删除缓存。有人可以帮我弄这个吗？我正在从节点服务器在localhost：5000上运行它。

目录结构

 App/
  - css/
  - images/
  - res/
  - sw1.js 
  - uploads/
  - views/
       -partials/
          -footer.ejs
       -index.ejs
       -login.ejs

footer.ejs文件

     if ('serviceWorker' in navigator) {
         navigator.serviceWorker.register('./sw1.js')
            .then(() => console.log('Service worker Registered'))
            .catch((error) => console.log('some error occurred',error));
        }

sw1.js文件

var cacheName = 'app-cache';

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(cacheName).then(function(cache) {
      return cache.addAll([./css/main.css', './views/login.ejs', '/']);
    })
  );
  console.log('Service Worker Installed');
});

self.addEventListener('activate', function(e) {
  console.log('[Service Worker] Activate');
  e.waitUntil(
    caches.keys().then(function(keyList) {
      return Promise.all(
        keyList.map(function(key) {
          if (key != cacheName) {
            console.log('Removing old cache', key);
            return caches.delete(key);
          }
        })
      );
    })
  );
});

self.addEventListener("fetch", function(event){
    if(event.request.url.startsWith("http://localhost:5000/")){
        console.log("[Service Worker] Fetch", event.request.url);
        caches.open(cacheName).then(function(cache){
            return fetch(event.request).then(function(response){
                cache.put(event.request, response.clone());
                return response;
            })
         })
    }
    else{
    event.respondWith(
        caches.match(event.request).then(function(response){
            return response || fetch(event.request);
        })
    );
}
});

如何使用Nodejs缓存Ejs并构建渐进式Web应用程序

0 个答案: