模板引擎如EJS是否可以用于PWA应用？

Question

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

- BackPacker777

Answer 1

简短回答：是的。

服务工作线程将缓存特定URL的响应，因此您使用EJS或任何其他模板引擎都无关紧要。

当然，您需要确定是否使用服务工作线程缓存模板文件（例如：templates/mytemplate.ejs）还是渲染后的HTML。如果缓存输出HTML，则它将从缓存返回，而不是在连续请求中从模板动态呈现。

- Kevin Farrugia

---

请问您能否提供更详细的答案？例如，如果我们正在使用Express，则将静态文件放置在“/public”文件夹下，只有该文件夹中的文件才会在网站的URL中公开。例如：/public/js/main.js => http://example.org/js/main.js......... EJS模板存储在项目的不同和私有文件夹中（例如“/app/views/pages/home.ejs”），如果无法通过URL访问，如何映射缓存？谢谢。 - Daniel Carpio Contreras

Answer 2

这可能会对你有所帮助。 Service-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

- Deepak

Answer 3

我认为Service Worker只缓存其范围内的文件 - 它只能访问其文件夹或“以下”的文件。您的Service Worker应该在公共文件夹中而不是视图文件夹中。并且在缓存时，您应该缓存文件夹中的所有静态文件，然后缓存呈现视图文件的URL路径。

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

就这些了。希望对您有所帮助。

- Amadi Chukwuemeka Austin