CN114924740A - 一种前端单页应用中资源失效主动检测方法 - Google Patents

一种前端单页应用中资源失效主动检测方法 Download PDF

Info

Publication number
CN114924740A
CN114924740A CN202210447791.7A CN202210447791A CN114924740A CN 114924740 A CN114924740 A CN 114924740A CN 202210447791 A CN202210447791 A CN 202210447791A CN 114924740 A CN114924740 A CN 114924740A
Authority
CN
China
Prior art keywords
version
file
page
application
webpage
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN202210447791.7A
Other languages
English (en)
Other versions
CN114924740B (zh
Inventor
管维松
金建新
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Jiangsu Carzone Automobile Accessories Co ltd
Original Assignee
Jiangsu Carzone Automobile Accessories Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Jiangsu Carzone Automobile Accessories Co ltd filed Critical Jiangsu Carzone Automobile Accessories Co ltd
Priority to CN202210447791.7A priority Critical patent/CN114924740B/zh
Publication of CN114924740A publication Critical patent/CN114924740A/zh
Application granted granted Critical
Publication of CN114924740B publication Critical patent/CN114924740B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/40—Transformation of program code
    • G06F8/41—Compilation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/70—Software maintenance or management
    • G06F8/71—Version control; Configuration management
    • Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • Computer Security & Cryptography (AREA)
  • Data Mining & Analysis (AREA)
  • Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

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

Description

一种前端单页应用中资源失效主动检测方法
技术领域
本发明涉及网页前端技术领域，具体说是一种前端单页应用中资源失效主动检测方法。
背景技术
在单页应用中，为了提升页面的加载速度，页面中关联的资源常常被以异步的方式延迟加载。但在页面被访问的过程中，应用可能会被重新发布，此时原有的页面资源会被移除，部署为全新编译的资源，并且资源的名称无法保持与原有的资源名称一致。当用户继续访问页面时就会出现资源无法加载的情形，导致用户无法完成操作。
不仅在单页应用中资源无法加载，在前端应用发布新版本后，因为原有的资源会被删除，部署本次新编译的资源，导致原有资源访问链接失效，此时用户继续使用也会出现操作无响应等问题。
另外，前端应用编译时没有资源版本信息，在前端应用中编译后并没有版本，导致应用无法检测到自己是否为最新版本。且目前在前端应用中缺少主动检测机制，没有合适的方案给予用户提示刷新页面。
发明内容
本发明的目的是针对现有技术存在的不足，提供一种前端单页应用中资源失效主动检测方法，至少包括以下部分：
一种前端单页应用中资源失效主动检测方法，包括以下步骤：
1)为前端单页应用增加版本标识：在编辑服务器端为网站页面的代码编译时，先创建一个用于存储本次编译版本标识的版本文件；
2)基于时间戳生成唯一版本标识，将该版本标识写到入到步骤1)中创建好的版本文件中；
3)将步骤2)的版本文件引入至前端代码中，读取版本标识，继而将其编译到前端代码中，编译完成后，在应用服务器端发布应用，并提供该应用中版本文件的访问路径；
4)用户在访问网站页面时，在网站页面初始化的过程中将读取前端代码中的版本标识并存储在window对象上，同时监听页面切换事件；
5)当用户在浏览器中切换网页页面时，网页能监听到切换事件，一旦监听到切换事件发生，网页则向服务器发起请求，获取服务器端存储端的版本文件，读取文件中的版本号信息；
6)将获取到的应用服务器端的版本文件中的版本标识与window对象中的版本标识进行比较，如果不一致则代表当前访问的页面已过期，弹出对话框提示用户刷新页面；如果一致，代表网页没有过期，不做任何操作；
7)用户点击对话框中的刷新按钮，将执行刷新页面，重新请求网站资源并渲染。
进一步地，所述步骤1)中版本文件的具体创建过程如下：在项目的public文件下，使用javascript语言生成一个文件。
进一步地，生成的文件名为：v.json。
进一步地，所述步骤2)中版本标识的具体生成方法如下：在v.json文件中，使用javascript语言写入版本标识，其标识内容为代码编译时的时间戳，具体代码为：{v：newDate().getTime()}。
进一步地，所述步骤4)中“在网站页面初始化的过程中将读取前端代码中的版本标识并存储在window对象上”的具体操作如下：当用户浏览器打开网页时，网页从public文件夹下读取v.json中的版本标识，然后通过window.ftVersion＝verson.v语句把版本文件中的版本号赋值给window对象的ftVersion属性。
进一步地，步骤6)中的“将获取到的应用服务器端的版本文件中的版本标识与window对象中的版本标识进行比较”的具体操作如下：本地网页的版本号从window.ftVersion中可以拿到，服务端的版本号通过ajax请求可以拿到，对比两个值是否相等即可确认本地网页是否过期。
有益效果：本发明具有以下有益效果：
1)现有技术中还没有一种针对单页应用资源失效的主动检测的方法，本发明已成功推行于实际生产应用中；
2)本发明通过在应用编译期间动态生成版本标识文件，为了前端应用提供了版本检测能力；
3)本发明支持多种的检测触发机制，检测到资源失效时能够及时给出用户提示，对于用户的体验有显著提升。
附图说明
图1为本发明原理架构图；
图2为本发明用户交互图。
具体实施方式
下面结合附图和具体实施例，进一步阐明本发明，本实施例在以本发明技术方案为前提下进行实施，应理解这些实施例仅用于说明本发明而不用于限制本发明的范围。
如图1和图2所示，一种前端单页应用中资源失效主动检测方法，具体包括以下内容，本发明需要先为前端单页应用增加版本标识，具体如下：在编辑服务器端为网站页面的代码编译时，先创建一个用于存储本次编译版本标识的版本文件，开发者可在项目的public文件下，使用javascript语言生成一个文件，并且可为该文件命名，本实施例中将生成的文件名命名为：v.json。
之后再基于时间戳生成唯一版本标识，将该版本标识写到入到上述步骤中创建好的版本文件中，具体操作如下：在v.json文件中，使用javascript语言写入版本标识，其标识内容为代码编译时的时间戳，具体代码为：{v：new Date().getTime()}。
将上述步骤中的版本文件引入至前端代码中，读取版本标识，继而将其编译到前端代码中，编译完成后，在应用服务器端发布应用，并提供该应用中版本文件的访问路径。
用户在访问网站页面时，在网站页面初始化的过程中将读取前端代码中的版本标识并存储在window对象上，同时监听页面切换事件。
当用户浏览器打开网页时，网页从public文件夹下读取v.json中的版本标识，然后通过window.ftVersion＝verson.v语句把版本文件中的版本号赋值给window对象的ftVersion属性。
而当用户在浏览器中切换网页页面时，网页能监听到切换事件，一旦监听到切换事件发生，网页则向服务器发起请求，获取服务器端存储端的版本文件，读取文件中的版本号信息。
将获取到的应用服务器端的版本文件中的版本标识与window对象中的版本标识进行比较，如果不一致则代表当前访问的页面已过期，弹出对话框提示用户刷新页面；如果一致，代表网页没有过期，不做任何操作；本地网页的版本号从window.ftVersion中可以拿到，服务端的版本号通过ajax请求可以拿到，对比两个值是否相等即可确认本地网页是否过期。
之后用户点击对话框中的刷新按钮，将执行刷新页面，重新请求网站资源并渲染。
本发明中针对现有技术中还没有一种比较能够完美解决针对单页应用资源失效的主动检测方法的改进，主要是通过先为前端单页应用增加版本标识，再基于时间戳生成唯一版本标识，这样在用户切换网页使，可通过基于时间戳生成的唯一版本标识进行比较，从而实现主动的检测，为前端应用提供了版本检测能力；并且本发明支持多种的检测触发机制，检测到资源失效时能够及时给出用户提示，对于用户的体验有显著提升。
上述具体实施方式只是本发明的一个优选实施例，并不是用来限制本发明的实施与权利要求范围的，凡依据本发明申请专利保护范围内容做出的等效变化和修饰，均应包括于本发明专利申请范围内。

Claims (6)

1.一种前端单页应用中资源失效主动检测方法，其特征在于：包括以下步骤：
1)为前端单页应用增加版本标识：在编辑服务器端为网站页面的代码编译时，先创建一个用于存储本次编译版本标识的版本文件；
2)基于时间戳生成唯一版本标识，将该版本标识写到入到步骤1)中创建好的版本文件中；
3)将步骤2)的版本文件引入至前端代码中，读取版本标识，继而将其编译到前端代码中，编译完成后，在应用服务器端发布应用，并提供该应用中版本文件的访问路径；
4)用户在访问网站页面时，在网站页面初始化的过程中将读取前端代码中的版本标识并存储在window对象上，同时监听页面切换事件；
5)当用户在浏览器中切换网页页面时，网页能监听到切换事件，一旦监听到切换事件发生，网页则向服务器发起请求，获取服务器端存储端的版本文件，读取文件中的版本号信息；
6)将获取到的应用服务器端的版本文件中的版本标识与window对象中的版本标识进行比较，如果不一致则代表当前访问的页面已过期，弹出对话框提示用户刷新页面；如果一致，代表网页没有过期，不做任何操作；
7)用户点击对话框中的刷新按钮，将执行刷新页面，重新请求网站资源并渲染。
2.根据权利要求1所述的一种前端单页应用中资源失效主动检测方法，其特征在于：所述步骤1)中版本文件的具体创建过程如下：在项目的public文件下，使用javascript语言生成一个文件，文件名为：v.json。
3.根据权利要求2所述的一种前端单页应用中资源失效主动检测方法，其特征在于：生成的文件名为：v.json。
4.根据权利要求1所述的一种前端单页应用中资源失效主动检测方法，其特征在于：所述步骤2)中版本标识的具体生成方法如下：在v.json文件中，使用javascript语言写入版本标识，其标识内容为代码编译时的时间戳，具体代码为：{v：new Date().getTime()}。
5.根据权利要求1所述的一种前端单页应用中资源失效主动检测方法，其特征在于：所述步骤4)中“在网站页面初始化的过程中将读取前端代码中的版本标识并存储在window对象上”的具体操作如下：当用户浏览器打开网页时，网页从public文件夹下读取v.json中的版本标识，然后通过window.ftVersion＝verson.v语句把版本文件中的版本号赋值给window对象的ftVersion属性。
6.根据权利要求1所述的一种前端单页应用中资源失效主动检测方法，其特征在于：步骤6)中的“将获取到的应用服务器端的版本文件中的版本标识与window对象中的版本标识进行比较”的具体操作如下：本地网页的版本号从window.ftVersion中可以拿到，服务端的版本号通过ajax请求可以拿到，对比两个值是否相等即可确认本地网页是否过期。
CN202210447791.7A 2022-04-26 2022-04-26 一种前端单页应用中资源失效主动检测方法 Active CN114924740B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202210447791.7A CN114924740B (zh) 2022-04-26 2022-04-26 一种前端单页应用中资源失效主动检测方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202210447791.7A CN114924740B (zh) 2022-04-26 2022-04-26 一种前端单页应用中资源失效主动检测方法

