CN111859211A - 网页离线访问方法、装置、终端及存储介质 - Google Patents
网页离线访问方法、装置、终端及存储介质 Download PDFInfo
- Publication number
- CN111859211A CN111859211A CN201911402825.5A CN201911402825A CN111859211A CN 111859211 A CN111859211 A CN 111859211A CN 201911402825 A CN201911402825 A CN 201911402825A CN 111859211 A CN111859211 A CN 111859211A
- Authority
- CN
- China
- Prior art keywords
- service worker
- browser
- terminal
- cache
- data
- 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.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 59
- 238000009877 rendering Methods 0.000 claims abstract description 21
- 230000003068 static effect Effects 0.000 claims description 51
- 230000015654 memory Effects 0.000 claims description 26
- 238000004590 computer program Methods 0.000 claims description 8
- 238000013500 data storage Methods 0.000 claims description 5
- 238000013461 design Methods 0.000 description 23
- 230000008569 process Effects 0.000 description 9
- 238000010586 diagram Methods 0.000 description 6
- 238000005516 engineering process Methods 0.000 description 3
- 238000004891 communication Methods 0.000 description 2
- 238000011161 development Methods 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 238000012545 processing Methods 0.000 description 2
- 230000004044 response Effects 0.000 description 2
- 230000000007 visual effect Effects 0.000 description 2
- 230000006978 adaptation Effects 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 230000007812 deficiency Effects 0.000 description 1
- 230000006870 function Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000005192 partition Methods 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 230000001360 synchronised effect Effects 0.000 description 1
- 238000012546 transfer Methods 0.000 description 1
Images
Classifications
-
- 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
Abstract
本发明提供一种网页离线访问方法、装置、终端及存储介质，该方法，包括：当接收到离线访问请求时，根据终端的浏览器，确定离线访问方式；根据所述离线访问方式，从对应的缓存中获取在线访问时的页面数据；对所述页面数据进行渲染，得到展示页面。本发明可以根据终端安装的浏览器选择离线访问方式，以确保各种浏览器均能够正常地访问离线页面。
Description
技术领域
本发明涉及互联网技术领域，尤其涉及一种网页离线访问方法、装置、终端及存储介质。
背景技术
随着移动互联网的广泛普及，移动终端可以随时随地地实现网络连接，通过安装在移动终端的浏览器实现网页访问，及时获取到用户所需的各类信息资讯。
目前，一般是采样http协议的缓存方案，即对需要离线缓存的文件及内容，在http响应头中设置文件缓存过期时间。如果用户打开过网页，则在下次再访问的时候，浏览器就会从本地缓存中读取相应的资源文件，实现数据读取。
但是，当处于断网状态，且用户点击浏览器刷新按钮时，浏览器会强制对缓存资源发起网络请求，导致用户无法进行离线查看。
发明内容
本发明提供一种网页离线访问方法、装置、终端及存储介质，可以根据终端安装的浏览器选择离线访问方式，以确保各种浏览器均能够正常地访问离线页面。
第一方面，本发明实施例提供一种网页离线访问方法，包括：
当接收到离线访问请求时，根据终端的浏览器，确定离线访问方式；
根据所述离线访问方式，从对应的缓存中获取在线访问时的页面数据；
对所述页面数据进行渲染，得到展示页面。
在一种可能的设计中，所述根据终端的浏览器，确定离线访问方式，包括：
确定终端的浏览器支持PWA Service Worker时，采用Service Worker方式进行离线访问；
若终端的浏览器不支持PWA Service Worker时，采用应用缓存方式进行离线访问。
在一种可能的设计中，根据所述离线访问方式，从对应的缓存中获取在线访问时的页面数据，包括：
确定终端的浏览器支持PWA Service Worker时，通过Service Worker拦截针对Server端的数据接口请求，并从本地的Service Worker缓存中读取Server端的接口数据；
通过Service Worker拦截针对静态资源文件的网络请求，并从本地的ServiceWorker缓存中，读取上一次请求缓存的静态资源文件，所述静态资源文件包括：html文件、JS文件、CSS文件。
在一种可能的设计中，根据所述离线访问方式，从对应的缓存中获取在线访问时的页面数据，包括：
若终端的浏览器不支持PWA Service Worker时，从应用缓存中读取上一次请求缓存的静态资源文件；
从本地存储器中读取Server端的接口数据。
在一种可能的设计中，对所述页面数据进行渲染，得到展示页面，包括：
将所述Server端的接口数据和上一次请求缓存的静态资源文件进行结合和渲染，得到所述展示页面。
在一种可能的设计中，在根据终端的浏览器，确定离线访问方式之前，还包括：
根据终端的浏览器，确定在线访问时的页面数据的存储方式；
根据所述存储方式，将所述页面数据存储到对应的缓存中。
在一种可能的设计中，所述根据终端的浏览器，确定在线访问时的页面数据的存储方式，包括：
确定终端的浏览器支持PWA Service Worker时，采用Service Worker方式进行页面数据存储；
若终端的浏览器不支持PWA Service Worker时，采用应用缓存方式进行页面数据存储。
在一种可能的设计中，所述根据所述存储方式，将所述页面数据存储到对应的缓存中，包括：
确定终端的浏览器支持PWA Service Worker时，通过Service Worker拦截针对静态资源文件的网络请求；
将网络请求反馈的所述静态资源文件存储到本地的Service Worker缓存中；
通过Service Worker拦截针对Server端的数据接口请求；
将所述数据接口请求反馈的Server端的接口数据存储到本地的Service Worker缓存中。
在一种可能的设计中，所述根据所述存储方式，将所述页面数据存储到对应的缓存中，包括：
若终端的浏览器不支持PWA Service Worker时，将manifest文件列出的静态资源文件存储到应用缓存中；
将Server端的接口数据存储到本地存储器中。
第二方面，本发明实施例提供一种网页离线访问装置，包括：
第一确定模块，用于在接收到离线访问请求时，根据终端的浏览器，确定离线访问方式；
获取模块，用于根据所述离线访问方式，从对应的缓存中获取在线访问时的页面数据；
展示模块，用于对所述页面数据进行渲染，得到展示页面。
在一种可能的设计中，所述第一确定模块，具体用于：
确定终端的浏览器支持PWA Service Worker时，采用Service Worker方式进行离线访问；
若终端的浏览器不支持PWA Service Worker时，采用应用缓存方式进行离线访问。
在一种可能的设计中，所述获取模块，具体用于：
确定终端的浏览器支持PWA Service Worker时，通过Service Worker拦截针对Server端的数据接口请求，并从本地的Service Worker缓存中读取Server端的接口数据；
通过Service Worker拦截针对静态资源文件的网络请求，并从本地的ServiceWorker缓存中，读取上一次请求缓存的静态资源文件，所述静态资源文件包括：html文件、JS文件、CSS文件。
在一种可能的设计中，所述获取模块，具体用于：
若终端的浏览器不支持PWA Service Worker时，从应用缓存中读取上一次请求缓存的静态资源文件；
从本地存储器中读取Server端的接口数据。
在一种可能的设计中，所述展示模块，具体用于：
将所述Server端的接口数据和上一次请求缓存的静态资源文件进行结合和渲染，得到所述展示页面。
在一种可能的设计中，还包括：
第二确定模块，用于根据终端的浏览器，确定在线访问时的页面数据的存储方式；
存储模块，用于根据所述存储方式，将所述页面数据存储到对应的缓存中。
在一种可能的设计中，所述第二确定模块，具体用于：
确定终端的浏览器支持PWA Service Worker时，采用Service Worker方式进行页面数据存储；
若终端的浏览器不支持PWA Service Worker时，采用应用缓存方式进行页面数据存储。
在一种可能的设计中，所述存储模块，具体用于：
确定终端的浏览器支持PWA Service Worker时，通过Service Worker拦截针对静态资源文件的网络请求；
将网络请求反馈的所述静态资源文件存储到本地的Service Worker缓存中；
通过Service Worker拦截针对Server端的数据接口请求；
将所述数据接口请求反馈的Server端的接口数据存储到本地的Service Worker缓存中。
在一种可能的设计中，所述存储模块，具体用于：
若终端的浏览器不支持PWA Service Worker时，将manifest文件列出的静态资源文件存储到应用缓存中；
将Server端的接口数据存储到本地存储器中。
第三方面，本发明实施例提供一种终端，包括：
存储器，用于存储程序；
处理器，用于执行所述存储器存储的所述程序，当所述程序被执行时，所述处理器用于执行如第一方面中任一项所述的方法。
第四方面，本发明实施例提供一种计算机可读存储介质，包括：计算机程序，当其在计算机上运行时，使得计算机执行第一方面中任一所述的方法。
本发明提供的网页离线访问方法、装置、终端及存储介质，通过当接收到离线访问请求时，根据终端的浏览器，确定离线访问方式；根据所述离线访问方式，从对应的缓存中获取在线访问时的页面数据；对所述页面数据进行渲染，得到展示页面。从而可以根据终端安装的浏览器选择离线访问方式，以确保各种浏览器均能够正常地访问离线页面，尤其适用于离线访问能力差的h5页面的离线展示。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
图1为h5网页的展示界面示意图；
图2为本发明实施例一提供的网页离线访问方法的流程图；
图3为本发明实施例二提供的网页离线访问方法的流程图；
图4为本发明实施例三提供的网页离线访问装置的结构示意图；
图5为本发明实施例四提供的网页离线访问装置的结构示意图；
图6为本发明实施例五提供的终端的结构示意图。
通过上述附图，已示出本公开明确的实施例，后文中将有更详细的描述。这些附图和文字描述并不是为了通过任何方式限制本公开构思的范围，而是通过参考特定实施例为本领域技术人员说明本公开的概念。
具体实施方式
为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”、“第三”、“第四”等(如果存在)是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本发明的实施例例如能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
目前，一般是采样http协议的缓存方案，即对需要离线缓存的文件及内容，在http响应头中设置文件缓存过期时间。如果用户打开过网页，则在下次再访问的时候，浏览器就会从本地缓存中读取相应的资源文件，实现数据读取。然而，当处于断网状态，且用户点击浏览器刷新按钮时，浏览器会强制对缓存资源发起网络请求，导致用户无法进行离线查看。
针对现有技术中的问题，本发明旨在提供一种网页离线访问方法、装置、终端及存储介质，通过在接收到离线访问请求时，根据终端的浏览器，确定离线访问方式；并根据离线访问方式，从对应的缓存中获取在线访问时的页面数据；最后对该页面数据进行渲染，得到展示页面。本发明可以根据终端安装的浏览器选择离线访问方式，以确保各种浏览器均能够正常地访问离线页面，尤其适用于离线访问能力差的h5页面的离线展示，离线访问效率高，内容展示完整，用户体验佳。
下面以具体地实施例对本发明的技术方案进行详细说明。下面这几个具体的实施例可以相互结合，对于相同或相似的概念或过程可能在某些实施例不再赘述。
图1为h5网页的展示界面示意图。h5网页又称为HTML5页面，是标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改。HTML5的设计目的是为了在移动设备上支持多媒体。以手机为例，移动h5网页在用户手机应用中占据一定比重。但是，h5页面相对原生APP应用有一些体验和功能上的不足(如流畅度、网页打开白屏等)。当用户处于离线断网的状态时(如没信号、欠费、没流量)，用户可能需要打开上一次访问的h5页面。然而，h5页面的离线访问能力较差，使得浏览器无法正常打开上一次访问的h5页面。
针对h5页面离线访问能力差的缺陷，本实施例通过在接收到离线访问请求时，根据终端的浏览器，确定离线访问方式；根据该离线访问方式，从对应的缓存中获取在线访问时的页面数据；最后对页面数据进行渲染，得到展示页面。从而可以根据终端安装的浏览器选择离线访问方式，以确保各种浏览器均能够在离线情况下正常地访问h5页面。
下面以具体地实施例对本发明的技术方案以及本申请的技术方案如何解决上述技术问题进行详细说明。下面这几个具体的实施例可以相互结合，对于相同或相似的概念或过程可能在某些实施例中不再赘述。下面将结合附图，对本发明的实施例进行描述。
图2为本发明实施例一提供的网页离线访问方法的流程图，如图2所示，本实施例中的方法可以包括：
S101、当接收到离线访问请求时，根据终端的浏览器，确定离线访问方式。
本实施例中的终端是指可以安装浏览器的电子设备(例如手机、平板电脑、智能手表等等)，可以通过浏览器进行网页的访问。随着互联网技术的发展，浏览器的版本众多，其支持的功能不同。因此，对于不同的浏览器其支持的离线访问方式也不同。例如，浏览器内核可以为Webkit内核、Trident内核、Gecko内核、Presto内核或Blink内核等，不同的浏览器其支持的技术可能不兼容，因此本实施例中首先根据浏览器来确定离线访问方式。
S102、根据离线访问方式，从对应的缓存中获取在线访问时的页面数据。
在一种可选的实施方式中，确定终端的浏览器支持PWA Service Worker时，采用Service Worker方式进行离线访问；若终端的浏览器不支持PWA Service Worker时，采用应用缓存方式(application Cache)进行离线访问。
示例性的，确定终端的浏览器支持PWA Service Worker时，通过ServiceWorker拦截针对Server端的数据接口请求，并从本地的Service Worker缓存中读取Server端的接口数据；通过Service Worker拦截针对静态资源文件的网络请求，并从本地的ServiceWorker缓存中，读取上一次请求缓存的静态资源文件，静态资源文件包括：html文件、JS文件、CSS文件。
示例性的，若终端的浏览器不支持PWA Service Worker时，从应用缓存中读取上一次请求缓存的静态资源文件；从本地存储器(local Storage)中读取Server端的接口数据。
本实施例中，通过PWA Service Worker拦截网络请求，并利用可编程可控制的方式将网页静态资源(html文件、JS文件、CSS文件)和server端接口数据缓存进ServiceWorker cache中。当用户离线访问页面时，直接从Service Worker cache中取出网页静态资源和server端接口数据，进而渲染出离线页面。当浏览器不支持PWA Service Worker时，可以选择进入应用缓存方式，从而保证用户在所有浏览器中都可以正常地访问离线页面。
S103、对页面数据进行渲染，得到展示页面。
本实施例中，将Server端的接口数据和上一次请求缓存的静态资源文件进行结合和渲染，得到展示页面。
本实施例可以用于市面上所有需要适配的移动web前端开发产品中，如产品官网的HTML5页面、公众号的HTML5页面、移动网络空间HTML5页面以及其他HTML5主导的页面等。
具体地，浏览器内核可以为Webkit内核、Trident内核、Gecko内核、Presto内核或Blink内核等。首先将Server端的接口数据和上一次请求缓存的静态资源文件进行结合，然后获取电子设备的屏幕宽度。其中，电子设备的屏幕用于展示待渲染的网页，电子设备可以为服务器，例如：云端服务器；也可以为智能手机、平板电脑、智能手表、个人计算机(Personal Computer；以下简称：PC)或车载智能终端等智能终端设备。需要说明的是，本实施例对电子设备的形态不作限定。
进一步地，获取网页的文档属性标签，其中，文档属性标签包括配置信息，配置信息用于表征网页视口的宽度与电子设备的屏幕宽度的对应关系。其中，网页的文档属性标签可以为meta标签，meta标签是在HTML网页源代码中一个重要的HTML标签，meta标签可以用来描述一个HTML网页文档的属性，例如作者、日期和时间、网页描述、关键词、页面刷新等。本实施例中，meta标签包括配置信息，配置信息用于表征网页视口的宽度与电子设备的屏幕宽度的对应关系。
具体地，网页视口的宽度与电子设备的屏幕宽度的对应关系可以为：网页视口的宽度与电子设备的屏幕宽度相等，或者网页视口的宽度与电子设备的屏幕宽度的比例为1:2等等。需要说明的是，本实施例对网页视口的宽度按和电子设备的屏幕宽度的比例关系不作限定。
具体地，根据配置信息，渲染与电子设备的屏幕宽度相匹配的网页视口(viewport)。其中，网页视口即电子设备的屏幕上用来显示待渲染的网页的区域，更具体地，网页视口是浏览器上用来显示待渲染的网页的那部分区域，但网页视口又不局限于浏览器可视区域的大小，可能比浏览器可视区域要大，也可能比浏览器可视区域要小。获取网页的像素与网页根元素的字体大小的比例。其中，网页根元素的字体大小可以用CSS长度单位(rem)表示。网页的像素与网页根元素的字体大小的比例可以在具体实现时，根据系统性能和/或实现需求等自行设定。当电子设备的屏幕宽度小于或等于预定阈值时，根据电子设备的屏幕宽度、网页的像素与网页根元素的字体大小的比例和预定阈值，计算所需的网页根元素的字体大小。其中，预定阈值的大小可以在具体实现时，根据系统性能和/或实现需求等自行设定。最后，根据网页根元素的字体大小对网页进行缩放处理，以在电子设备的屏幕上展示缩放处理后的渲染页面。具体地，在获取网页根元素的字体大小之后，可以根据获取的网页根元素的字体大小，对待渲染的网页进行缩放处理，从而使待渲染的网页被缩放到合适的大小。
本实施例，通过当接收到离线访问请求时，根据终端的浏览器，确定离线访问方式；根据离线访问方式，从对应的缓存中获取在线访问时的页面数据；对页面数据进行渲染，得到展示页面。从而可以根据终端安装的浏览器选择离线访问方式，以确保各种浏览器均能够正常地访问离线页面，尤其适用于离线访问能力差的h5页面的离线展示。
图3为本发明实施例二提供的网页离线访问方法的流程图，如图3所示，本实施例中的方法可以包括：
S201、根据终端的浏览器，确定在线访问时的页面数据的存储方式。
在一种可选的实施方式中，确定终端的浏览器支持PWA Service Worker时，采用Service Worker方式进行页面数据存储。若终端的浏览器不支持PWA Service Worker时，采用应用缓存方式进行页面数据存储。
S202、根据存储方式，将页面数据存储到对应的缓存中。
示例性的，确定终端的浏览器支持PWA Service Worker时，通过Service Worker拦截针对静态资源文件的网络请求；将网络请求反馈的静态资源文件存储到本地的Service Worker缓存中；通过Service Worker拦截针对Server端的数据接口请求；将数据接口请求反馈的Server端的接口数据存储到本地的Service Worker缓存中。
示例性的，若终端的浏览器不支持PWA Service Worker时，将manifest文件列出的静态资源文件存储到应用缓存中；将Server端的接口数据存储到本地存储器中。
S203、当接收到离线访问请求时，根据终端的浏览器，确定离线访问方式。
S204、根据离线访问方式，从对应的缓存中获取在线访问时的页面数据。
S205、对页面数据进行渲染，得到展示页面。
本实施例中，步骤S203～步骤S205的具体实现过程和技术原理请参见图2所示的方法中步骤S101～步骤S103中的相关描述，此处不再赘述。
本实施例，通过当接收到离线访问请求时，根据终端的浏览器，确定离线访问方式；根据离线访问方式，从对应的缓存中获取在线访问时的页面数据；对页面数据进行渲染，得到展示页面。从而可以根据终端安装的浏览器选择离线访问方式，以确保各种浏览器均能够正常地访问离线页面，尤其适用于离线访问能力差的h5页面的离线展示。
图4为本发明实施例三提供的网页离线访问装置的结构示意图，如图4所示，本实施例中的网页离线访问装置可以包括：
第一确定模块31，用于在接收到离线访问请求时，根据终端的浏览器，确定离线访问方式；
获取模块32，用于根据离线访问方式，从对应的缓存中获取在线访问时的页面数据；
展示模块33，用于对页面数据进行渲染，得到展示页面。
在一种可能的设计中，第一确定模块31，具体用于：
确定终端的浏览器支持PWA Service Worker时，采用Service Worker方式进行离线访问；
若终端的浏览器不支持PWA Service Worker时，采用应用缓存方式进行离线访问。
在一种可能的设计中，获取模块32，具体用于：
确定终端的浏览器支持PWA Service Worker时，通过Service Worker拦截针对Server端的数据接口请求，并从本地的Service Worker缓存中读取Server端的接口数据；
通过Service Worker拦截针对静态资源文件的网络请求，并从本地的ServiceWorker缓存中，读取上一次请求缓存的静态资源文件，静态资源文件包括：html文件、JS文件、CSS文件。
在一种可能的设计中，获取模块32，具体用于：
若终端的浏览器不支持PWA Service Worker时，从应用缓存中读取上一次请求缓存的静态资源文件；
从本地存储器中读取Server端的接口数据。
在一种可能的设计中，展示模块33，具体用于：
将Server端的接口数据和上一次请求缓存的静态资源文件进行结合和渲染，得到展示页面。
本实施例的车辆停车点的定位装置，可以执行图2所示方法中的技术方案，其具体实现过程和技术原理参见图2所示方法中的相关描述，此处不再赘述。
本实施例，通过当接收到离线访问请求时，根据终端的浏览器，确定离线访问方式；根据离线访问方式，从对应的缓存中获取在线访问时的页面数据；对页面数据进行渲染，得到展示页面。从而可以根据终端安装的浏览器选择离线访问方式，以确保各种浏览器均能够正常地访问离线页面，尤其适用于离线访问能力差的h5页面的离线展示。
图5为本发明实施例四提供的网页离线访问装置的结构示意图，如图5所示，本实施例的车辆停车点的定位装置在图5所示装置的基础上，还可以包括：
第二确定模块34，用于根据终端的浏览器，确定在线访问时的页面数据的存储方式；
存储模块35，用于根据存储方式，将页面数据存储到对应的缓存中。
在一种可能的设计中，第二确定模块34，具体用于：
确定终端的浏览器支持PWA Service Worker时，采用Service Worker方式进行页面数据存储；
若终端的浏览器不支持PWA Service Worker时，采用应用缓存方式进行页面数据存储。
在一种可能的设计中，存储模块35，具体用于：
确定终端的浏览器支持PWA Service Worker时，通过Service Worker拦截针对静态资源文件的网络请求；
将网络请求反馈的静态资源文件存储到本地的Service Worker缓存中；
通过Service Worker拦截针对Server端的数据接口请求；
将数据接口请求反馈的Server端的接口数据存储到本地的Service Worker缓存中。
在一种可能的设计中，存储模块35，具体用于：
若终端的浏览器不支持PWA Service Worker时，将manifest文件列出的静态资源文件存储到应用缓存中；
将Server端的接口数据存储到本地存储器中。
本实施例的车辆停车点的定位装置，可以执行图2、图3所示方法中的技术方案，其具体实现过程和技术原理参见图2、图3所示方法中的相关描述，此处不再赘述。
本实施例，通过当接收到离线访问请求时，根据终端的浏览器，确定离线访问方式；根据离线访问方式，从对应的缓存中获取在线访问时的页面数据；对页面数据进行渲染，得到展示页面。从而可以根据终端安装的浏览器选择离线访问方式，以确保各种浏览器均能够正常地访问离线页面，尤其适用于离线访问能力差的h5页面的离线展示。
图6为本发明实施例五提供的终端的结构示意图，如图6所示，本实施例的服务平台40可以包括：处理器41和存储器42。
存储器42，用于存储程序；存储器42，可以包括易失性存储器(英文：volatilememory)，例如随机存取存储器(英文：random-access memory，缩写：RAM)，如静态随机存取存储器(英文：static random-access memory，缩写：SRAM)，双倍数据率同步动态随机存取存储器(英文：Double Data Rate Synchronous Dynamic Random Access Memory，缩写：DDR SDRAM)等；存储器也可以包括非易失性存储器(英文：non-volatile memory)，例如快闪存储器(英文：flash memory)。存储器42用于存储计算机程序(如实现上述方法的应用程序、功能模块等)、计算机指令等，上述的计算机程序、计算机指令等可以分区存储在一个或多个存储器42中。并且上述的计算机程序、计算机指令、数据等可以被处理器41调用。
上述的计算机程序、计算机指令等可以分区存储在一个或多个存储器42中。并且上述的计算机程序、计算机指令、数据等可以被处理器41调用。
处理器41，用于执行存储器42存储的计算机程序，以实现上述实施例涉及的方法中的各个步骤。
具体可以参见前面方法实施例中的相关描述。
处理器41和存储器42可以是独立结构，也可以是集成在一起的集成结构。当处理器41和存储器42是独立结构时，存储器42、处理器41可以通过总线43耦合连接。
本实施例的服务平台可以执行图2、图3所示方法中的技术方案，其具体实现过程和技术原理参见图2、图3所示方法中的相关描述，此处不再赘述。
此外，本申请实施例还提供一种计算机可读存储介质，计算机可读存储介质中存储有计算机执行指令，当用户设备的至少一个处理器执行该计算机执行指令时，用户设备执行上述各种可能的方法。
其中，计算机可读介质包括计算机存储介质和通信介质，其中通信介质包括便于从一个地方向另一个地方传送计算机程序的任何介质。存储介质可以是通用或专用计算机能够存取的任何可用介质。一种示例性的存储介质耦合至处理器，从而使处理器能够从该存储介质读取信息，且可向该存储介质写入信息。当然，存储介质也可以是处理器的组成部分。处理器和存储介质可以位于ASIC中。另外，该ASIC可以位于用户设备中。当然，处理器和存储介质也可以作为分立组件存在于通信设备中。
本领域普通技术人员可以理解：实现上述各方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成。前述的程序可以存储于一计算机可读取存储介质中。该程序在执行时，执行包括上述各方法实施例的步骤；而前述的存储介质包括：ROM、RAM、磁碟或者光盘等各种可以存储程序代码的介质。
最后应说明的是：以上各实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述各实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的范围。
Claims (20)
1.一种网页离线访问方法，其特征在于，包括：
当接收到离线访问请求时，根据终端的浏览器，确定离线访问方式；
根据所述离线访问方式，从对应的缓存中获取在线访问时的页面数据；
对所述页面数据进行渲染，得到展示页面。
2.根据权利要求1所述的方法，其特征在于，所述根据终端的浏览器，确定离线访问方式，包括：
确定终端的浏览器支持PWA Service Worker时，采用Service Worker方式进行离线访问；
若终端的浏览器不支持PWA Service Worker时，采用应用缓存方式进行离线访问。
3.根据权利要求2所述的方法，其特征在于，根据所述离线访问方式，从对应的缓存中获取在线访问时的页面数据，包括：
确定终端的浏览器支持PWA Service Worker时，通过Service Worker拦截针对Server端的数据接口请求，并从本地的Service Worker缓存中读取Server端的接口数据；
通过Service Worker拦截针对静态资源文件的网络请求，并从本地的Service Worker缓存中，读取上一次请求缓存的静态资源文件，所述静态资源文件包括：html文件、JS文件、CSS文件。
4.根据权利要求2所述的方法，其特征在于，根据所述离线访问方式，从对应的缓存中获取在线访问时的页面数据，包括：
若终端的浏览器不支持PWA Service Worker时，从应用缓存中读取上一次请求缓存的静态资源文件；
从本地存储器中读取Server端的接口数据。
5.根据权利要求3或4所述的方法，其特征在于，对所述页面数据进行渲染，得到展示页面，包括：
将所述Server端的接口数据和上一次请求缓存的静态资源文件进行结合和渲染，得到所述展示页面。
6.根据权利要求1-4中任一项所述的方法，其特征在于，在根据终端的浏览器，确定离线访问方式之前，还包括：
根据终端的浏览器，确定在线访问时的页面数据的存储方式；
根据所述存储方式，将所述页面数据存储到对应的缓存中。
7.根据权利要求6所述的方法，其特征在于，所述根据终端的浏览器，确定在线访问时的页面数据的存储方式，包括：
确定终端的浏览器支持PWA Service Worker时，采用Service Worker方式进行页面数据存储；
若终端的浏览器不支持PWA Service Worker时，采用应用缓存方式进行页面数据存储。
8.根据权利要求7所述的方法，其特征在于，所述根据所述存储方式，将所述页面数据存储到对应的缓存中，包括：
确定终端的浏览器支持PWA Service Worker时，通过Service Worker拦截针对静态资源文件的网络请求；
将网络请求反馈的所述静态资源文件存储到本地的Service Worker缓存中；
通过Service Worker拦截针对Server端的数据接口请求；
将所述数据接口请求反馈的Server端的接口数据存储到本地的Service Worker缓存中。
9.根据权利要求7所述的方法，其特征在于，所述根据所述存储方式，将所述页面数据存储到对应的缓存中，包括：
若终端的浏览器不支持PWA Service Worker时，将manifest文件列出的静态资源文件存储到应用缓存中；
将Server端的接口数据存储到本地存储器中。
10.一种网页离线访问装置，其特征在于，包括：
第一确定模块，用于在接收到离线访问请求时，根据终端的浏览器，确定离线访问方式；
获取模块，用于根据所述离线访问方式，从对应的缓存中获取在线访问时的页面数据；
展示模块，用于对所述页面数据进行渲染，得到展示页面。
11.根据权利要求10所述的装置，其特征在于，所述第一确定模块，具体用于：
确定终端的浏览器支持PWA Service Worker时，采用Service Worker方式进行离线访问；
若终端的浏览器不支持PWA Service Worker时，采用应用缓存方式进行离线访问。
12.根据权利要求11所述的装置，其特征在于，所述获取模块，具体用于：
确定终端的浏览器支持PWA Service Worker时，通过Service Worker拦截针对Server端的数据接口请求，并从本地的Service Worker缓存中读取Server端的接口数据；
通过Service Worker拦截针对静态资源文件的网络请求，并从本地的Service Worker缓存中，读取上一次请求缓存的静态资源文件，所述静态资源文件包括：html文件、JS文件、CSS文件。
13.根据权利要求11所述的装置，其特征在于，所述获取模块，具体用于：
若终端的浏览器不支持PWA Service Worker时，从应用缓存中读取上一次请求缓存的静态资源文件；
从本地存储器中读取Server端的接口数据。
14.根据权利要求12或13所述的装置，其特征在于，所述展示模块，具体用于：
将所述Server端的接口数据和上一次请求缓存的静态资源文件进行结合和渲染，得到所述展示页面。
15.根据权利要求10-13中任一项所述的装置，其特征在于，还包括：
第二确定模块，用于根据终端的浏览器，确定在线访问时的页面数据的存储方式；
存储模块，用于根据所述存储方式，将所述页面数据存储到对应的缓存中。
16.根据权利要求15所述的装置，其特征在于，所述第二确定模块，具体用于：
确定终端的浏览器支持PWA Service Worker时，采用Service Worker方式进行页面数据存储；
若终端的浏览器不支持PWA Service Worker时，采用应用缓存方式进行页面数据存储。
17.根据权利要求16所述的装置，其特征在于，所述存储模块，具体用于：
确定终端的浏览器支持PWA Service Worker时，通过Service Worker拦截针对静态资源文件的网络请求；
将网络请求反馈的所述静态资源文件存储到本地的Service Worker缓存中；
通过Service Worker拦截针对Server端的数据接口请求；
将所述数据接口请求反馈的Server端的接口数据存储到本地的Service Worker缓存中。
18.根据权利要求16所述的装置，其特征在于，所述存储模块，具体用于：
若终端的浏览器不支持PWA Service Worker时，将manifest文件列出的静态资源文件存储到应用缓存中；
将Server端的接口数据存储到本地存储器中。
19.一种终端，其特征在于，包括：
存储器，用于存储程序；
处理器，用于执行所述存储器存储的所述程序，当所述程序被执行时，所述处理器用于执行如权利要求1-9中任一项所述的方法。
20.一种计算机可读存储介质，其特征在于，包括：计算机程序，当其在计算机上运行时，使得计算机执行如权利要求1-9中任一项所述的方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911402825.5A CN111859211A (zh) | 2019-12-31 | 2019-12-31 | 网页离线访问方法、装置、终端及存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911402825.5A CN111859211A (zh) | 2019-12-31 | 2019-12-31 | 网页离线访问方法、装置、终端及存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN111859211A true CN111859211A (zh) | 2020-10-30 |
Family
ID=72970846
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201911402825.5A Pending CN111859211A (zh) | 2019-12-31 | 2019-12-31 | 网页离线访问方法、装置、终端及存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111859211A (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113779458A (zh) * | 2021-07-27 | 2021-12-10 | 北京房江湖科技有限公司 | 应用加速加载的方法及装置、电子设备及存储介质 |
Citations (11)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| DE19942432A1 (de) * | 1999-09-06 | 2001-03-08 | Iconparc Gmbh | Verfahren und Vorrichtung zur Durchführung einer Offline-Webanwendung |
| US20090063590A1 (en) * | 2007-08-30 | 2009-03-05 | Microsoft Corporation | Operating System Support of Graceful Degradation for Web Applications |
| KR20120016334A (ko) * | 2010-08-16 | 2012-02-24 | 에스케이플래닛 주식회사 | 오프라인 실행을 위한 웹 페이지 사전 캐싱 시스템 및 방법 |
| CN102647481A (zh) * | 2012-03-31 | 2012-08-22 | 奇智软件（北京）有限公司 | 一种访问预设网络地址的装置及方法 |
| US8832275B1 (en) * | 2012-03-30 | 2014-09-09 | Google Inc. | Offline web browser |
| US20140379839A1 (en) * | 2013-05-23 | 2014-12-25 | Tencent Technology (Shenzhen) Co., Ltd. | Method and an apparatus for performing offline access to web pages |
| CN105488078A (zh) * | 2014-10-10 | 2016-04-13 | 阿里巴巴集团控股有限公司 | 一种网页数据缓存方法及设备 |
| CN106354877A (zh) * | 2016-09-27 | 2017-01-25 | 北京奇虎科技有限公司 | 网页离线浏览方法及装置 |
| US20190109920A1 (en) * | 2016-09-23 | 2019-04-11 | Tencent Technology (Shenzhen) Company Limited | Browser resource pre-pulling method, terminal and storage medium |
| CN110287432A (zh) * | 2019-06-28 | 2019-09-27 | 北京金山安全软件有限公司 | 网络信息处理方法、装置和电子设备 |
| CN110287433A (zh) * | 2019-06-28 | 2019-09-27 | 北京金山安全软件有限公司 | 网络信息处理方法、装置和电子设备 |
-
2019
- 2019-12-31 CN CN201911402825.5A patent/CN111859211A/zh active Pending
Patent Citations (11)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| DE19942432A1 (de) * | 1999-09-06 | 2001-03-08 | Iconparc Gmbh | Verfahren und Vorrichtung zur Durchführung einer Offline-Webanwendung |
| US20090063590A1 (en) * | 2007-08-30 | 2009-03-05 | Microsoft Corporation | Operating System Support of Graceful Degradation for Web Applications |
| KR20120016334A (ko) * | 2010-08-16 | 2012-02-24 | 에스케이플래닛 주식회사 | 오프라인 실행을 위한 웹 페이지 사전 캐싱 시스템 및 방법 |
| US8832275B1 (en) * | 2012-03-30 | 2014-09-09 | Google Inc. | Offline web browser |
| CN102647481A (zh) * | 2012-03-31 | 2012-08-22 | 奇智软件（北京）有限公司 | 一种访问预设网络地址的装置及方法 |
| US20140379839A1 (en) * | 2013-05-23 | 2014-12-25 | Tencent Technology (Shenzhen) Co., Ltd. | Method and an apparatus for performing offline access to web pages |
| CN105488078A (zh) * | 2014-10-10 | 2016-04-13 | 阿里巴巴集团控股有限公司 | 一种网页数据缓存方法及设备 |
| US20190109920A1 (en) * | 2016-09-23 | 2019-04-11 | Tencent Technology (Shenzhen) Company Limited | Browser resource pre-pulling method, terminal and storage medium |
| CN106354877A (zh) * | 2016-09-27 | 2017-01-25 | 北京奇虎科技有限公司 | 网页离线浏览方法及装置 |
| CN110287432A (zh) * | 2019-06-28 | 2019-09-27 | 北京金山安全软件有限公司 | 网络信息处理方法、装置和电子设备 |
| CN110287433A (zh) * | 2019-06-28 | 2019-09-27 | 北京金山安全软件有限公司 | 网络信息处理方法、装置和电子设备 |
Non-Patent Citations (2)
| Title |
|---|
| 岳晓瑞;陈继华;: "HTML5环境下PJAX快速浏览技术实践", 广东通信技术, no. 05 * |
| 瞿苏;: "基于HTML5构建离线Web应用的研究与探讨", 佛山科学技术学院学报(自然科学版), no. 03 * |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113779458A (zh) * | 2021-07-27 | 2021-12-10 | 北京房江湖科技有限公司 | 应用加速加载的方法及装置、电子设备及存储介质 |
| CN113779458B (zh) * | 2021-07-27 | 2024-02-27 | 贝壳找房(北京)科技有限公司 | 应用加速加载的方法及装置、电子设备及存储介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US9773069B2 (en) | Pre-fetching of network page content in a browser application | |
| US9916285B2 (en) | Generating a preview of a web page for a mobile terminal | |
| US20140006934A1 (en) | Method for rearranging web page | |
| US8516041B1 (en) | Pre-fetching asynchronously requested content | |
| US8245125B1 (en) | Hybrid rendering for webpages | |
| US20140379841A1 (en) | Web page content loading control method and device | |
| CN110866204B (zh) | 一种页面处理方法及装置 | |
| CN111143725A (zh) | 页面生成方法、装置和电子设备 | |
| CN101369280A (zh) | 一种数字电视终端网页浏览的方法和装置 | |
| CN105095280A (zh) | 一种浏览器缓存方法和装置 | |
| US9262389B2 (en) | Resource-adaptive content delivery on client devices | |
| US20170212657A1 (en) | User interface rendering performance | |
| US20120030562A1 (en) | Device and method for generating customized webpages | |
| CN103856507A (zh) | 网络动态图片的静态显示方法和装置 | |
| CN103516787A (zh) | 一种同步显示的方法、终端及系统 | |
| CN104881452B (zh) | 一种资源地址的嗅探方法、装置及系统 | |
| US8990685B1 (en) | Systems and methods for creating and displaying web documents | |
| US20140223291A1 (en) | System and method for restructuring content on reorientation of a mobile device | |
| CN110866202A (zh) | 一种前端分页的方法及装置、可读存储介质 | |
| CN111859211A (zh) | 网页离线访问方法、装置、终端及存储介质 | |
| CN105468746B (zh) | 网页多媒体内容处理方法及装置 | |
| CN111666517A (zh) | 网页的访问方法、装置和计算机设备 | |
| CN111581553A (zh) | 网络图像的展示方法、系统、电子设备和存储介质 | |
| US9648381B2 (en) | Method and system for managing display of web-based content on portable communication devices | |
| CN103246656A (zh) | 生成静态缓存页面的方法及服务器 |
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 |