Author: Zhong Li, head of Kula PC client
The original address: webfe.kujiale.com/browser-to-…
Cool knorr client: download address www.kujiale.com/activity/13…
Background: We have accumulated a lot of valuable experience and best practices after the successful V12 revision of Krocer client. There is relatively little knowledge about Electron in the front-end community, so I wanted to share this in a series of articles.
Series of articles:
- 【Electron】 Kroca client development practice sharing – Into the pit
- 【Electron】 Kroca client development practice sharing – automatic software update
- 【Electron】 Kroca client development practice share – Browser start client
- 【Electron】 Kroca client development practice sharing – Process Communication
- 【Electron】 Kroca client development practice sharing – download manager
- Update irregularly…
background
Many native applications, such as vscode and QQ, support launching native software on a PC through a browser
This function is enough to make the web and client linkage, user experience is still very good, the implementation is not complicated. Kukule client already supports this feature, as shown below:
Realize the principle of
When the browser parses the URL, it tries to find the application associated with the URL protocol locally. If there is an associated application, the browser tries to open the application
For example, when VsCode installs a plug-in from the Web side, it actually accesses a URL of the VsCode protocol to enable the user’s local VsCode
The specific implementation
Now, we just need to register the custom protocol on the user’s computer, and we can implement the function. The user visits the URL with the custom protocol in the browser and launches our client.
Windows
Under Windows, registering a protocol is relatively easy, just write the registry. Registering an Application to a URI Scheme is a very detailed document of this part of Microsoft’s father
It is recommended to write registry keys in setup and specify that registry keys be deleted during uninstallation. The following is sample code for manipulating the registry in the Inno Setup wrapper
[Registry]
Root: HKCR; SubKey: Kujiale; ValueData: "KujialeProtocol"; ValueType: string; Flags: createvalueifdoesntexist uninsdeletekey;
Root: HKCR; SubKey: Kujiale; ValueName: "URL Protocol"; ValueData: "{app}\{#appExe}"; ValueType: string; Flags: createvalueifdoesntexist uninsdeletekey;
Root: HKCR; SubKey: Kujiale\DefaultIcon; ValueData: "{app}\{#appExe}"; ValueType: string; Flags: createvalueifdoesntexist uninsdeletekey;
Root: HKCR; SubKey: Kujiale\shell\open\command; ValueData: "{app}\{#appExe} ""% 1"""; Flags: createvalueifdoesntexist uninsdeletekey; ValueType: string;
Copy the code
Of course, it is also possible to operate the registry at startup time. This time, NodeJs is used to interact with the registry. The recommended NPM package is Node-regedit
After a custom protocol is successfully registered, the registry looks like this
MacOS
Under MacOS, we have no registry to write to, so we need to implement it differently. But before we do that, a few things
info.plist
The iOS and MacOS application packages have an info.plist file, which records meta Information about the application. For details, see Information Property List. The file records information (XML) in the form of key-value pairs, structured as follows:
CFBundleURLTypes
CFBundleURLTypes: A list of URL schemes (HTTP, FTP, and so on) supported by the app
In fact, this is a key in info.plist, and the corresponding value is an array. You can use this field to register one or more URL schemas for your application. Reference CFBundleURLTypes
Modify the info.plist file
Now that we know about the plist file, all we need to do is set CFBundleURLTypes to info.plist in our App package. So how do you fix it? By hand? Nonono, this kind of work must be left to tools, otherwise it is too low.
In Electron Packager, there is a configuration protocols that registers custom protocols only on the MacOS side by modifying the infi.plist file mentioned above.
// for mac
options.protocols = [{
name: 'clock from',
schemes: ['zhongli'.'test'], // Multiple protocols can be registered}];Copy the code
Receive parameters
After the protocol is registered, we can start the client from the browser by accessing the custom protocol URL.
For example, vscode:extension/ms-python. Python is a url that starts vscode and tells vscode that I want to install a plugin named ms-phthon.python.
Vscode implements custom behavior by parsing parameters in the url. How does a client get the url?
Windows
For Windows, the parameters are passed to the application in the form of startup parameters. So, we can easily get this parameter
// Console. log(process.argv) when starting the client from a custom URL; // Print out ['C://your-app.exe'// Start the path'kujiale://111', // Start custom url]Copy the code
MacOS
On the Mac, the startup parameter is not passed to the application. If the application is opened using a custom protocol, the app receives an Open-URL event
// Use kujiale protocol to start app. On ('open-url', (e, url) => {// eslint-disable-line parse(url); Parsing the url});Copy the code
The last
This article is divided into two parts to explain how to launch a PC application from a browser
-
Register custom protocols for all applications
-
Receive parameters for applications built using Electron
Welcome to the comments section for discussion, technical exchanges & internal tweets -> [email protected]