Single-page application loading method and system

Abstract

The present invention discloses a method and system for loading a single-page application, the method comprising: installing a target single-page application: a user clicks to install the target single-page application locally; downloading a compressed package corresponding to the target single-page application from the Internet to the local; writing the correspondence between the domain name of the downloaded application and its storage directory into a local data mapping table; writing the correspondence between the domain name of the application and a listening port in a local domain name resolution server. Loading the target single-page application: a user clicks to open the target single-page application; forwarding the user request data to the local gateway; the local gateway generates a request header and forwards it to the loader port; searching for the corresponding static resource according to the request header information and returning it. The present invention downloads and installs the single-page application locally in advance, and the browser directly reads it from the local by running, thereby improving the interaction speed of the single-page application.

Description

Technical Field

[0001] The present invention belongs to the field of Internet technology, and in particular relates to a single-page application loading method and system. Background Art

[0002] In recent years, single-page applications (SPA) have a good user experience and a good front-end and back-end separation mode, that is, the back-end is no longer responsible for template rendering and page output, and the back-end API is universal. The same set of back-end program codes can be used for multiple clients such as web interfaces, mobile phones, and tablets without modification. At the same time, the page rendering of the single-page application is completed by the client, which will greatly reduce the pressure on the server.

[0003] However, the client application needs to download the corresponding HTML, JS code and other related static resources to the browser cache when it is first loaded, so the network time required for the first load is relatively long. Existing single-page applications also use lazy loading, and some pages are implemented in lazy loading mode, that is, relevant static resources are downloaded only when certain pages are actually opened, which can improve the first load speed to a certain extent; however, the essence of this method is to spread the time required for the first load of the content to be downloaded to other pages, and it does not completely solve the problem of slow loading. Summary of the invention

[0004] In order to solve the above problems, the purpose of the present invention is to propose a single-page application loading method and system. According to the characteristics of the single-page application that the front-end and back-end are separated and the interactive part is completely independent, the present invention downloads and installs the single-page application locally in advance, and the browser reads it directly from the local during operation, avoiding the process of network request to download static resources, thereby greatly improving the interactive speed of the single-page application and improving the interactive experience.

[0005] In order to achieve the above object, the present invention adopts the following technical solutions.

[0006] (1) A single-page application loading method comprises the following steps:

[0007] Install the target single page application:

[0008] The user clicks to install the target single-page application locally;

[0009] The host application downloads the compressed package corresponding to the target single-page application from the Internet to the local computer, and decompresses it to the local computer according to the application information;

[0010] Write the correspondence between the domain name of the downloaded application and its storage directory into the local data mapping table;

[0011] Write the correspondence between the domain name of the application and the listening port in the local domain name resolution server;

[0012] Load the target single page application:

[0013] The user clicks to open the target single-page application;

[0014] Determine whether the target single-page application is installed locally. If so, forward the user request data to the local gateway. Otherwise, download and install the target single-page application from the network.

[0015] The local gateway generates a request header according to the local data mapping table, and forwards the request header to the port of the application loader according to the information in the local data mapping table;

[0016] The local application loader searches for the corresponding static resource in the local file system according to the received request header information and returns it to the previous level.

[0017] Furthermore, the user interacts with the server on a host application, in which a browser kernel that can be called is embedded. When the user opens a target single-page application in the host application, the browser kernel is called to load the target single-page application.

[0018] Furthermore, the host application is an application on a mobile phone or an application on a desktop operating system.

[0019] Furthermore, the host application downloads a compressed package corresponding to the target single-page application from the Internet to the local computer. Specifically, the host application downloads the target single-page application from the single-page application publishing system. The single-page application publishing system obtains basic information of the target single-page application through an API gateway. In the publishing system, the target single-page application is stored in the cloud in the form of a compressed package. The publishing system downloads the target single-page application to the local computer through the API gateway.

[0020] The basic information includes the abbreviation and version number of the target single-page application.

[0021] Furthermore, the local data mapping table corresponds to the locally installed applications one by one, that is, the correspondence between the domain name of the locally installed application and its storage directory is stored in the local data mapping table.

[0022] Furthermore, the domain name of the target single-page application is an independent domain name or is uniformly set in a prescribed format; the prescribed format is domain / projectAbbrev / path;

[0023] Among them, domain is the domain name of the host application, projectAbbrev is the abbreviation of the target single-page application, and path is the function path.

[0024] Furthermore, when the target single-page application has an independent domain name, the local data mapping table includes at least the following fields: the domain name, the abbreviation of the single-page application, and the port number of the corresponding forwarded local application loader;

[0025] When the target single-page application is set in the specified format, the local data mapping table contains at least the following fields: a domain name, a Boolean string used to determine whether the path contains the abbreviation of the single-page application, and a port number corresponding to the port forwarded to the local application loader.

[0026] (ii) a single page application loading system, comprising: a browser, a local gateway, a local data mapping table and a local application loader;

[0027] The browser is embedded in the host application so that it can be called and controlled by the host application; the host application saves the target single-page application entry, and when the user opens the target single-page application, the embedded browser is called to load the target single-page application;

[0028] The local gateway is used to parse the request sent by the browser, and map the requested domain name to the local IP address and port through the locally configured local domain name resolver, so that the request is directly forwarded to the gateway, and add the unique identifier recognized by the next level of loading in the request header according to the requested domain name and the mapping table of the database, so that the local application loader can find the corresponding static resource in the file system according to the request header and return it to the previous level;

[0029] The unique identifier is a Boolean string indicating whether the application abbreviation and the URL contain the application abbreviation;

[0030] The local application loader is used to identify the function path in the unique identifier in the request header and the unique identifier in the request header, and accordingly search for the corresponding application static resource in the local file system and return it to the previous level;

[0031] The local data mapping table is used to store the domain names of the applications installed locally and the relationship between the domain names and the directories in which they are stored.

[0032] Furthermore, it also includes a single-page application publishing system, which obtains basic information of the target single-page application through the API gateway, and the target single-page application is stored in the cloud in a compressed package form, and the publishing system downloads the target single-page application to the local through the API gateway;

[0033] The basic information includes the abbreviation and version number of the target single-page application.

[0034] Compared with the prior art, the present invention has the following beneficial effects:

[0035] The present invention makes a single-page Web application program like an application program store and installs it locally for operation, thereby improving the first loading speed of the single-page application program and completely solving the problem of slow startup caused by downloading the SPA application program and delayed loading of the interactive network. BRIEF DESCRIPTION OF THE DRAWINGS

[0036] The present invention is further described in detail below with reference to the accompanying drawings and specific embodiments.

[0037] Figure 1 It is a block diagram of the loading system of the present invention. DETAILED DESCRIPTION

[0038] The embodiments and effects of the present invention are further described in detail below with reference to the accompanying drawings.

[0039] refer to Figure 1 The present invention proposes a single-page application loading method, comprising the following steps:

[0040] Install the target single page application:

[0041] The user clicks to install the target single-page application locally;

[0042] The host application downloads the compressed package corresponding to the target single-page application from the Internet to the local computer, and decompresses it to the local computer according to the application information;

[0043] Write the correspondence between the domain name of the downloaded application and its storage directory into the local data mapping table;

[0044] Write the correspondence between the domain name of the application and the listening port in the local domain name resolution server; for example, map http: / / jkyy.com to the HTTP listening port localhost:3000, which is the port for the application loader to receive request data.

[0045] Load the target single page application:

[0046] The user clicks to open the target single-page application;

[0047] Determine whether the target single-page application is installed locally. If so, forward the user request data to the local gateway. Otherwise, download and install the target single-page application from the network.

[0048] The local gateway generates a request header according to the local data mapping table, and forwards the request header to the port of the application loader according to the information in the local data mapping table;

[0049] The local application loader searches for the corresponding static resource in the local file system according to the received request header information and returns it to the previous level.

[0050] In an embodiment of the present invention, the interaction between the user and the server is carried out on a host application, in which a browser kernel that can be called is embedded. When the user opens a target single-page application in the host application, the browser kernel is called to load the target single-page application; the host application is an application on a mobile phone or an application on a desktop operating system.

[0051] Specifically, the host application downloads the target single-page application from the single-page application publishing system; the single-page application publishing system obtains basic information of the target single-page application through the API gateway, and in the publishing system, the target single-page application is stored in the cloud in the form of a compressed package, and the publishing system downloads the target single-page application to the local through the API gateway; the basic information is the abbreviation and version number of the target single-page application.

[0052] In the embodiment of the present invention, the local data mapping table corresponds to the locally installed applications one by one, that is, the correspondence between the domain name of the locally installed application and its storage directory is stored in the local data mapping table. The mapping relationship table of the locally not installed application is stored on the server side. The local data mapping table should contain at least the following fields:

[0053] When the target single-page application has an independent domain name, the local data mapping table contains at least the following fields: the domain name, the abbreviation of the single-page application, and the port number of the corresponding forwarded local application loader;

[0054] When the target single-page application is set in the specified format, the local data mapping table contains at least the following fields: a domain name, a Boolean string used to determine whether the URL contains the abbreviation of the single-page application, and a port number corresponding to the port forwarded to the local application loader.

[0055] The details are shown in Table 1:

[0056] Table 1 Field types included in the local data mapping table

[0057]

[0058] The domain name of the target single-page application is an independent domain name or is uniformly set according to the prescribed format; the prescribed format is domain / projectAbbrev / path; wherein domain is the domain name of the host application, projectAbbrev is the abbreviation of the target single-page application (globally unique), and path is the function path.

[0059] Example 2

[0060] refer to Figure 1 , a single page application loading system, comprising: a browser, a local gateway, a local data mapping table and a local application loader;

[0061] The browser is embedded in the host application so that it can be called and controlled by the host application; the host application saves the target single-page application entry, and when the user opens the target single-page application, the embedded browser is called to load the target single-page application;

[0062] The local gateway is used to parse the request sent by the browser, and maps the requested domain name to the local IP address and port through the locally configured local domain name resolver, so that the request is directly forwarded to the gateway, and adds the unique identifier recognized by the next level of loading in the request header according to the requested domain name and the mapping table of the database, so that the local application loader can find the corresponding static resource in the file system according to the request header and return it to the previous level. The unique identifier is a Boolean string of the application abbreviation and whether the URL contains the application abbreviation.

[0063] The local application loader is used to identify the function path in the unique identifier in the request header and the unique identifier in the request header, and accordingly search for the corresponding application static resource in the local file system and return it to the previous level.

[0064] The local data mapping table is used to store the domain names of the applications installed locally and the relationship between the domain names and the directories in which they are stored.

[0065] Exemplarily, the single-page application publishing system of the present invention includes: an application publishing unit, an application storage unit, an API gateway and a gateway management unit, wherein the application publishing unit is used for application developers to publish different versions of application compression packages and fill in the basic information of the program.

[0066] The application storage unit is used to perform cloud storage on the new application compression package released by the application release unit;

[0067] The API gateway serves as a unified information forwarding gateway for each microserver, providing a unified API entry point to the outside world and converting each request protocol into the interface protocol of the corresponding microserver;

[0068] The gateway management unit is used to manage multiple gateways, store gateway configuration information, and dynamically configure gateways. When a new single-page application is released in the application publishing unit, dynamic gateway parameter configuration related to the new single-page application is performed, and the API gateway is notified to update the configuration.

[0069] The publishing system may also include an authentication center and an authorization center; the authentication center is used for users or application developers to register or log in with user names.

[0070] The authorization center determines whether the user has the download permission for the target single-page application and provides a unified authorization center for all applications.

[0071] The loading system of the present invention can share the authentication center and authorization center with the publishing system.

[0072] In the embodiment of the present invention, the domain name of each application is set as follows:

[0073] a) Similar to traditional applications, developers can provide users with independent domain names.

[0074] b) Apply for a globally unique abbreviation for each software development project, which consists of letters + numbers; use the following domain name format: domain / projectAbbrev / path;

[0075] Among them, domain is the domain name of the host application, projectAbbrev is the abbreviation of the application (for example, starting with a letter, consisting of 2-32 letters or numbers, and should not be too long), and path is the function path.

[0076] The target single-page application of the present invention is a Web application based on a single-page Web application (SPA), which is used to load a single HTML page and dynamically update the page when a user interacts with the application.

[0077] The system of the present invention is implemented based on the front-end SPA technology, and the host application must support the front-end microservice architecture.

[0078] The present invention is based on the characteristics that the single-page application has separated front-end and back-end and the interactive part is completely independent. The single-page application is downloaded and installed locally, and the browser reads it directly from the local during operation, avoiding the process of network request to download static resources, improving the initial loading speed of the single-page application, and completely eliminating the slow speed caused by downloading, thereby greatly improving the interactive speed and improving the interactive experience.

[0079] The above is only a specific embodiment of the present invention, but the protection scope of the present invention is not limited thereto. Any person skilled in the art can easily think of changes or substitutions within the technical scope disclosed by the present invention, which should be included in the protection scope of the present invention. Therefore, the protection scope of the present invention should be based on the protection scope of the claims.

Claims

1. A single-page application loading method, characterized in that: The following steps are involved: Install the target single page application: The user clicks to install the target single-page application locally; The host application downloads the compressed package corresponding to the target single-page application from the Internet to the local computer, and decompresses it to the local computer according to the application information; The host application downloads the compressed package corresponding to the target single-page application from the Internet to the local computer. Specifically, the host application downloads the target single-page application from the single-page application publishing system. The single-page application publishing system obtains basic information of the target single-page application through the API gateway. In the publishing system, the target single-page application is stored in the cloud in the form of a compressed package. The publishing system downloads the target single-page application to the local computer through the API gateway. The basic information includes the abbreviation and version number of the target single-page application; The correspondence between the domain name of the downloaded application and its storage directory is written into a local data mapping table; the local data mapping table corresponds to the locally installed application one-to-one, that is, the correspondence between the domain name of the locally installed application and its storage directory is stored in the local data mapping table; The domain name of the target single-page application is an independent domain name or is uniformly set in a prescribed format; the prescribed format is domain / projectAbbrev / path; Where domain is the domain name of the host application, projectAbbrev is the abbreviation of the target single-page application, and path is the function path; When the target single-page application has an independent domain name, the local data mapping table contains at least the following fields: the domain name, the abbreviation of the single-page application, and the port number of the corresponding forwarded local application loader; When the target single-page application is set in the specified format, the local data mapping table contains at least the following fields: a domain name, a Boolean string used to determine whether the path contains the abbreviation of the single-page application, and a port number corresponding to the port forwarded to the local application loader; Write the correspondence between the domain name of the application and the listening port in the local domain name resolution server; Load the target single page application: The user clicks to open the target single-page application; Determine whether the target single-page application is installed locally. If so, forward the user request data to the local gateway. Otherwise, download and install the target single-page application from the network. The local gateway generates a request header according to the local data mapping table, and forwards the request header to the port of the application loader according to the information in the local data mapping table; The local application loader searches for the corresponding static resource in the local file system according to the received request header information and returns it to the previous level; The interaction between the user and the server is carried out on the host application, in which a browser kernel that can be called is embedded. When the user opens a target single-page application in the host application, the browser kernel is called to load the target single-page application; the host application is an application on the mobile phone side or an application on the desktop operating system side.

2. A single-page application loading system, characterized in that: include: Browser, local gateway, local data mapper and local application loader; The browser is embedded in the host application so that it can be called and controlled by the host application; The host application saves and opens the target single-page application entrance. When the user opens the target single-page application, the embedded browser is called to load the target single-page application. The local gateway is used to parse the request sent by the browser, and map the requested domain name to the local IP address and port through the locally configured local domain name resolver, so that the request is directly forwarded to the gateway, and add the unique identifier recognized by the next level of loading in the request header according to the requested domain name and the mapping table of the database, so that the local application loader can find the corresponding static resource in the file system according to the request header and return it to the previous level; The unique identifier is a Boolean string indicating whether the application abbreviation and the URL contain the application abbreviation; The local application loader is used to identify the function path in the unique identifier in the request header and the unique identifier in the request header, and accordingly search for the corresponding application static resource in the local file system and return it to the previous level; The local data mapping table is used to store the domain names of the applications installed locally and the relationship between their storage directories; the local data mapping table corresponds to the applications installed locally one by one, that is, the corresponding relationship between the domain names of the applications installed locally and their storage directories is stored in the local data mapping table; The domain name of the target single-page application is an independent domain name or is uniformly set in a prescribed format; the prescribed format is domain / projectAbbrev / path; Where domain is the domain name of the host application, projectAbbrev is the abbreviation of the target single-page application, and path is the function path; When the target single-page application has an independent domain name, the local data mapping table contains at least the following fields: the domain name, the abbreviation of the single-page application, and the port number of the corresponding forwarded local application loader; When the target single-page application is set in the specified format, the local data mapping table contains at least the following fields: a domain name, a Boolean string used to determine whether the path contains the abbreviation of the single-page application, and a port number corresponding to the port forwarded to the local application loader; A single-page application publishing system, which obtains basic information of a target single-page application through an API gateway, and the target single-page application is stored in the cloud in a compressed package. The publishing system downloads the target single-page application to the local computer through the API gateway; The basic information includes the abbreviation and version number of the target single-page application.

Images