Question

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

Answer 1

简短回答：是的。

服务工作者将缓存给定URL的响应，因此与您是否将使用EJS或任何其他模板引擎无关。

当然，您应该使用服务工作者来缓存模板文件（例如：templates / mytemplate.ejs），而不是渲染的HTML，因此相同的模板可以与不同的数据一起使用。

Answer 2

这可能对您有帮助

Service-worker.js

text-align: middle

manifest.json文件：

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);
        })
    );
});

}

有关更多详细信息，请检查我的存储库-https://github.com/deepakgd/PWA-Demo

Answer 3

我认为服务工作者仅在其范围内缓存文件 -它只能访问其文件夹中或“其下”的文件。您的服务人员应位于您的公用文件夹中，而不应位于您的视图文件夹中。缓存时，应将所有静态文件缓存在文件夹中，然后缓存呈现视图文件的url路径。

示例..'/ about'， '/ 404'， '/ admin / signup'， '/ admin / signin'，

仅此而已。希望对您有所帮助。

可以在PWA中使用EJS这样的模板引擎吗？

3 个答案: