CN113315829B - 客户端离线化h5页面加载方法、装置、计算机设备及介质 - Google Patents

Abstract

本申请实施例属于页面展示领域，涉及一种客户端离线化H5页面加载方法，包括预先挂载注入指令至脚本环境，并利用注入指令，将原生指令加载至脚本环境，将创建的第一网络请求对象内的参数重写，得到第二网络请求对象，将页面发起的所有网络请求进行拦截，根据请求方式确定网络请求需要代理转发时，根据请求标识由第二网络请求对象将网络请求转发至服务端，从服务端获取加载页面所需的资源数据，根据资源数据调用原生指令加载出页面，并将资源数据缓存至本地。本申请还提供一种客户端离线化H5页面加载装置、计算机设备及介质。此外，本申请还涉及区块链技术，网络请求可存储于区块链中。本申请可以加速H5页面展示，减少网页视图加载时的白屏时间。

Description

客户端离线化H5页面加载方法、装置、计算机设备及介质

技术领域

本申请涉及页面展示技术领域，尤其涉及一种客户端离线化H5页面加载方法、装置、计算机设备及介质。

背景技术

Native APP(原生应用)需要开发人员根据不同系统平台使用不同语言进行开发实现，不仅开发成本及周期长，而且用户升级成本高。随着行业及技术的发展，企业为了追求开发成本、产品质量、用户体验和开发效率，前端H5APP(Hyper Text MarkupLanguage5.0Application，H5应用)和客户端Native APP混合开发的模式是必然的趋势。同时也因为H5开发的诸多优势(如跨平台、跨终端、更新快、易传播等)使得客户端中H5资源占比率逐步增加。

为了加快客户端加载H5页面的速度，现在H5页面的呈现方法中，通常是以离线包的形式，将H5所需的文件资源全部统一打包至一个ZIP文件内，客户端Native下载离线包后解压使用，再WebView里加载解压后的H5文件。但是，这种方式极大程度上依赖H5的改造支持，构造离线包，创建分发服务端平台供客户端下载，整个过程需要额外制作离线包文件，不仅耗流量而且响应时间较长。

发明内容

本申请实施例的目的在于提出一种客户端离线化H5页面加载方法、装置、计算机设备及介质，以解决相关技术中额外制作离线包文件，工作量大，同时造成流量消耗以及H5页面加载速度慢的技术问题。

为了解决上述技术问题，本申请实施例提供一种客户端离线化H5页面加载方法，采用了如下所述的技术方案：

预先挂载注入指令至脚本环境，并利用所述注入指令，将原生指令加载至所述脚本环境；

创建第一网络请求对象，重写所述第一网络请求对象内的参数得到第二网络请求对象，并将页面发起的网络请求的请求标识和请求方式添加至所述第二网络请求对象中；

对所有所述网络请求进行拦截，根据所述请求方式确定所述网络请求是否需要代理转发，当所述网络请求为需要代理转发时，则根据所述请求标识由所述第二网络请求对象将所述网络请求转发至服务端；

在接收到所述服务端发送的处理完成指令时，从所述服务端获取到加载页面所需的资源数据；及

根据所述资源数据调用所述原生指令加载出所述页面，并将所述资源数据缓存至本地。

进一步的，所述预先挂载注入指令至脚本环境的步骤包括：

创建脚本文件，在所述脚本文件内声明注入指令；

创建网页视图，并将所述脚本文件声明的所述注入指令挂载至所述网页视图的脚本环境。

进一步的，所述利用所述注入指令，将原生指令加载至所述脚本环境的步骤包括：

按模块加载原生指令的指令名称，利用所述注入指令，将所述模块的模块名称和所述模块对应的所有所述指令名称加载至所述脚本环境；

将所述模块名称和对应的所有所述指令名称，以预设存储方式缓存至所述脚本环境的脚本对象内，并组装形成伪协议。

进一步的，所述重写所述第一网络请求对象内的参数得到第二网络请求对象，并将页面发起的网络请求的请求信息添加至所述第二网络请求对象中的步骤包括：

将所述第一网络请求对象的对象初始化参数以及第一对象发送参数进行重写，得到所述第二网络请求对象；

将所述请求标识和所述请求方式添加至所述第二网络请求对象的对象初始化参数中。

进一步的，所述根据所述请求方式确定所述网络请求是否进行代理转发的步骤包括：

判断所述请求方式是否为传送数据方式；

当所述请求方式为传送数据方式时，根据所述请求标识取出缓存的与所述请求标识对应的请求数据，并将所述请求数据添加到所述网络请求的请求体中，通过所述网络请求代理对象进行转发；

当所述请求方式不为传送数据方式时，则所述网络请求不需要代理转发。

进一步的，在所述对所有所述网络请求进行拦截的步骤之后还包括：

根据所述网络请求的请求头，确定所述网络请求是否为伪协议请求；

当所述网络请求不是伪协议请求时，则执行所述根据所述请求方式确定所述网络请求是否需要进行代理转发的步骤。

进一步的，在所述对所有所述网络请求进行拦截的步骤之后还包括：

将所述网络请求携带的cookie数据进行同步缓存。

为了解决上述技术问题，本申请实施例还提供一种客户端离线化H5页面加载装置，采用了如下所述的技术方案：

挂载注入模块，用于预先挂载注入指令至脚本环境，并利用所述注入指令，将原生指令加载至所述脚本环境；

重写模块，用于创建第一网络请求对象，重写所述第一网络请求对象内的参数得到第二网络请求对象，并将页面发起的网络请求的请求标识和请求方式添加至所述第二网络请求对象中；

代理转发模块，用于对所有所述网络请求进行拦截，根据所述请求方式确定所述网络请求是否需要代理转发，当所述网络请求为需要代理转发时，则根据所述请求标识由所述第二网络请求对象将所述网络请求转发至服务端；

获取模块，用于在接收到所述服务端发送的处理完成指令时，从所述服务端获取到加载页面所需的资源数据；及

加载缓存模块，用于根据所述资源数据调用所述原生指令加载出所述页面，并将所述资源数据缓存至本地。

为了解决上述技术问题，本申请实施例还提供一种计算机设备，采用了如下所述的技术方案：

该计算机设备包括存储器和处理器，所述存储器中存储有计算机可读指令，所述处理器执行所述计算机可读指令时实现如上所述的客户端离线化H5页面加载方法的步骤。

为了解决上述技术问题，本申请实施例还提供一种计算机可读存储介质，采用了如下所述的技术方案：

所述计算机可读存储介质上存储有计算机可读指令，所述计算机可读指令被处理器执行时实现如上所述的客户端离线化H5页面加载方法的步骤。

与现有技术相比，本申请实施例主要有以下有益效果：

本申请通过预先挂载注入指令至脚本环境，并利用注入指令，将原生指令加载至所述脚本环境，然后创建第一网络请求代理对象，并对第一网络请求代理对象内的参数进行重写，得到第二网络请求代理对象，将页面发起的所有网络请求进行拦截，根据网络请求的请求方式，确定网络请求是否需要代理转发，当网络请求为需要代理转发时，则由第二网络请求对象将网络请求转发至服务端，从服务端获取加载页面所需的资源数据，最后根据资源数据调用原生指令加载出页面，并将资源数据缓存至本地；本申请的H5页面按照现有流程开发，无需额外增加工作量来制作离线包文件，同时，在开发流程中，可以将加载H5页面所需的资源数据进行缓存，后续在不升级文件版本情况下可以直接利用缓存文件，无需二次下载，可以加速H5页面展示，减少网页视图加载时的白屏时间，提升用户体验度，另外，通过重写第一网络请求对象内的参数得到的第二网络请求对象，可以将H5页面发起的所有网络请求进行拦截，根据需要进行代理转发，避免存在网络请求被拦截丢掉数据的情况。

附图说明

为了更清楚地说明本申请中的方案，下面将对本申请实施例描述中所需要使用的附图作一个简单介绍，显而易见地，下面描述中的附图是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本申请可以应用于其中的示例性系统架构图；

图2根据本申请的客户端离线化H5页面加载方法的一个实施例的流程图；

图3是图2中步骤S201的一种具体实施方式的流程图；

图4是根据本申请的客户端离线化H5页面加载装置的一个实施例的结构示意图；

图5是根据本申请的计算机设备的一个实施例的结构示意图。

具体实施方式

除非另有定义，本文所使用的所有的技术和科学术语与属于本申请的技术领域的技术人员通常理解的含义相同；本文中在申请的说明书中所使用的术语只是为了描述具体的实施例的目的，不是旨在于限制本申请；本申请的说明书和权利要求书及上述附图说明中的术语“包括”和“具有”以及它们的任何变形，意图在于覆盖不排他的包含。本申请的说明书和权利要求书或上述附图中的术语“第一”、“第二”等是用于区别不同对象，而不是用于描述特定顺序。

在本文中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本申请的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其它实施例互斥的独立的或备选的实施例。本领域技术人员显式地和隐式地理解的是，本文所描述的实施例可以与其它实施例相结合。

本申请所涉及的技术术语包括：

原生端为Native端，是基于智能设备本地操作系统如iOS、Android、WP并使用原生程式编写运行的应用程序；Native端的“native”在不同系统上具体所指的语言是不同的，例如，iOS系统的原生应用是用Objective-C编写的，Android系统原生应用是用Java编写的。H5是一系列制作网页互动效果的技术集合。

H5页面是采用H5开发的页面，H5涵盖了HTML5、CSS3、JavaScript等一系列前端技术。

网页视图为WebView，WebView可以内嵌在移动端，实现前端的混合式开发，大多数混合式开发框架都是基于WebView模式进行二次开发的。比如：APIcloud、uni-app等等的框架。

为了使本技术领域的人员更好地理解本申请方案，下面将结合附图，对本申请实施例中的技术方案进行清楚、完整地描述。

为了解决相关技术中额外制作离线包文件，工作量大，同时造成流量消耗以及H5页面加载速度慢的问题，本申请提供了一种客户端离线化H5页面加载方法，可以应用于如图1所示的系统架构100中，系统架构100可以包括终端设备101、102、103，网络104和服务器105。网络104用以在终端设备101、102、103和服务器105之间提供通信链路的介质。网络104可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。

用户可以使用终端设备101、102、103通过网络104与服务器105交互，以接收或发送消息等。终端设备101、102、103上可以安装有各种通讯客户端应用，例如网页浏览器应用、购物类应用、搜索类应用、即时通信工具、邮箱客户端、社交平台软件等。

终端设备101、102、103可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、电子书阅读器、MP3播放器(Moving Picture ExpertsGroup Audio Layer III，动态影像专家压缩标准音频层面3)、MP4(Moving PictureExperts Group Audio Layer IV，动态影像专家压缩标准音频层面4)播放器、膝上型便携计算机和台式计算机等等。

服务器105可以是提供各种服务的服务器，例如对终端设备101、102、103上显示的页面提供支持的后台服务器。

需要说明的是，本申请实施例所提供的客户端离线化H5页面加载方法一般由终端设备执行，相应地，客户端离线化H5页面加载装置一般设置于终端设备中。

应该理解，图1中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。

继续参考图2，示出了根据本申请的客户端离线化H5页面加载方法的一个实施例的流程图，包括以下步骤：

步骤S201，预先挂载注入指令至脚本环境，并利用注入指令，将原生指令加载至所述脚本环境。

脚本为JS，脚本环境为JS环境，JS为JavaScript的简称，是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。注入指令即为JS注入指令，是在浏览器地址栏中输入一段JavaScript代码，用来改变页面JS变量、页面标签的内容。

原生指令是由原生端(下文用Native端表示)提供的，原生指令为Native Method(原生方法，即Native方法)，原生指令可以调用原生端平台的原生功能，原生功能具体指的是：原生端平台为原生端提供的应用功能，例如获取设备信息、获取网络信息、网络接口调用、定位、拨打电话、发送短信等应用功能。

在本实施例中，预先挂载注入指令至脚本环境的步骤具体为，创建脚本文件(JS文件)，在脚本文件内声明注入指令，创建网页视图，并将脚本文件声明的注入指令挂载至网页视图的脚本环境。

在本实施例中，网页视图由Native端创建，在将注入指令预先挂载至脚本环境的同时，还将回调指令预先挂载至脚本环境，预先挂载的方式同注入指令。回调指令用于H5页面触发原生指令，原生指令执行完成后，将执行结果返回给H5页面。

需要说明的是，在Native端创建网页视图(WebView)之前，读取JS文件的内容，在完成WebView创建后，Native端通过系统内置函数将文件声明的JS注入指令和回调指令挂载至WebView的JS环境上。

Native端在初始化WebView时，会向JS环境注入一段代码，用以挂载JSBridge对象，该JSBridge对象内声明了Native端和H5页面的通信方法，即Native端与H5页面之间通过JSBridge进行通信。

JSBridge是一种JS实现的Bridge，连接着桥两端的Native端和H5页面，它在APP内方便地让Native端调用JS，JS调用Native方法，是双向通信的通道。JSBridge主要提供了JS调用Native代码的能力，实现原生功能如查看本地相册、打开摄像头、指纹支付等。

在本实施例中，利用注入指令，将原生指令加载至脚本环境的步骤具体包括：

步骤S301，按模块加载原生端提供的所有原生指令的指令名称，利用注入指令，将模块的模块名称和模块对应的所有指令名称加载至脚本环境。

在本实施例中，Native端按照每个业务线的不同，将提供给H5页面使用的Native方法进行划分，不同业务所需要的Native方法写在不同的模块下，当Native端通过WebView加载H5页面时，根据当前加载的H5页面所属的业务线来判断所需要使用的模块。

根据模块的模块名称，Native端利用系统Runtime技术可以动态解析模块下对应所有的原生指令的指令名称，并利用预先挂载的JS注入指令，将模块名称和其下所有的指令名称加载至JS环境。

步骤S302，将模块名称和对应的所有指令名称，以预设存储方式缓存至脚本环境的脚本对象内，并组装形成伪协议。

利用JS注入指令将模块名称和模块下对应的所有指令名称加载至JS环境后，将模块名称和所有的指令名称挂载在JS环境的一个对象内进行缓存，预设存储方法采用key-value分布式存储，具体地，以模块名称为key，value是一个二级对象，二级对象以指令名称为key，value是一个JS函数。

JS函数内部可以做3件事情，具体包括：

(1)利用时间戳和自增性数字拼接而成的随机字符串作为ID标志符，创建结果处理函数，将ID标志符和结果处理函数进行关联，一个ID标志符可以映射一个唯一的结果处理函数，后续可以通过ID标识符来找到对应的结果处理函数进行调用。

(2)组装伪协议，伪协议用于实现Native端和H5页面之间的通信，伪协议格式具体为：

协议头://模块名称：指令名称：参数：ID标志符。

协议头由Native和H5统一约定。其余部分组装规则如下：

模块名称和指令名称是Native方法进行加载至JS环境时提供的，参数部分只能够传递字符串，并且传递格式为：参数类型：参数值。对于函数类型的参数(即结果处理函数)，拼接的是：f:callbackID。callbackID也就是ID标志符；对于非函数类型参数，拼接的是：s:args。args的具体传递数据格式由H5和Native通过提前约定的接口协议进行传输。

(3)H5在当前加载的H5页面动态创建一个iframe节点，src路径指定为伪协议，设置完成后将创建的iframe节点挂载到当前H5页面内，便可实现H5页面通过伪协议触发Native方法的调用。

应当理解，iframe是HTML标签，规定一个内联框架，一个内联框架被用来在当前HTML文档中嵌入另一个文档。

本申请通过按照业务线的不同，将提供给H5页面使用的Native方法按照模块划分，注入JS环境，可以实现H5页面对Native方法的调用。

步骤S202，创建第一网络请求对象，重写第一网络请求对象内的参数得到第二网络请求对象，并将页面发起的网络请求的请求标识和请求方式添加至第二网络请求对象中。

H5页面在发起网络请求的时候，无论是直接使用其原生对象，还是使用第三方库如JQery、Axios等发起的网络请求，其底层都是基于XMLHttpRequest实现的，XMLHttpRequest对象提供了对HTTP协议的完全的访问。

XMLHttpRequest对象用于在后台与服务端交换数据，它能够实现如下功能：

(1)在不重新加载页面的情况下更新网页；

(2)在页面已加载后从服务端请求数据；

(3)在页面已加载后从服务端接收数据；

(4)在后台向服务端发送数据。

XMLHttpRequest对象内的方法包括open方法、send方法、SetRequestHeader、getAllResponseHeaders、getResponseHeader以及Abort等。以下具体介绍一下open方法和send方法。

open方法的格式如下：

open(method,url,async,username,password)，

其中，method参数表示HTTP请求方法，一般包括get、post等，get表示从服务端获取数据，post表示向服务端发送数据；url参数表示请求的服务器的地址；async参数表示是否采用异步方法，true为异步，false为同步；username和password参数是可选的，分别表示用户名和密码，提供http认证机制需要的用户名和密码。

Send方法的格式为Send(content)，send方法用于向服务器发出请求，如果采用异步方式，该方法会立即返回。content可以指定为null表示不发送数据，其内容可以是DOM对象，输入流或字符串。

需要说明的是，open方法用于初始化网路请求的请求参数，以供send方法后续使用。

相关技术中，H5页面发起的网络请求会被Native端拦截，如果拦截的是POST请求，POST请求中的body数据被拦截之后就会丢掉，导致数据的缺失，为了解决这个问题，通过hook实现对XMLHttpRequest对象的open和send方法改造，实现对网络请求的转发。Hook就是指通过拦截重写，在原方法调用之前或者调用之后执行一段自定义的代码逻辑来扩展原方法。

在本实施例中，第一网络请求对象为XMLHttpRequest对象，重写第一网络请求对象内的参数得到第二网络请求对象，并将页面发起的网络请求的请求标识和请求方式添加至第二网络请求对象中的步骤具体包括：

将第一网络请求对象的对象初始化参数以及对象发送参数进行重写，得到第二网络请求对象，将请求标识和请求方式添加至第二网络请求对象的对象初始化参数，其中，对象初始化参数为open方法的参数，对象发送参数为send方法的参数。

需要说明的是，创建XMLHttpRequest对象，是在将Native方法加载至JS环境时同步创建。

具体地，重写XMLHttpRequest对象的open方法的参数，在open方法内部维护网络请求的请求标识(请求ID)、请求URL(Uniform Resource Locator,统一资源定位符)、请求方式等参数，请求标识同样以时间戳和自增性ID组成，作为当前网络请求的唯一标识(即唯一ID)，并将请求标识添加在请求URL的参数部分内。

具体地，重写XMLHttpRequest对象的send方法的参数，判断当前网络请求的请求方式，如果是POST请求，则将当前POST请求的body数据序列化后通过JSBridge通信通道转发给Native端，Native端会以网络请求的请求标识作为key进行缓存。

本实施例中通过对网络请求代理对象内的参数进行重写改造，可以实现对原方法的扩展，避免网络请求被拦截后丢掉数据的情况。

步骤S203，对所有网络请求进行拦截，根据请求方式确定网络请求是否需要代理转发，当网络请求为需要代理转发时，则根据请求标识由第二网络请求对象将网络请求转发至服务端。

在本实施例中，页面为H5页面，Native端会利用自身拥有的Protocol(协议)监听所有在H5页面内发起的网络请求，将H5页面发起的所有网络请求进行拦截，并根据不同场景进行代理转发。

需要强调的是，为进一步保证网络请求的私密和安全性，上述网络请求还可以存储于一区块链的节点中。

本申请所指区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。区块链(Blockchain)，本质上是一个去中心化的数据库，是一串使用密码学方法相关联产生的数据块，每一个数据块中包含了一批次网络交易的信息，用于验证其信息的有效性(防伪)和生成下一个区块。区块链可以包括区块链底层平台、平台产品服务层以及应用服务层等。

具体地，判断请求方式是否为传送数据方式，当请求方式为传送数据方式时，根据请求标识取出缓存的与请求标识对应的请求数据，并将请求数据添加在网络请求的请求体中，通过第二网络请求对象进行转发；当请求方式不为传送数据方式时，则网络请求不需要代理转发。

需要说明的是，传送数据方式为post方式，如果网络请求的请求方式为post方式，则将当前网络请求的请求数据，即body数据，序列化后转发给Native端，Native端会以网络请求的请求标识作为key进行缓存。因此，判断网络请求为请求方式为post方式，需要根据请求标识取出之前缓存的body数据，将其添加在网络请求的请求体内，再进行代理转发。

在本实施例一些可选的实现方式中，在对所有网络请求进行拦截的步骤之后还包括：

根据网络请求的请求头，确定网络请求是否为伪协议请求；

当网络请求不是伪协议请求时，则执行根据所述请求方式确定网络请求是否需要进行代理转发的步骤。

具体地，根据网络请求的请求头，判断网络请求是否为伪协议请求，若是，则网络请求不需要代理转发，由H5解析伪协议，获取到伪协议中的模块名称以及与模块名下对应的所有指令名称，并调用与指令名称对应的Native方法。

伪协议请求是H5页面通过通信通道用来调用Native注入的Native方法，由上述可知，伪协议的组装格式为：协议头://模块名称：指令名称：参数：ID标志符，根据拦截到的网络请求的协议头可以判断出来是否为伪协议，判断为伪协议后，进行伪协议逆向解析，在请求URL内分别解析出模块、指令、参数和ID标志符等各组成部门，利用runtime反射调用对应的模块方法后，再触发预先挂载的回调方法将结果回调给H5页面。

H5页面发起的网络请求包括常规请求和伪协议请求，常规请求分为两个类型：数据请求和资源请求。

对于数据请求，判断网络请求的请求方式是否为post方式，如果请求方式是post方式，根据请求标识取出之前缓存的body数据，将body数据添加在网络请求的请求体内，再通过第二网络请求对象进行代理转发，若请求方式不是post方式，则不需要代理转发，通过H5页面直接转发至服务端。

对于资源请求，判断网络请求的请求URL是否有对应的缓存，如果在本地中有缓存，则将请求URL中参数部分携带的资源版本号与本地缓存的版本号进行比对，根据版本号比较的结果确定是否使用缓存，如果不使用缓存或者在本地没有命中任何缓存，则走正常的网络请求获取资源，在资源下载后，协同版本号同步缓存至本地。

步骤S204，在接收到服务端发送的处理完成指令时，从服务端获取到加载页面所需的资源数据。

服务端根据接收到的网络请求获取到加载H5页面所需的资源数据，在接收到服务端发送的处理完成指令时，Native端从服务端获取到资源数据。

步骤S205，根据资源数据调用原生指令加载出页面，并将资源数据缓存至本地。

具体地，由Native端创建的WebView调用原生指令，将返回的资源数据进行展示，从而加载出H5页面。

在服务端返回资源数据后，根据当前网络请求的请求URL携带的版本号，将资源数据和版本号同步缓存至本地，用来在后续再次打开相同数据时，无需重复发送网络请求，直接使用本地资源，减少流量消耗。

此外，对于一些静态页面，采取了直出的方式进行渲染加速。具体地，Native端在发起HTML请求时，服务端利用Vue Server Render技术对HTML页面内的内容和前端代码进行整合，直接输出完整的HTML页面代码，Native端接受到直出的页面数据后，可以直接渲染到WebView上，无需请求加载CSS、JS等文件，节省了大量的时间消耗，增加页面打开速度。

本申请通过将第一网络请求对象内的参数进行重写得到第二网络请求对象，第二网络请求对象可以将H5页面发起的所有网络请求进行拦截，根据需要进行代理转发，避免存在网络请求被拦截丢掉数据的情况；另外，无需额外增加工作量来制作离线包文件，同时，在开发流程中，可以将加载H5页面所需的资源数据进行缓存，后续在不升级文件版本情况下可以直接利用缓存文件，无需二次下载，可以加速H5页面展示，减少WebView加载时的白屏时间，提升用户体验度。

在本实施例的一些可选的实现方式中，在对所有网络请求进行拦截的步骤之后，还可以执行以下步骤：

将网络请求携带的cookie数据进行同步缓存。

在Native端转发网络请求的过程中，可能因系统机制原因会出现Cookie(储存在用户本地终端上的数据)丢失、不完整的问题。为了避免出现Cookie丢失的问题，需要在网络请求转发前将Cookie添加至请求头内。

在原生H5页面内的所有网络请求携带的Cookie数据来源有两种方式，第一种为网络请求响应头的字段Set-Cookie携带的数据，第二种为H5利用document.cookie设置。

对于Native来说，Set-Cookie可以直接缓存至Native端的CookieStorage中，而H5设置的document.cookie则不会。这里Native需要在注入JS的时候同步对document.cookie进行改造，即利用JavaScript的Object.definePropety方法重写document.cookie的set方法，在设置cookie的时候利用JSBridge将Cookie数据转发给Native保存至其cookieStorage中。完成后，后续的所有被拦截的网络请求都将同步携带CookieStorage中保存的数据。

本申请可用于众多通用或专用的计算机系统环境或配置中。例如：个人计算机、服务器计算机、手持设备或便携式设备、平板型设备、多处理器系统、基于微处理器的系统、置顶盒、可编程的消费电子设备、网络PC、小型计算机、大型计算机、包括以上任何系统或设备的分布式计算环境等等。本申请可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本申请，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机可读指令来指令相关的硬件来完成，该计算机可读指令可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，前述的存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)等非易失性存储介质，或随机存储记忆体(Random Access Memory，RAM)等。

应该理解的是，虽然附图的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，其可以以其他的顺序执行。而且，附图的流程图中的至少一部分步骤可以包括多个子步骤或者多个阶段，这些子步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，其执行顺序也不必然是依次进行，而是可以与其他步骤或者其他步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。

进一步参考图4，作为对上述图2所示方法的实现，本申请提供了一种客户端离线化H5页面加载装置的一个实施例，该装置实施例与图2所示的方法实施例相对应，该装置具体可以应用于各种电子设备中。

如图4所示，本实施例所述的客户端离线化H5页面加载装置400包括：挂载注入模块401、重写模块402、代理转发模块403、获取模块404以及加载缓存模块405。其中：

挂载注入模块401用于预先挂载注入指令至脚本环境，并利用所述注入指令，将原生指令加载至所述脚本环境；

重写模块402用于创建第一网络请求对象，重写所述第一网络请求对象内的参数得到第二网络请求对象，并将页面发起的网络请求的请求标识和请求方式添加至所述第二网络请求对象中；

代理转发模块403用于对所有所述网络请求进行拦截，根据所述请求方式确定所述网络请求是否需要代理转发，当所述网络请求为需要代理转发时，则根据所述请求标识由所述第二网络请求对象将所述网络请求转发至服务端；

获取模块404用于在接收到所述服务端发送的处理完成指令时，从所述服务端获取到加载页面所需的资源数据；

加载缓存模块405用于根据所述资源数据调用所述原生指令加载出所述页面，并将所述资源数据缓存至本地。

需要强调的是，为进一步保证网络请求的私密和安全性，上述网络请求还可以存储于一区块链的节点中。

上述提供的客户端离线化H5页面加载装置，通过将第一网络请求对象内的参数进行重写得到第二网络请求对象，第二网络请求对象可以将H5页面发起的所有网络请求进行拦截，根据需要进行代理转发，避免存在网络请求被拦截丢掉数据的情况；另外，无需额外增加工作量来制作离线包文件，同时，在开发流程中，可以将加载H5页面所需的资源数据进行缓存，后续在不升级文件版本情况下可以直接利用缓存文件，无需二次下载，可以加速H5页面展示，减少WebView加载时的白屏时间，提升用户体验度。

在本实施例中，挂载注入模块401包括创建子模块和挂载子模块，创建子模块用于创建脚本文件，在所述脚本文件内声明注入指令；挂载子模块用于创建网页视图，并将所述脚本文件声明的所述注入指令挂载至所述网页视图的脚本环境。

在本实施例中，挂载注入模块401还包括注入子模块和缓存子模块，注入子模块用于按模块加载原生指令的指令名称，利用所述注入指令，将所述模块的模块名称和所述模块对应的所有所述指令名称加载至所述脚本环境；缓存子模块用于将所述模块名称和对应的所有所述指令名称，以预设存储方式缓存至所述脚本环境的脚本对象内，并组装形成伪协议。

在本实施例的一些可选的实现方式中，重写模块402进一步用于：

将所述第一网络请求对象的对象初始化参数以及对象发送参数进行重写，得到所述第二网络请求对象；

将所述请求标识和所述请求方式添加至所述第二网络请求对象的对象初始化参数中。

本实施例中通过对第一网络请求对象内的参数进行重写改造得到第二网络请求对象，可以实现对原方法的扩展，避免网络请求被拦截后丢掉数据的情况。

在本实施例的一些可选的实现方式中，代理转发模块403进一步用于：

判断所述请求方式是否为传送数据方式；

当所述请求方式为传送数据方式时，根据所述请求标识取出缓存的与所述请求标识对应的请求数据，并将所述请求数据添加到所述网络请求的请求体中，通过所述第二网络请求对象进行转发；

当所述请求方式不为传送数据方式时，则所述网络请求不需要代理转发。

在本实施例中，代理转发模块403进一步用于：

根据所述网络请求的请求头，确定所述网络请求是否为伪协议请求；

当所述网络请求不是伪协议请求时，则执行所述根据所述请求方式确定所述网络请求是否需要进行代理转发的步骤。

在本实施例的一些可选的实现方式中，加载缓存模块405还用于将所述网络请求携带的cookie数据进行同步缓存。

通过这种方式，可以避免出现Cookie丢失的问题。

为解决上述技术问题，本申请实施例还提供计算机设备。具体请参阅图5，图5为本实施例计算机设备基本结构框图。

所述计算机设备5包括通过系统总线相互通信连接存储器51、处理器52、网络接口53。需要指出的是，图中仅示出了具有组件51-53的计算机设备5，但是应理解的是，并不要求实施所有示出的组件，可以替代的实施更多或者更少的组件。其中，本技术领域技术人员可以理解，这里的计算机设备是一种能够按照事先设定或存储的指令，自动进行数值计算和/或信息处理的设备，其硬件包括但不限于微处理器、专用集成电路(ApplicationSpecific Integrated Circuit，ASIC)、可编程门阵列(Field－Programmable GateArray，FPGA)、数字处理器(Digital Signal Processor，DSP)、嵌入式设备等。

所述计算机设备可以是桌上型计算机、笔记本、掌上电脑及云端服务器等计算设备。所述计算机设备可以与用户通过键盘、鼠标、遥控器、触摸板或声控设备等方式进行人机交互。

所述存储器51至少包括一种类型的可读存储介质，所述可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，所述存储器51可以是所述计算机设备5的内部存储单元，例如该计算机设备5的硬盘或内存。在另一些实施例中，所述存储器51也可以是所述计算机设备5的外部存储设备，例如该计算机设备5上配备的插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(FlashCard)等。当然，所述存储器51还可以既包括所述计算机设备5的内部存储单元也包括其外部存储设备。本实施例中，所述存储器51通常用于存储安装于所述计算机设备5的操作系统和各类应用软件，例如客户端离线化H5页面加载方法的计算机可读指令等。此外，所述存储器51还可以用于暂时地存储已经输出或者将要输出的各类数据。

所述处理器52在一些实施例中可以是中央处理器(Central Processing Unit，CPU)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器52通常用于控制所述计算机设备5的总体操作。本实施例中，所述处理器52用于运行所述存储器51中存储的计算机可读指令或者处理数据，例如运行所述客户端离线化H5页面加载方法的计算机可读指令。

所述网络接口53可包括无线网络接口或有线网络接口，该网络接口53通常用于在所述计算机设备5与其他电子设备之间建立通信连接。

本实施例通过处理器执行存储在存储器的计算机可读指令时实现如上述实施例客户端离线化H5页面加载方法的步骤，通过将第一网络请求对象内的参数进行重写得到第二网络请求对象，第二网络请求对象可以将H5页面发起的所有网络请求进行拦截，根据需要进行代理转发，避免存在网络请求被拦截丢掉数据的情况；另外，无需额外增加工作量来制作离线包文件，同时，在开发流程中，可以将加载H5页面所需的资源数据进行缓存，后续在不升级文件版本情况下可以直接利用缓存文件，无需二次下载，可以加速H5页面展示，减少WebView加载时的白屏时间，提升用户体验度。

本申请还提供了另一种实施方式，即提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机可读指令，所述计算机可读指令可被至少一个处理器执行，以使所述至少一个处理器执行如上述的客户端离线化H5页面加载方法的步骤，通过将第一网络请求对象内的参数进行重写得到第二网络请求对象，第二网络请求对象可以将H5页面发起的所有网络请求进行拦截，根据需要进行代理转发，避免存在网络请求被拦截丢掉数据的情况；另外，无需额外增加工作量来制作离线包文件，同时，在开发流程中，可以将加载H5页面所需的资源数据进行缓存，后续在不升级文件版本情况下可以直接利用缓存文件，无需二次下载，可以加速H5页面展示，减少WebView加载时的白屏时间，提升用户体验度。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本申请各个实施例所述的方法。

显然，以上所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例，附图中给出了本申请的较佳实施例，但并不限制本申请的专利范围。本申请可以以许多不同的形式来实现，相反地，提供这些实施例的目的是使对本申请的公开内容的理解更加透彻全面。尽管参照前述实施例对本申请进行了详细的说明，对于本领域的技术人员来而言，其依然可以对前述各具体实施方式所记载的技术方案进行修改，或者对其中部分技术特征进行等效替换。凡是利用本申请说明书及附图内容所做的等效结构，直接或间接运用在其他相关的技术领域，均同理在本申请专利保护范围之内。

Claims (10)

1.一种客户端离线化H5页面加载方法，其特征在于，包括下述步骤：

预先挂载注入指令至脚本环境，并利用所述注入指令，将原生指令加载至所述脚本环境；

创建第一网络请求对象，重写所述第一网络请求对象内的参数得到第二网络请求对象，并将页面发起的网络请求的请求标识和请求方式添加至所述第二网络请求对象中；

对所有所述网络请求进行拦截，根据所述请求方式确定所述网络请求是否需要代理转发，当所述网络请求需要代理转发时，则根据所述请求标识由所述第二网络请求对象将所述网络请求转发至服务端；

在接收到所述服务端发送的处理完成指令时，从所述服务端获取到加载页面所需的资源数据；及

根据所述资源数据调用所述原生指令加载出所述页面，并将所述资源数据缓存至本地。

2.根据权利要求1所述的客户端离线化H5页面加载方法，其特征在于，所述预先挂载注入指令至脚本环境的步骤包括：

创建脚本文件，在所述脚本文件内声明注入指令；

创建网页视图，并将所述脚本文件声明的所述注入指令挂载至所述网页视图的脚本环境。

3.根据权利要求2所述的客户端离线化H5页面加载方法，其特征在于，所述利用所述注入指令，将原生指令加载至所述脚本环境的步骤包括：

按模块加载原生指令的指令名称，利用所述注入指令，将所述模块的模块名称和所述模块对应的所有所述指令名称加载至所述脚本环境；

将所述模块名称和对应的所有所述指令名称，以预设存储方式缓存至所述脚本环境的脚本对象内，并组装形成伪协议。

4.根据权利要求1所述的客户端离线化H5页面加载方法，其特征在于，所述重写所述第一网络请求对象内的参数得到第二网络请求对象，并将页面发起的网络请求的请求信息添加至所述第二网络请求对象中的步骤包括：

将所述第一网络请求对象的对象初始化参数以及对象发送参数进行重写，得到所述第二网络请求对象；

将所述请求标识和所述请求方式添加至所述第二网络请求对象的对象初始化参数中。

5.根据权利要求1所述的客户端离线化H5页面加载方法，其特征在于，所述根据所述请求方式确定所述网络请求是否进行代理转发的步骤包括：

判断所述请求方式是否为传送数据方式；

当所述请求方式为传送数据方式时，根据所述请求标识取出缓存的与所述请求标识对应的请求数据，并将所述请求数据添加到所述网络请求的请求体中，通过所述第二网络请求对象进行转发；

当所述请求方式不为传送数据方式时，则所述网络请求不需要代理转发。

6.根据权利要求3所述的客户端离线化H5页面加载方法，其特征在于，在所述对所有所述网络请求进行拦截的步骤之后还包括：

根据所述网络请求的请求头，确定所述网络请求是否为伪协议请求；

当所述网络请求不是伪协议请求时，则执行所述根据所述请求方式确定所述网络请求是否需要进行代理转发的步骤。

7.根据权利要求1至6中任一项所述的客户端离线化H5页面加载方法，其特征在于，在所述对所有所述网络请求进行拦截的步骤之后还包括：

将所述网络请求携带的cookie数据进行同步缓存。

8.一种客户端离线化H5页面加载装置，其特征在于，包括：

挂载注入模块，用于预先挂载注入指令至脚本环境，并利用所述注入指令，将原生指令加载至所述脚本环境；

重写模块，用于创建第一网络请求对象，重写所述第一网络请求对象内的参数得到第二网络请求对象，并将页面发起的网络请求的请求标识和请求方式添加至所述第二网络请求对象中；

代理转发模块，用于对所有所述网络请求进行拦截，根据所述请求方式确定所述网络请求是否需要代理转发，当所述网络请求为需要代理转发时，则根据所述请求标识由所述第二网络请求对象将所述网络请求转发至服务端；

获取模块，用于在接收到所述服务端发送的处理完成指令时，从所述服务端获取到加载页面所需的资源数据；及

加载缓存模块，用于根据所述资源数据调用所述原生指令加载出所述页面，并将所述资源数据缓存至本地。

9.一种计算机设备，包括存储器和处理器，所述存储器中存储有计算机可读指令，所述处理器执行所述计算机可读指令时实现如权利要求1至7中任一项所述的客户端离线化H5页面加载方法的步骤。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机可读指令，所述计算机可读指令被处理器执行时实现如权利要求1至7中任一项所述的客户端离线化H5页面加载方法的步骤。

Images