Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Server Push no NGINX + revisão dos arquivos cacheados

Referente ao curso Performance Web II: Critical Path, HTTP/2 e Resource Hints, no capítulo HTTP/2 avançado e atividade Push do background

por Estudante
| 254.5k xp | 2 posts

Estou usando o NGINX no Debian 10 e o arquivo de configuração do servidor fica em /etc/nginx/sites-available/.

Para fazer o Server Push eu preciso incluir os arquivos que deverão ser empurrados através do bloco:

server{
    location /index.html {
        http2_push /pasta/arquivo;
    }
}

Também estou utilizando cache dos arquivos e o sistema de revisão com gulp-rev apresentado no curso.

O problema é que toda vez que houver alteração em qualquer dos arquivos cacheados, o nome dele será alterado e eu precisarei alterar o arquivo de configuração do servidor.

Como eu faço para automatizar isso?

3 respostas
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala ai André, tudo bem? Nesse caso você pode tentar usar o http2_push_preload com on e no HTML tentar configurar os asset's com o rel="preload".

<link rel="preload" href="main.js" as="script">
<link rel="preload" href="style.css" as="style">

Mais informações do NGINX com http2_push_preload: https://www.nginx.com/blog/nginx-1-13-9-http2-server-push/

Mais informações sobre o preload: https://developer.mozilla.org/pt-BR/docs/Web/HTML/Preloading_content

Espero ter ajudado.

solução!
por Estudante
| 254.5k xp | 2 posts

Obrigado pela resposta Matheus!

Eu segui a documentação do NGINX, mas da forma que você sugeriu não deu certo. Acredito que o servidor não faça a leitura do HTML para identificar as tags link...

Pra funcionar eu precisei enviar os cabeçalhos através do PHP, mudando a estrutura para o seguinte:

Arquivo index.php:

<?php

    $revManifest = json_decode(file_get_contents("rev-manifest.json"), true);

    header("Link: </{$revManifest['css/bootstrap.css']}>; as=style; rel=preload, " .
                 "</{$revManifest['css/home.css']}>; as=style; rel=preload, " .
                 "</{$revManifest['js/layout-adjustments.js']}>; as=script; rel=preload");

    require 'home.html';
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Boa Andre, fico feliz que tenha dado certo.

Sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.