Place EJS files in the Service Worker cache

Asked

Viewed 288 times

0

I wonder how I can curl in the Service Worker the files of . EJS since they are not rendered by the browser, more by the server and only after sent to the browser the . HTML respective.

self.addEventListener('install', function(event) {
     event.waitUntil(
     caches.open(CACHE_NAME).then(function(cache) {
     return cache.addAll([
            '/',
            '/../views/index.ejs',
            '../css/materialize.css',
            '../css/custom.css', ....

How to pass this file to the cache?

javascript node.js ejs

  • The process is the same. But the route to the file .ejs must be defined on the server via GET or if using Express as a static resource using express.Static() The question is: why cache a file that cannot be used by the browser?. Caching will not make the browser use it to render anything.

  • Lauro Moraes, I know it won’t render, what I want to know is how to send this rendered folder (files) so that SW Chace can work with Mobile First. if it were in . html and you could do it in Aboa.

1 answer

1

Supposing you are using Express can use the function express.Static() which serves precisely to "serve static files".

This function has the following structure:

express.static(root, [options])

You can use the native function __dirname to reference the folder itself as relative path and so be able to concatenate with the rest of the path to its folder at higher levels or below.

The following example assumes that your project has the following folder structure:

  root folder
   |
   |---- render
   |       |
   |       |---- views
   |
   |---- node_modules

  // todo conteúdo da pasta views disponível via GET
  app.use(express.static(__dirname + '/render/views'))

This function allows all files in the selected folder and all underlying directories to be available via a request GET.

It also allows (optionally) define options as: etag, maxAge, the list of extensions, define headers or even if navigation in the directory will be allowed or not... this is an example of function options in the documentation itself:

var options = {
  dotfiles: 'ignore',
  etag: false,
  extensions: ['htm', 'html'],
  index: false,
  maxAge: '1d',
  redirect: false,
  setHeaders: function (res, path, stat) {
    res.set('x-timestamp', Date.now())
  }
}

app.use(express.static('public', options))

If you don’t want to provide all the contents of the directory you can simply handle one or more specific files via request routing GET example:

const fs = require('fs')
// ...
app.get('/index.ejs', (req, res, next) => {
    res.type('text/plain')
    .send(fs.readFileSync('./render/views/index.ejs', 'utf-8'))
    .end()
})

Through routing it is important to define the mime-type suitable... as "templates" .ejs are not equal to files .js should use only text/plain.

Using this method it is possible to serve any file type, just add the mime-type correct.

In his Service Worker would look something like:

self.addEventListener('install', function(event) {
    event.waitUntil(
    caches.open(CACHE_NAME).then(function(cache) {
    return cache.addAll([
        '/',
        '/index.ejs',
        '../css/materialize.css',
        '../css/custom.css', ....

Without having to back up or forward directories in the file’s path statement .ejs.

Try and tell me if it worked.

Source: Express 4.x API

  • Maybe I didn’t make myself clear. The problem is that my SW is downloading a route to my index.ejs, and when I turn off the connection to test it Offline it does not work, goes to Google Dino, IE or cache being downloaded does not contain an index.html, which I believe is the starting point of the SW to load the cache. I don’t understand right, my SW file will get in the application root, or inside the folder containing the index.ejs?

  • He was supposed to give me an index.html file, but what I get is a file with no html extension that is called localhost and in it is my html code that was rendered by the view engine from nodejs to ejs. SW does not work Offline!

  • 1

    In this case it is not necessary to use the route /index.ejs, if your application is returning routes with final ".html" then you must use /index.html if they are routes without extension then use /index... if the navigation in your directory self-references to index (what is default if your application uses express.static()) then the first item you are adding to the cache does this (/). Consider editing your question by adding your routing as well as express settings of your application, this is important information helps you find the problem.

  • I have been with errors reallocating the folder structure in my directory. The error itself was that the SW could not perform the INSTALL by not finding the application pages. I did not put the path of my View with the Ejss and it worked normally. Thank you for your help gentlemen!

Browser other questions tagged javascript node.js ejs

You are not signed in. Login or sign up in order to post.