Publications (2)

Publication Number Publication Date
CN114924740A true CN114924740A (zh) 2022-08-19
CN114924740B CN114924740B (zh) 2024-07-30

Family

ID=82806921

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202210447791.7A Active CN114924740B (zh) 2022-04-26 2022-04-26 一种前端单页应用中资源失效主动检测方法

Country Status (1)

Country Link
CN (1) CN114924740B (zh)

Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CA2954294A1 (en) * 2015-12-28 2017-06-28 Huibin Ma Website access method, apparatus, and website system
CN109933349A (zh) * 2019-01-28 2019-06-25 优信拍（北京）信息科技有限公司 一种基于vue spa及时更新的方法、系统及设备
CN111680253A (zh) * 2020-06-08 2020-09-18 南京领行科技股份有限公司 页面应用数据包生成方法、装置、计算机设备及存储介质
CN112269622A (zh) * 2020-11-24 2021-01-26 百度国际科技（深圳）有限公司 页面管理方法、装置、设备和介质
CN113138781A (zh) * 2020-01-19 2021-07-20 福建省天奕网络科技有限公司 Csv配置更新方法、存储介质
CN113535199A (zh) * 2021-05-26 2021-10-22 广东优识科技股份有限公司 基于WebApp的网站更新方法、系统和存储介质
CN113703807A (zh) * 2021-08-26 2021-11-26 上海德拓信息技术股份有限公司 一种静态资源版本实时检测与更新的方法及系统

