单页应用程序版本控制

Single page application versioning

本文关键字：版本控制 应用程序 单页      更新时间：2023-09-26

确保用户使用的是最新版本的单页应用程序的最佳方法是什么?我怎样才能确保用户不必点击ctrl+F5来获取最新的页面资源(JS+CSS)?

在所有引用静态文件前加上构建器编号。

你应该指向/js/123/app.js 123作为构建号，而不是/js/app.js。

在每次部署中，增加构建号。

然后你需要做一些重写，为了让服务器在路径中有一个假文件夹时找到app.js。

当然，静态文件不会重新加载，直到有人关闭浏览器并再次访问该页面或按下F5)。

要解决这个问题，您可以使用AJAX请求app.js并查看它是否已被修改:

$.ajax({
    type:"GET",
    url:'/js/123/app.js',
    cache:true,
    ifModified:true,                  
    success:function(data,textStatus,jqXHR){
        console.debug(data);     // Returns undefined when response is 304 Not Modified
    }
});

我的解决方案是:

PHP: 

ob_start(function($data) {
    return preg_replace_callback(
        "(/(?:js|css|img)/.*?'.(?:js|css|png|jpg|gif))",
        function($m) {
            if( file_exists(substr($m[0],1))) return $m[0]."/t=".filemtime(substr($m[0],1));
            else return $m[0];
        },
        str_replace(array_keys($rep),array_values($rep),$data)
    );
});

. htaccess: 

RewriteRule (.*)/t=[0-9]+$ /$1

自动附加一个特定的时间戳到所有的图像，样式和脚本:它的修改时间。然后，.htaccess再次将其剥离。

这意味着无论何时更新这些文件中的一个，缓存的版本都将立即有效地失效。

用构建号作为静态内容折叠的前缀是一个很好的方法。为了确保它们总是在构建后提取最新的内容，您需要将该技术与服务器端标记结合起来，该标记将html与静态内容的位置结合起来，并考虑到构建号。当然，如果您使用的是100%的angular范例，那么就没有服务器端标记这样的东西，因此您需要违背解决方案的纯粹性，并在用户登录后创建一个jsp页面或类似的页面(您的欢迎页面)，然后引用静态内容。然后，如果您愿意，可以在此结束服务器端代码，并从此开始使用纯静态布局。

相关文章：