Electron launches the client through the web page

ELECTRON
0

Electron web page calls up the client

BY XUXIN · PUBLISHED July 2, 2021 · UPDATED July 5, 2021

I believe everyone has encountered when using a browser that when you click a link or button, the browser will ask whether to open the client. This happens on both mobile and desktop. For example, Baidu Netdisk will launch the Baidu Netdisk client for download when you click a link on the web page. In fact, these functions are implemented by registering a pseudo-protocol. This article mainly introduces how to launch the Electron client through the pseudo-protocol. , and obtain the parameters passed by the pseudo protocol.

Goals

Add a pseudo-protocol (URL Scheme protocol) for Electron.
Adds a pseudo-protocol click to the browser page. Pull up the app.

Mac URL Scheme

There is a file in each application package on Mac info.plist. This is generally used for some access permission configuration and software information. Students who develop iOS may be familiar with it. Registration URL Schemeactually means adding the corresponding key and value to this file. We can check out some software URL Scheme:

Find desktop software in Finder, such as vscode.
Right click to display package contents.
Go to the Contents folder.

Find it info.plist, click directly to view or open it with vscode. This CFBundleURLNameis the name of the agreement and CFBundleURLSchemesthe content of the agreement.

Enter the corresponding file in the browser URL Scheme, vscode://file/${filePath}and filePath is the pwd path of the file to see if vscode can open the corresponding document.

Windows URL Scheme

On Windows, the pseudo-protocol is implemented by adding it to the registry URL Protocol. In fact, to put it simply, it is just to add the key and value. Same as above, let’s check vscode:

Win+r enter regedit to confirm.
If it is not easy to find HKEY_CLASSES_ROOT\vscode, you can use Ctrl+F to check the data and search for 'URL:vscode'. You can find two places HKEY_CURRENT_USER\Software\Classes\vscode. Of course, the values are the same in both places.

We can right-click the vscode directory to export it into a reg file. We can see that there are two key points, one URL:vscodeis the startup path of vscode.

That is to say, it is detected that vscode://the following exe command will be executed, %1which is a pseudo protocol that evokes the software. Try opening it in a browser vscode://file/${filePath}, such as mine vscode://file/F:/work/electron/vue-cli-electron/README.md, to see if vscode can open the corresponding document.

Windows Registry Editor Version 5.00

[HKEY_CLASSES_ROOT\vscode]
"URL Protocol"=""
@="URL:vscode"

[HKEY_CLASSES_ROOT\vscode\shell]

[HKEY_CLASSES_ROOT\vscode\shell\open]

[HKEY_CLASSES_ROOT\vscode\shell\open\command]
@="\"E:\\Microsoft VS Code\\Code.exe\" --open-url -- \"%1\""

JavaScript

Copy

Implement URL Scheme

Here are two ways to implement pseudo-protocols on Electron:

There isn’t much to say about this. To read the link to the document , just write it directly in the main process:

import { app } from 'electron'

if (!app.isDefaultProtocolClient('vue-cli-electron')) {
  app.setAsDefaultProtocolClient('vue-cli-electron')
}

JavaScript

Copy

After packaging, install the software, open the software, and try to open it in a browser vue-cli-electron://to see if there is an arousal prompt.

Advantages: simple and fast.
Disadvantages: First of all, this is executed in the main process, which means that after installing the software for the first time, you must open the software before writing the corresponding data. When the software is URL Schemeuninstalled, the Mac version info.plistis in the package and deleted together, but Windows writes it to the registry. Yes, it will not be actively cleaned. After uninstalling the software and then opening the pseudo-protocol, there will still be a prompt to open the software.

electron-builder + nsis

Use electron-builder to configure and write the pseudo-protocol when it can be packaged (installed), and you can clean the registry in the uninstalled expansion macro. Using this method, the registration of option 1 can be removed.

builderOptionsMac configuration: Added electron-builderconfiguration link in vue.config.js :
```
protocols: [{
  name: 'vue-cli-electron',
  schemes: ['vue-cli-electron']
}],
```
JavaScript

Copy

What should be noted here is that there is a problem with the document display. fileAssociations and protocols are at the same level, not in fileAssociations. In this way, we have completed the configuration of the Mac system pseudo-protocol.
Windows configuration: Create a new one in the project root directory , and add it to nsis installer.nshas well.builderOptionsinclude: "installer.nsh"