Patent Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CA2954294A1 (en) * 2015-12-28 2017-06-28 Huibin Ma Website access method, apparatus, and website system
CN109933349A (zh) * 2019-01-28 2019-06-25 优信拍（北京）信息科技有限公司 一种基于vue spa及时更新的方法、系统及设备
CN113138781A (zh) * 2020-01-19 2021-07-20 福建省天奕网络科技有限公司 Csv配置更新方法、存储介质
CN111680253A (zh) * 2020-06-08 2020-09-18 南京领行科技股份有限公司 页面应用数据包生成方法、装置、计算机设备及存储介质
CN112269622A (zh) * 2020-11-24 2021-01-26 百度国际科技（深圳）有限公司 页面管理方法、装置、设备和介质
CN113535199A (zh) * 2021-05-26 2021-10-22 广东优识科技股份有限公司 基于WebApp的网站更新方法、系统和存储介质
CN113703807A (zh) * 2021-08-26 2021-11-26 上海德拓信息技术股份有限公司 一种静态资源版本实时检测与更新的方法及系统

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
BANGZHONG CAO; MINYONG SHI; CHUNFANG LI: "The solution of web font-end performance optimization", 2017 10TH INTERNATIONAL CONGRESS ON IMAGE AND SIGNAL PROCESSING, BIOMEDICAL ENGINEERING AND INFORMATICS (CISP-BMEI), 26 February 2018 (2018-02-26) *
马郓;刘譞哲;梅宏;: "面向移动Web应用的浏览器缓存性能度量与优化", 软件学报, no. 07, 15 July 2020 (2020-07-15) *

Also Published As

Publication number Publication date
CN114924740B (zh) 2024-07-30

Similar Documents

Publication Publication Date Title
CN106897251B (zh) 富文本展示方法及装置
CN111046310B (zh) 页面处理方法、装置、服务器及计算机可读存储介质
US10860802B2 (en) Chatbot version comparison
CN104461513B (zh) 一种生成表单界面的方法及装置
CN110059269B (zh) 页面追踪方法、装置、电子设备和计算机可读存储介质
CN101364988A (zh) 一种确定网页安全性的方法和装置
CN112800309A (zh) 基于http代理的爬虫系统及其实现方法
CN111679976A (zh) 一种页面对象的查找方法及装置
CN111026663A (zh) 一种软件缺陷检测方法、装置、计算机设备和存储介质
CN110968296B (zh) 一种数据获取方法、装置、设备及可读存储介质
CN108306918B (zh) 一种基于程序动态分析的网站访问信息自动获取方法
JP6329329B2 (ja) コード・キャッシング・システム
CN111880990A (zh) 一种异常处理方法及装置
CN112800194B (zh) 一种接口变更识别方法、装置、设备及存储介质
KR100886246B1 (ko) 검색 결과 제공방법 및 시스템
CN114924740A (zh) 一种前端单页应用中资源失效主动检测方法
CN109542716A (zh) 一种基于j2ee平台的日志记录方法及用户关联插件
CN113076501A (zh) 一种页面处理方法、存储介质及设备
CN111881043A (zh) 页面测试方法、装置、存储介质和处理器
CN112486811A (zh) 一种接口测试方法、装置、设备及介质
US20150326501A1 (en) Container contract for data dependencies
CN110929188A (zh) 服务端页面渲染方法及装置
JP2006134005A (ja) 連携処理装置及びシステム及び方法
CN104750693B (zh) 一种打点的实现方法和装置
CN113672233A (zh) 一种基于Redfish的服务器带外管理方法、装置及设备

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant