I believe that when you click a link or button when using a browser, the browser will ask you whether to open the client, both mobile and desktop. For example, baidu network disk, when clicking a link on the web page, it will pull up the client of Baidu network disk for downloading. In fact, these functions are realized by registering the pseudo protocol. This paper mainly introduces how to adjust the Electron client through the pseudo protocol and obtain the parameters transmitted by the pseudo protocol.

Achieve the goal

  1. Add a pseudo protocol (URL Scheme protocol) for Electron.

  2. Click to add a pseudo-protocol to a browser web page. Pull up the application.

Mac的URL Scheme

Each Mac application package has an info.plist file, which is generally used for some access permission configuration and software information. Ios developers may be familiar with this file. To register a URL Scheme, you actually add corresponding keys and values to this file. We can view the URL Scheme of some software:

  1. Visit to find desktop software, such as vscode.

  2. Right-click to display package contents.

  3. Go to the Contents folder.

  1. findinfo.plistAnd just click to view it or open it with vscode, this oneCFBundleURLNameThat’s the name of the agreement,CFBundleURLSchemesContents of the Agreement

  1. Browser input correspondingURL Scheme.vscode://file/${filePath}, filePath is the PWD path of the file, and check whether VScode can open the corresponding file.

Windows的URL Scheme

In Windows, the URL Protocol is added to the registry to implement the pseudo-protocol. In fact, it is simple to add the key, value value. As above, let’s take a look at vscode:

  1. Win +r Enter regedit to confirm.

  2. HKEY_CLASSES_ROOT\vscode: HKEY_CLASSES_ROOT\vscode: HKEY_CLASSES_ROOT\vscode: HKEY_CLASSES_ROOT\vscode: HKEY_CLASSES_ROOT\vscode: HKEY_CLASSES_ROOT\vscode

  1. We can right-click the vscode directory and export it as a reg file, and you can see that there are two key points, oneURL:vscodeAnd the boot path of vscode.

Vscode ://file/${filePath} Like my vscode: / / file/F: / work/electron/vue – cli – electron/README. Md, look to whether 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\""
Copy the code

Implement the URL Scheme

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

  1. Through setAsDefaultProtocolClient registration agreement

This is not much to talk about, look at the document link, in the main process directly write:

import { app } from 'electron'

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

After packing, install the software, open the software, try to open vue-CLI-electron :// in your browser, and see if there is an awakening prompt.

  • Advantages: Simple, fast.
  • Disadvantages: First of all, this is executed in the main process, which means that the software must be opened after the first installation before the corresponding software is writtenURL Scheme, software uninstall when Macinfo.plistIn the package, deleted together, but Windows is written to the registry, will not be taken the initiative to clean, uninstall the software and then open the pseudo-protocol or open the software prompt.
  1. electron-builder + nsis

With the configuration of the electron Builder, the pseudo protocol is written as soon as it can be packaged (installed) and the registry can be cleaned up in the uninstalled extension macros. With this method, the scheme 1 registration can be removed.

  • Mac configuration: Add the configuration link for electron Builder in builderOptions in vue.config.js:

    protocols: [{
  name: 'vue-cli-electron'.schemes: ['vue-cli-electron']}],Copy the code

    FileAssociations and protocols belong to the same class, not fileAssociations. This completes the configuration of the Mac system pseudo-protocol.

  • Windows configuration: Create installer. NSH in the root directory of the project. Also add include “installer. NSH “to the nsis of builderOptions.

    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}The % 1"
! macroend

! macro customUnInstall
  DeleteRegKey HKCR "vue-cli-electron"
! macroend
Copy the code

    Here is a brief introduction, customInstall is the NSIS extension macro provided by electron- Builder. See the name of this macro, customUnInstall is performed at installation time. In the same way, customUnInstall is performed at uninstallation

    • DeleteRegKey deletes the registry

    • HKCR is short for HKEY_CLASSES_ROOT, 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

Ok, now we can pack the installation and try to open vue-CLI-electron :// in the browser. After Windows uninstalls the software, open vue-cli-electron:// in the browser to see if there is a prompt.

  • Advantages: Balm mode, large degree of freedom, comprehensive function.

  • Disadvantages: cumbersome, requires some knowledge of NSIS.

The development environment configures pseudo-protocols

The above two ways are all said, this is a supplement, after all, we can not write a bit in the development of a package test, quite time-consuming.

When we in the development of general directly using setAsDefaultProtocolClient pseudo protocol Settings, but after setting the link to open the web page of pseudo agreement will report an error, but after the packaging is good, this is what caused differences after development and packaging?

We can print process.argv. This is the Electron startup parameter and we can see that the development environment is (same for Mac, different path) :

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

The development environment is to start the EXE of a Node package, and then pass in the directory built by webpack to start the service, and this parameter is the exe file of the software after packaging

XXXXXXXX \ \ electron development. ExeCopy the code

We look at the complete pseudo agreement app. SetAsDefaultProtocolClient (protocol [, path, args]), the protocol is a protocol, the path is Electron executable file path (namely exe address, Default process.execPath), the argument args passes to the executable, which defaults to an empty array.

So here’s the answer:

app.setAsDefaultProtocolClient('vue-cli-electron') This is registered with only protocol and path, so in the development environment via vue-CLI-electron:// Only the exe of the node package is started at startup. The build directory behind it is not written at registration time.
Copy the code

We just need to make a judgment call and append this directory to args

if (app.isPackaged) { // Whether to pack
  app.setAsDefaultProtocolClient('vue-cli-electron')}else {
  app.setAsDefaultProtocolClient('vue-cli-electron', process.execPath, [
    path.resolve(process.argv[1]])}Copy the code

Note: If you use the above this way and development agreement and after the packaging of the same, you’ll have to put the development environment before packaging registration agreement removed (development main process by adding it to save, and then delete the line), or your own computer called pseudo agreement may start to develop electron bag oh, Now let’s see if local development can pull up our client via a pseudo protocol.

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

I wanted to include the parameters of how to obtain the pseudo protocol link in this issue, but I feel it is too long to read, so I will update it in the next issue, please look forward to it.

This series of updates can only be arranged during weekends and off-duty hours. If there are too many contents, the update will be slow. I hope it will be helpful to you

Address: xuxin123.com/electron/ur…

This article github address: link