[发明专利]一种前端单页应用中资源失效主动检测方法

说明书

本发明公开一种前端单页应用中资源失效主动检测方法，为前端单页应用增加版本标识：在编辑服务器端为网站页面的代码编译时，先创建一个用于存储本次编译版本标识的版本文件；基于时间戳生成唯一版本标识，将该版本标识写到入到步骤1)中创建好的版本文件中；将步骤2)的版本文件引入至前端代码中，读取版本标识，继而将其编译到前端代码中，编译完成后，在应用服务器端发布应用，并提供该应用中版本文件的访问路径。本发明通过在应用编译期间动态生成版本标识文件，为了前端应用提供了版本检测能力；本发明支持多种的检测触发机制，检测到资源失效时能够及时给出用户提示，对于用户的体验有显著提升。

技术领域

本发明涉及网页前端技术领域，具体说是一种前端单页应用中资源失效主动检测方法。

背景技术

在单页应用中，为了提升页面的加载速度，页面中关联的资源常常被以异步的方式延迟加载。但在页面被访问的过程中，应用可能会被重新发布，此时原有的页面资源会被移除，部署为全新编译的资源，并且资源的名称无法保持与原有的资源名称一致。当用户继续访问页面时就会出现资源无法加载的情形，导致用户无法完成操作。

不仅在单页应用中资源无法加载，在前端应用发布新版本后，因为原有的资源会被删除，部署本次新编译的资源，导致原有资源访问链接失效，此时用户继续使用也会出现操作无响应等问题。

另外，前端应用编译时没有资源版本信息，在前端应用中编译后并没有版本，导致应用无法检测到自己是否为最新版本。且目前在前端应用中缺少主动检测机制，没有合适的方案给予用户提示刷新页面。

发明内容

本发明的目的是针对现有技术存在的不足，提供一种前端单页应用中资源失效主动检测方法，至少包括以下部分：

一种前端单页应用中资源失效主动检测方法，包括以下步骤：

1)为前端单页应用增加版本标识：在编辑服务器端为网站页面的代码编译时，先创建一个用于存储本次编译版本标识的版本文件；

2)基于时间戳生成唯一版本标识，将该版本标识写到入到步骤1)中创建好的版本文件中；

3)将步骤2)的版本文件引入至前端代码中，读取版本标识，继而将其编译到前端代码中，编译完成后，在应用服务器端发布应用，并提供该应用中版本文件的访问路径；

4)用户在访问网站页面时，在网站页面初始化的过程中将读取前端代码中的版本标识并存储在window对象上，同时监听页面切换事件；

5)当用户在浏览器中切换网页页面时，网页能监听到切换事件，一旦监听到切换事件发生，网页则向服务器发起请求，获取服务器端存储端的版本文件，读取文件中的版本号信息；

6)将获取到的应用服务器端的版本文件中的版本标识与window对象中的版本标识进行比较，如果不一致则代表当前访问的页面已过期，弹出对话框提示用户刷新页面；如果一致，代表网页没有过期，不做任何操作；

7)用户点击对话框中的刷新按钮，将执行刷新页面，重新请求网站资源并渲染。

进一步地，所述步骤1)中版本文件的具体创建过程如下：在项目的public文件下，使用javascript语言生成一个文件。

进一步地，生成的文件名为：v.json。

进一步地，所述步骤2)中版本标识的具体生成方法如下：在v.json文件中，使用javascript语言写入版本标识，其标识内容为代码编译时的时间戳，具体代码为：{v：newDate().getTime()}。