Electron web page to call up the client

I believe that when you usually use a browser, you have clicked on a link or button, and the browser will ask whether to open the client. This is the case for both mobile and desktop. For example, Baidu SkyDrive, when you click on the link on the webpage, it will pull up the Baidu SkyDrive client to download. In fact, these functions are realized by registering the pseudo protocol. This article mainly introduces how to invoke the Electron client through the pseudo protocol. , And get the parameters passed by the pseudo-protocol.

Goals

1. Add a pseudo protocol (URL Scheme protocol) for Electron.
2. Add a click of a pseudo-protocol on the browser page. Pull up the application.

Mac URL Scheme

info.plist file in each application package on the Mac. This file is generally used for the configuration and software information of some access permissions. Students developed by ios may be familiar with it. Registering URL Scheme actually adding the corresponding key to this file. value. We can check URL Scheme some software:

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

4. Find info.plist , click to view directly or open with vscode, this CFBundleURLName is the agreement name, CFBundleURLSchemes is the agreement content

5. The browser enters the corresponding URL Scheme , vscode://file/${filePath} , filePath is the pwd path of the file, and see if vscode can open the corresponding file.

Windows URL Scheme

On Windows, the URL Protocol in the registry. In fact, it is simpler to add key and value values. Same as above, let's take a look at vscode:

1. Enter regedit in win+r to confirm.
2. Find HKEY_CLASSES_ROOT\vscode , if you are not easy to find, you can Ctrl+F to check the data and search for'URL:vscode', you can find two HKEY_CURRENT_USER\Software\Classes\vscode , of course, the two values are the same.

3. We can right-click the vscode directory and export it into a reg file. You can see that the key is at two points, one is URL:vscode , and the other is the startup path of vscode.

That is to say, if vscode:// is detected, the following exe command will be executed. %1 is a pseudo protocol that evokes the software. vscode://file/${filePath} browser, such as my 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\""

Implement URL Scheme

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

1. Register the protocol through setAsDefaultProtocolClient

There is not much to talk about. The link documentation can be written directly in the main process:

import { app } from 'electron'

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

Install the software after packaging, open the software, and try to open vue-cli-electron:// in the browser to see if there is a reminder.

• Advantages: simple and fast.
• Disadvantages: First of all, this is executed in the main process, which means that the corresponding URL Scheme must be opened after the software is installed for the first time. When the software is uninstalled, the info.plist Mac is in the package and deleted together, but Windows is written The registry will not be actively cleaned up. After uninstalling the software and opening the pseudo-protocol, there will still be a prompt to open the software.

2. electron-builder + nsis

Use electron-builder to configure the pseudo-protocol when it can be packaged (installed), and the registry can be cleaned up in the uninstalled expansion macro. If this method is used, the registration of scheme 1 can be removed.

• Mac configuration: In vue.config.js in builderOptions added electron-builder configuration link :

  protocols: [{
    name: 'vue-cli-electron',
    schemes: ['vue-cli-electron']
  }],

  It should be noted that there is a problem with the document display. fileAssociations and protocols belong to the same level, not in fileAssociations. In this way, we have completed the configuration of the pseudo-protocol of the Mac system.

• Windows configuration: in the project root directory create installer.nsh , in the same builderOptions added nsis in include: "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

  Here is a brief introduction, customInstall is electron-builder . This is executed during installation, according to the name. Similarly, customUnInstall is uninstalled. For other situations, refer to 160e2adfec071d link

  • DeleteRegKey is to delete the registry
  • HKCR talk above us HKEY_CLASSES_ROOT shorthand, HKCU-> HKEY_CURRENT_USER, HKLM-> HKEY_LOCAL_MACHINE , HKU-> HKEY_USERS
  • WriteRegStr is written to the registry
  • $INSTDIR is the installation path we chose
  • ${APP_EXECUTABLE_FILENAME} is the name of the software exe

Well, now we can pack installed, try to open the browser vue-cli-electron:// , Windows uninstall the software and then open in a browser vue-cli-electron:// see there will be no prompt.

• Advantages: Wanjin Oil mode, large degree of freedom, comprehensive functions.
• Disadvantages: troublesome, requires certain nsis knowledge.

Development environment configuration pseudo-protocol

The above two methods are finished, this is a supplement, after all, it is impossible to write a package and test it during development, which is very time-consuming.

We generally use setAsDefaultProtocolClient to set the pseudo protocol directly during development, but after setting, an error will be reported when opening the pseudo protocol link on the web page, but it is good after packaging. What makes the difference between development and packaging?

Here is a point of knowledge, how is our development environment started, we can print process.argv , this is the startup parameters 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'
]

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

xxxxxxxx\\electron开发.exe

Let's look at the complete pseudo protocol app.setAsDefaultProtocolClient(protocol[, path, args]) , protocol is the protocol name, path is the Electron executable file path (that is, the exe address, the default process.execPath), and the args passed to the executable file by 060e2adfec0a76 are empty by default.

Then came the answer:

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

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

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

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

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

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

This series of updates can only be organized during weekends and after get off work hours. If there are more content, the update will be slower. I hope it can be helpful to you. Please support it by star or like favorites.

The address of this article: https://xuxin123.com/electron/url-scheme

This github address: link