installer.nsh
```
!macro customInstall
  DeleteRegKey HKCR "vue-cli-electron"
  WriteRegStr HKCR "vue-cli-electron" "" "URL:vue-cli-electron"
  WriteRegStr HKCR "vue-cli-electron" "URL Protocol" ""
  WriteRegStr HKCR "vue-cli-electron\shell" "" ""
  WriteRegStr HKCR "vue-cli-electron\shell\Open" "" ""
  WriteRegStr HKCR "vue-cli-electron\shell\Open\command" "" "$INSTDIR\{APP_EXECUTABLE_FILENAME} %1"
!macroend

!macro customUnInstall
  DeleteRegKey HKCR "vue-cli-electron"
!macroend
```
NSIS

Copy

Note: $INSTDIR后的{APP_EXECUTABLE_FILENAME}There is one before $. It is completely correct ${APP_EXECUTABLE_FILENAME}. I write markdown directly here. I don’t know why it cannot be parsed. Please replace it by yourself.

Here is a brief introduction. customInstall is electron-builderthe NSIS expansion macro provided. Judging from the name, it is executed during installation. Similarly, customUnInstall is executed during uninstallation. For other situations, please refer to the link .
- DeleteRegKeyis to delete the registry
- HKCRThat is, the abbreviation of what we mentioned above HKEY_CLASSES_ROOT, HKCU->HKEY_CURRENT_USER, HKLM->HKEY_LOCAL_MACHINE, HKU->HKEY_USERS
- WriteRegStris written to the registry
- $INSTDIRIs the installation path we chose
- ${APP_EXECUTABLE_FILENAME}Is the software exe name

Okay, now we can package and install it, try to open it in the browser vue-cli-electron://, uninstall the software in Windows and then open it in the browser vue-cli-electron://to see if there are any prompts.

Advantages: Tiger Balm mode, large degree of freedom and comprehensive functions.
Disadvantages: Troublesome, requires certain nsis knowledge.

Development environment configuration pseudo-protocol

Having said the above two methods, this can be regarded as a supplement. After all, it is impossible for us to write a little bit and then package a test during development, which is quite time-consuming.

setAsDefaultProtocolClientWe generally use pseudo-protocol settings directly during development, but after setting up, an error will be reported when opening the pseudo-protocol link on the web page, but it will be fine after packaging. What causes the difference between development and packaging ?

Here is an additional knowledge point, how our development environment is started, we can print it process.argv, this is the startup parameter of Electron, we can see that the development environment is (the same is true for Mac, the path is different):

[
  'F:\\work\\electron\\vue-cli-electron\\node_modules\\electron\\dist\\electron.exe',
  'dist_electron'
]

JavaScript

Copy

Seeing this, most students may have understood that the development environment is to start the exe of a node package, and then pass in the directory built by our webpack to start the service, and this parameter is the exe file of the software after packaging.

xxxxxxxx\\electron开发.exe

JavaScript

Copy

Let's take a look at the complete pseudo-protocol app.setAsDefaultProtocolClient(protocol[, path, args]), protocolwhich is the protocol name, paththe path to the Electron executable file (that is, the exe address, default process.execPath), and argsthe parameters passed to the executable file, which default to an empty array.

Then the answer comes:

app.setAsDefaultProtocolClient('vue-cli-electron')
这个注册时只有protocol和path，故在开发环境通过vue-cli-electron://启动时，只启动了那个node包的exe，我们后面的构建目录并没有在注册时写入。

JavaScript

Copy

Then we only need to make a judgment and append this directory argsto

if (app.isPackaged) { // 是否处于打包
  app.setAsDefaultProtocolClient('vue-cli-electron')
} else {
  app.setAsDefaultProtocolClient('vue-cli-electron', process.execPath, [
    path.resolve(process.argv[1])
  ])
}

JavaScript

Copy

Note: If you use the above method and the developed protocol has the same name as the packaged protocol, you must delete the protocol registered in the development environment before packaging (add this sentence to the main process during development to save it, and then delete it That's enough), otherwise your own computer may start the developed electron package when calling the pseudo-protocol. Now try to see if local development can pull up our client through the pseudo-protocol.

app.removeAsDefaultProtocolClient('vue-cli-electron', process.execPath, [path.resolve(process.argv[1])])

JavaScript

Copy

I originally wanted to put how to obtain the parameters in the pseudo-protocol link in this issue, but I feel that it is too long and is not conducive to reading, so I will update it in the next issue, so stay tuned.

This series of updates can only be compiled during weekends and after get off work hours. If there is a lot of content, the update will be slower. I hope it can be helpful to you. Please support it by giving it a star or liking it.

Address of this article: Electron web page launches the client - Molu Fange electron front-end technology sharing and personal insights

This article's github address: link