System and method for acquiring static resources in hybrid development mode of mobile terminal

Abstract

The invention discloses a system and method for acquiring static resources in a mobile terminal hybrid development mode, and the system comprises a CDN server module which is used for caching a static resource zip packet; the client module is used for supporting an Android end, an apple end and a swan end; the SSL server module is used for converting an internet https protocol into an http protocol; the F5 load balancing module is used for flow distribution; the page server module is used for deploying a static resource zip packet and forwarding an api interface; the PC end module is used for logging in web service through a PC to maintain a version number; the web server module is used for deploying a management end page and performing version number configuration; the server module is used for providing a back-end interface service; and the database module is used for storing the static resource version number. The method is not influenced by a network environment, is high in speed, achieves an effect similar to native development, reduces the waiting time of a user, and greatly improves the user experience.

Description

Technical Field

[0001] The present invention belongs to the technical field of static resource acquisition, and specifically relates to a system and method for acquiring static resources in a mobile hybrid development mode. Background Art

[0002] The mobile hybrid development mode (Hybrid App) is a development method that combines the characteristics of native applications (Native App) and web applications (Web App). It allows developers to use web technologies such as HTML, CSS, and JavaScript to develop mobile applications, embed these static resources through a native container (such as a WebView), and use JavaScriptBridge (JSBridge) to achieve the interaction between static resources and the native platform. Due to the dependence on WebView, the smoothness and response speed of native applications may not be achieved, and there is a problem of white screens on pages.

[0003] Static resources can be obtained by the native container through a page server or a CDN server.

[0004] The method of obtaining from a page server means that static resources are deployed on a page server such as an nginx service. The page server exposes the protocol, IP, and port externally. The native container remotely pulls static resources in the form of a url. During the transmission process, gzip can be used to reduce the size of the transmitted content, improve the page response time, and thus reduce the white screen time of the page.

[0005] The method of obtaining from a CDN server means that the native container pulls static resources by accessing the url provided by the CDN server. The CDN can cache static resources on a server closer to the user, reduce the delay of data transmission, accelerate the content loading speed, and thus reduce the white screen time of the page.

[0006] Currently, when the native container obtains static resources, in order to improve the page loading speed, it can obtain them through a page server or a CDN server. The existing technologies have the following problems:

[0007] 1. In a weak network or when the network is disconnected, the native container will pull very slowly or fail to pull static resources, resulting in a long white screen time for the page.

[0008] 2. The CDN method has a page caching problem. The static resources pulled by the native container may not be the latest static resources. In a weak network environment, the pulling of static resources by the native container is somewhat alleviated, but when the network is disconnected, static resources still cannot be pulled, resulting in a white screen on the page. Summary of the Invention

[0009] In view of the above problems, the present invention is proposed to provide a system and method for obtaining static resources in a mobile hybrid development mode that overcomes the above problems or at least partially solves the above problems.

[0010] To achieve the above object, the present invention adopts the following technical solutions:

[0011] A system for obtaining static resources in a mobile hybrid development mode, the system includes:

[0012] A CDN server module for caching static resource zip packages;

[0013] A client module for supporting Android, Apple, and HarmonyOS terminals;

[0014] An SSL server module for converting the Internet https protocol to the http protocol;

[0015] An F5 load balancing module for traffic distribution;

[0016] A page server module for deploying static resource zip packages and api interface forwarding;

[0017] A PC terminal module for maintaining the version number by logging in to the web service through a PC;

[0018] A web server module for deploying the management end page and performing version number configuration;

[0019] A server server module for providing backend interface services;

[0020] A database module for storing static resource version numbers.

[0021] Optionally, the static resource zip package includes html, css, and js.

[0022] Optionally, the client module includes native capabilities, WebView, and static resources.

[0023] Optionally, WebView calls native capabilities through the JSBridge method. The static resources include version numbers, as well as html, css, and js after decompressing the zip. WebView loads local static resources through the file protocol.

[0024] Optionally, the services deployed by the page server module and the web server module are developed based on the Vue framework, and the middleware uses nginx1.19.

[0025] Optionally, the services deployed by the server server module are developed based on the springboot framework, and the basic environment is JDK1.8.

[0026] Optionally, the database module uses the OceanBase database.

[0027] The present invention also provides a method for obtaining static resources in a mobile hybrid development mode. The method is based on the system for obtaining static resources in a mobile hybrid development mode described in any one of the foregoing, and the method includes:

[0028] Deploy the static resource zip package to the page server;

[0029] Manually update the static resource zip package to the server;

[0030] Update the database version number;

[0031] Start the native APP;

[0032] Obtain the latest version number from the server. When the latest version number is less than the local version number, the WebView uses the file protocol to load the static page;

[0033] When the latest version number is greater than the local version number, download the latest static resource zip package from the CDN server, and then determine whether the CDN server has cached the static resource zip package. When it is not cached or the cache has expired, return to the source page server to update the static resource zip package. When the CDN server has cached the static resource zip package, unzip the zip package, overwrite the existing files, and the WebView uses the file protocol to load the static page.

[0034] In summary, due to the adoption of the above technical solutions, the beneficial effects of the present invention are:

[0035] The present invention loads local static resources through the file protocol, is not affected by the network environment, and has a fast speed, achieving an effect similar to native development. At the same time, the CDN server is used to cache and accelerate the static resources, and the zip package is used to reduce the volume of the static resources during network transmission, so as to improve the speed of updating the static resources and reduce the user waiting time, greatly improving the user experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0036] Figure 1 It is a schematic diagram of the system process for obtaining static resources in a mobile hybrid development mode provided by an embodiment of the present application;

[0037] Figure 2 It is a system architecture diagram of a system for obtaining static resources in a mobile hybrid development mode provided by an embodiment of the present application;

[0038] Figure 3 It is a schematic diagram of the method process for obtaining static resources in a mobile hybrid development mode provided by an embodiment of the present application. Detailed implementation manners

[0039] To make the objectives, technical solutions and advantages of the embodiments of the present invention clearer, the technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings in the present invention. Apparently, the described embodiments are some but not all of the embodiments of the present invention. All other embodiments obtained by those of ordinary skill in the art based on the embodiments of the present invention without creative efforts shall fall within the protection scope of the present invention.

[0040] Embodiment 1:

[0041] Please refer to Figure 1 and Figure 2 , this embodiment provides a system for obtaining static resources in a mobile hybrid development mode. The system includes:

[0042] A CDN server module for caching static resource zip packages.

[0043] The static resource zip package includes html, css, js, etc.

[0044] A client module for supporting Android, Apple, and HarmonyOS terminals.

[0045] The client module includes native capabilities, a WebView, and static resources.

[0046] The WebView calls native capabilities through the JSBridge method. The static resources include version numbers, as well as html, css, and js after decompressing the zip. The WebView loads local static resources through the file protocol.

[0047] An SSL server module for converting the Internet https protocol to the http protocol and deploying it using the HA high-availability architecture.

[0048] An F5 load balancing module for traffic distribution, using a round-robin mechanism.

[0049] A page server module for deploying static resource zip packages and api interface forwarding.

[0050] A PC terminal module for maintaining version numbers by logging in to the web service through a PC.

[0051] A web server module for deploying the management end page and performing version number configuration.

[0052] The services deployed by the page server module and the web server module are developed based on the Vue framework, and the middleware uses nginx1.19.

[0053] The server server module is used to provide backend interface services, such as an interface for obtaining the version number of static resources.

[0054] The services deployed by the server server module are developed based on the springboot framework, and the basic environment is JDK1.8.

[0055] The database module is used to store the version numbers of static resources.

[0056] The OceanBase database is adopted for the database module.

[0057] In terms of network area division, it includes the Internet area, DMZ area, and intranet area. The Internet area uses the https protocol, and both the DMZ area and the intranet area use the http protocol; a high-availability architecture is adopted to prevent single-point failures.

[0058] The version number maintenance process is to log in to the PC side, open the browser, access the F5 address of the web service through the url, maintain the version number, click save to call the server backend service interface, and the server maintains the version number data into the Oceanbase database through jdbc.

[0059] The process for the client to obtain the version number is that the interface access link is for the client to access the SSL server, the SSL forwards the page server through F5, the page server forwards the backend server through F5, and the backend server queries the version number from the Oceanbase database through jdbc.

[0060] The process for the client to obtain static resources is that the client accesses the CDN server through the url, and the process for the CDN server to obtain static resources is that the CDN server accesses the SSL server through the url, and the SSL forwards the page server through F5.

[0061] In this embodiment, local static resources are loaded through the file protocol, which is not affected by the network environment and is fast, achieving an effect similar to native development. At the same time, a CDN server is used to cache and accelerate static resources, and a zip package is used to reduce the volume of static resources during network transmission, so as to improve the speed of updating static resources, reduce the user waiting time, and greatly improve the user experience.

[0062] Embodiment 2:

[0063] Please refer to Figure 3 , Embodiment 2 discloses a method for obtaining static resources in a mobile hybrid development mode. This method is based on the above system for obtaining static resources in a mobile hybrid development mode, and the method includes the following steps:

[0064] S1. Deploy the static resource zip package to the page server.

[0065] S2. Manually update the static resource zip package to the server.

[0066] S3. Update the database version number.

[0067] S4. Start the native APP.

[0068] S5. Obtain the latest version number from the server. When the latest version number is less than the local version number, the WebView uses the file protocol to load static pages.

[0069] S6. When the latest version number is greater than the local version number, download the latest static resource zip package from the CDN server, and then determine whether the CDN server has cached the static resource zip package. When it is not cached or the cache has expired, return to the source page server to update the static resource zip package. When the CDN server has cached the static resource zip package, unzip the zip package, overwrite the existing files, and the WebView uses the file protocol to load static pages.

[0070] The above content is a further detailed description of the present invention in combination with specific preferred embodiments. It cannot be determined that the specific implementation of the present invention is only limited to these descriptions. For those of ordinary skill in the technical field to which the present invention pertains, without departing from the concept of the present invention, several simple deductions or substitutions can still be made, which should all be regarded as belonging to the protection scope of the present invention.

Claims

1. A system for obtaining static resources in a mobile terminal hybrid development mode, characterized in that: The system comprises: CDN server module, used to cache static resource zip packages; Client module, used to support Android, Apple and Hongmeng terminals; SSL server module, used to convert the Internet https protocol to http protocol; F5 load balancing module for traffic distribution; Page server module, used to deploy static resource zip packages and API interface forwarding; PC-side module, used to maintain the version number by logging into the web service through the PC; The web server module is used to deploy the management page and configure the version number; Server module, used to provide backend interface services; Database module, used to store static resource version numbers.

2. A system for obtaining static resources in a mobile terminal hybrid development mode as described in claim 1, characterized in that: The static resource zip package includes html, css and js.

3. A system for obtaining static resources in a mobile terminal hybrid development mode as claimed in claim 1, characterized in that: The client module includes native capabilities, WebView and static resources.

4. A system for obtaining static resources in a mobile terminal hybrid development mode as described in claim 3, characterized in that: WebView calls native capabilities through JSBridge. Static resources include version numbers, as well as html, css, and js after decompression. WebView loads local static resources through the file protocol.

5. A system for obtaining static resources in a mobile terminal hybrid development mode as claimed in claim 1, characterized in that: The services deployed by the page server module and the web server module are developed based on the Vue framework, and the middleware uses nginx1.

19.

6. A system for obtaining static resources in a mobile terminal hybrid development mode as claimed in claim 1, characterized in that: The services deployed by the server module are developed based on the springboot framework, and the basic environment is JDK1.

8.

7. A system for obtaining static resources in a mobile terminal hybrid development mode as claimed in claim 1, characterized in that: The database module uses the OceanBase database.

8. A method for obtaining static resources in a mobile terminal hybrid development mode, the method is based on a system for obtaining static resources in a mobile terminal hybrid development mode according to any one of claims 1 to 7, characterized in that: The method comprises: The static resource zip package is deployed to the page server; Manually update the static resource zip package to the server; Update the database version number; The native APP is launched; Get the latest version number from the server. When the latest version number is smaller than the local version number, WebView uses the file protocol to load the static page. When the latest version number is greater than the local version number, download the latest static resource zip package from the CDN server, and then determine whether the CDN server has cached the static resource zip package. If it is not cached or the cache is invalid, return to the source page server to update the static resource zip package. If the CDN server has cached the static resource zip package, decompress the zip package and overwrite the existing file. WebView uses the file protocol to load the static page.

Images