如何缓存SPA

时间:2018-01-29 01:18:18

标签: php jquery html google-chrome browser-cache

我正在制作单页应用程序,我需要prove a concept我可以将html模板缓存到浏览器缓存中并在以后重复使用。

我已经动态生成了来自php的html,它看起来像这样:



<!DOCTYPE html>
<html >
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script
            src="https://code.jquery.com/jquery-3.3.1.min.js"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
            crossorigin="anonymous"></script>
        <script>
            $(function() {
                $('#content').load('https://mysite.net.au/index.php?endpoint=get-html-template&template=FirstTemplate&version=1');               
            });
            </script>
    </head>
    <body id="content"></body>
</html>
&#13;
&#13;
&#13;

我想在这个文件中使用url,使用浏览器缓存加载特定的模板。

如果我需要更新页面模板,我会将版本更改为2或3,然后它将重新加载模板。我实际上需要永远缓存html文件。

这是理论上的。

在练习中,在我看到的开发者工具的网络页面上的Google Chrome中

jquery-3.3.1.min.js SIZE (from memory cache)  

index.php?endpoint=get-html-template&template=FirstTemplate&version=1  SIZE 2.2KB

所以我得出结论,html没有从缓存中加载。

我尝试了不同的Response headers

我的上一组看起来像这样:

Cache-control:max-age=31536000
Connection:Keep-Alive
Content-Encoding:gzip
Content-Length:1721
Content-Type:text/html; charset=UTF-8
Date:Mon, 29 Jan 2018 00:56:01 GMT
ETag:"c9c67b-f9f0f-56393377f8681"
Expires:Tue, 29 Jan 2019 00:56:01 +0000
Keep-Alive:timeout=5, max=99
Last-Modified:Mon, 29 Jan 2018 00:27:57 +0000
Server:Apache/2.2.34 (Unix) mod_ssl/2.2.34 OpenSSL/1.0.2l DAV/2 PHP/5.6.30
status:200
Vary:Accept-Encoding
x-cache:HIT
X-Powered-By:PHP/5.6.30

我有什么不考虑的吗?我使用Chrome 63 for Mac OS。

1 个答案:

答案 0 :(得分:0)

没有办法有效地使任何浏览器缓存html。但他们都缓存JS文件。所以我在这里重新发明React JSX:)

阅读es6规范中的更多内容:8.3.7 React JSX via tagged templates

基本上es6现在有了一个Web模板。

昨天当php生成html页面时,今天php生成了javascript文件。