0

Gostaria de saber como posso cachear no Service Worker os arquivos de .EJS visto que os mesmos não são renderizados pelo browser, mais pelo servidor e só após enviados para o browser o .HTML respectivo.

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', ....

Como passar esse arquivo para o cache?

2
  • O processo é este mesmo. Mas a rota para o arquivo .ejs deve ser definida no servidor via GET ou se esta usando Express como um recurso estático usando express.static() A pergunta é: por que cachear um arquivo que não pode ser usado pelo browser?. Salvar em cache não vai fazer o navegador usá-lo para renderizar nada. Commented 16/01/2018 às 14:40
  • Lauro Moraes, eu sei que não vai renderizar, o que eu quero saber é como enviar essa pasta (arquivos) renderizada para que o chace do SW possa funcionar com o Mobile First. se fosse em .html e conseguiria num aboa. Commented 17/01/2018 às 1:08

1 Resposta 1

1

Supondo que esteja utilizando Express pode usar a função express.static() que serve justamente para "servir arquivos estáticos".

Esta função possui a seguinte estrutura:

express.static(root, [options])

Você pode usar a função nativa __dirname para referenciar a própria pasta como caminho relativo e assim poder concatenar com o restante do caminho até sua pasta estando ela em níveis superiores ou abaixo.

O seguinte exemplo pressupõe que seu projeto tenha a seguinte estrutura de pastas:

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

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

Esta função permite que todos os arquivos da pasta selecionada e todas os diretórios subjacentes estejam disponíveis através de uma requisição GET.

Ela também permite (opcionalmente) definir opções como: etag, maxAge, a lista de extensões, definir headers ou mesmo se a navegação no diretório será permitida ou não... este é um exemplo de opções da função na própria documentação:

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

Caso não queira disponibilizar todo o conteúdo do diretório podes simplesmente tratar um ou mais arquivos específicos via roteamento pelo pedido GET exemplo:

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

Através de roteamento é importante definir o mime-type adequado... como "templates" .ejs não são iguais a arquivos .js deve utilizar apenas text/plain.

Utilizando este método é possível servir qualquer tipo de arquivo, apenas adicione o mime-type correto.


Em seu Service Worker ficaria algo como:

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', ....

Sem ter de recuar ou avançar diretórios na declaração de rota do arquivo .ejs.

Tente ai e diga se deu certo.


Fonte: Express 4.x API

4
  • Talvez eu não tenha explicado bem. O problema é que meu SW esta fazendo o download de uma rota para minha index.ejs, e qdo desligo a conexão pra testar ele Offline ele não funciona, vai pra o Dino do Google, ou seja ou cache que está sendo baixando não contem uma index.html, que acredito que é o ponto de partida do SW para realizar o carregamento do cache. Eu não to entendendo direito, meu arquivo do SW vai ficar na raiz da aplicação, ou dentro da pasta que contém o index.ejs? Commented 19/01/2018 às 5:02
  • Ele deveria me entregar um arquivo index.html, mas o que recebo é a um arquivo sem extensão html que se chama localhost e nele está o meu código html que foi renderizado pelo view engine do nodejs para ejs. O SW não funciona Offline! Commented 19/01/2018 às 7:22
  • 1
    Neste caso não é necessário usar a rota /index.ejs, se sua aplicação esta devolvendo rotas com final ".html" então deves usar /index.html se forem rotas sem extensão então use /index... se a navegação em seu diretório autorreferencia a index (o que é padrão se sua aplicação usar express.static()) então o primeiro item que você está adicionando ao cache faz isto (/). Considere editar sua pergunta adicionando seu roteamento bem como as configurações express de seu aplicativo, isto é uma informação importante ajuda a encontrar o problema. Commented 19/01/2018 às 13:28
  • Eu estive com erros realacionado a estrutura de pastas no meu diretório. O erro em si, estava que o SW não conseguia realizar o INSTALL por não encontrar as páginas da aplicação. Não coloquei o caminho da minha View com os EJSs e funcionou normalmente. Obrigado pela ajuda senhores! Commented 27/01/2018 às 5:54

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .