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

  1. Register custom protocols for all applications

  2. Receive parameters for applications built using Electron

Welcome to the comments section for discussion, technical exchanges & internal tweets -> [email protected]