可以在 PWA 中使用 EJS 等模板引擎吗？

Question

我正在学习编写渐进式 Web 应用程序，所有示例都使用 html 文件。我更喜欢将 EJS 与节点服务器一起使用。是否可以缓存 ejs 以便在本地使用？

Answer 1

简答：是。

Service Worker 将缓存给定 URL 的响应，因此与您使用 EJS 还是任何其他模板引擎无关。

当然，您需要查看是否使用 Service Worker 来缓存模板文件（例如：templates/mytemplate.ejs）或呈现的 HTML。如果缓存输出 HTML，那么它将从缓存中返回，而不是在连续请求时从模板中动态呈现。

Answer 2

这可能对您有所帮助

服务-worker.js

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

Answer 3

我认为 service worker 只缓存其范围内的文件 - 它只能访问其文件夹或“下方”的文件。您的 service worker 应该在您的 public 文件夹中，而不是在您的 views 文件夹中。缓存时，您应该缓存文件夹中的所有静态文件，然后缓存呈现视图文件的 url 路径。

例子.. '/about', '/404', '/admin/signup', '/admin/signin',

就是这样。希望对你有帮助。

可以在 PWA 中使用 EJS 等模板引擎吗？

Can a templating engine such as EJS be used in a PWA?

ejs

progressive-web-apps