关于html:Electron-Playground-系列自定义协议篇

作者: OBKoro1

1. 协定: 从网页端唤起 Electron 利用

elelctron 提供了一个形式来主动唤起 electron 利用 (如下图)， 这一次就让咱们来学学如何通过连贯来唤起 electron 利用，并且咱们能够应用这个性能来做点什么。

1.1 协定唤起示例:

1.2 什么是协定

electron 注册的协定, electron 会将协定注册到零碎的协定列表中，它是零碎层级的 API，只能在以后零碎下应用, 其余未注册协定的电脑不能辨认。

Electron 的 app 模块提供了一些解决协定的办法, 这些办法容许您设置协定和勾销协定, 来让你的利用成为默认的应用程序。

1.3 协定的作用

注册一个协定到零碎协定中, 当通过其余利用 / 浏览器网页端 关上新协定的链接时，浏览器会检测该协定有没有在零碎协定中, 如果该协定注册过，而后唤起协定的默认处理程序(咱们的利用)。

1.4 注册协定: app.setAsDefaultProtocolClient

协定须要在 ready 事件后注册，具体代码如下.

// 注册自定义协定
const {app} = require('electron')
const path = require('path')

// 注册自定义协定
function setDefaultProtocol() {
  const agreement = 'electron-playground-code' // 自定义协定名
  let isSet = false // 是否注册胜利

  app.removeAsDefaultProtocolClient(agreement) // 每次运行都删除自定义协定 而后再从新注册
  // 开发模式下在 window 运行须要做兼容
  if (process.env.NODE_ENV === 'development' && process.platform === 'win32') {
    // 设置 electron.exe 和 app 的门路
    isSet = app.setAsDefaultProtocolClient(agreement, process.execPath, [path.resolve(process.argv[1]),
    ])
  } else {isSet = app.setAsDefaultProtocolClient(agreement)
  }
  console.log('是否注册胜利', isSet)
}

setDefaultProtocol()

1.5 应用协定

应用形式: 在浏览器地址栏输出注册好的协定，即可唤起利用。

协定唤起的链接格局: 自协定名称:// 参数

比方上文注册: electron-playground-code协定, 触发时会默认带上://。

在应用的时候, 须要在浏览器地址栏输出:

electron-playground-code://1234 // 1234 是参数 可依据业务自行批改

1.6 注册协定并通过浏览器唤起后盾利用的 gif 示例:

1.7 监听应用程序被唤起

应用程序唤起，mac 零碎会触发 open-url 事件，window 零碎会触发 second-instance 事件。

// 注册自定义协定
const {app, dialog} = require('electron')
const agreement = 'electron-playground-code' // 自定义协定名
// 验证是否为自定义协定的链接
const AGREEMENT_REGEXP = new RegExp(`^${agreement}://`)

// 监听自定义协定唤起
function watchProtocol() {
  // mac 唤醒利用 会激活 open-url 事件 在 open-url 中判断是否为自定义协定关上事件
  app.on('open-url', (event, url) => {const isProtocol = AGREEMENT_REGEXP.test(url)
    if (isProtocol) {console.log('获取协定链接, 依据参数做各种事件')
      dialog.showMessageBox({
        type: 'info',
        message: 'Mac protocol 自定义协定关上',
        detail: ` 自定义协定链接:${url}`,
      })
    }
  })
  // window 零碎下唤醒利用会激活 second-instance 事件 它在 ready 执行之后能力被监听
  app.on('second-instance', (event, commandLine) => {
    // commandLine 是一个数组，唤醒的链接作为数组的一个元素放在这外面
    commandLine.forEach(str => {if (AGREEMENT_REGEXP.test(str)) {console.log('获取协定链接, 依据参数做各种事件')
        dialog.showMessageBox({
          type: 'info',
          message: 'window protocol 自定义协定关上',
          detail: ` 自定义协定链接:${str}`,
        })
      }
    })
  })
}

// 在 ready 事件回调中监听自定义协定唤起
watchProtocol()
console.log('监听胜利')

1.8 唤起利用执行回调示例

1.9 利用场景

1. 单纯唤醒利用

只需注册协定，零碎会主动关上利用。
体现：如果利用未关上将关上利用，如果利用曾经关上利用将会激活利用窗口。

1. 依据协定链接的参数进行各种操作

如下面的弹窗演示, 在监听协定链接关上的时候，能够获取残缺的协定链接 。
咱们能够依据协定链接来进行各种业务操作。
比方跳转指定链接地址，比方判断是否登录再进行跳转，比方下载指定文件等。

1.10 一些其余 API

app.removeAsDefaultProtocolClient(protocol) 删除注册的协定, 返回是否胜利删除的 Boolean

Mac: app.isDefaultProtocolClient(protocol) 以后程序是否为协定的处理程序。

app.getApplicationNameForProtocol(url) 获取该协定链接的利用处理程序

参数阐明:

protocol 不蕴含:// 注册的协定名。

url 蕴含://

// 自定义协定的其余相干 API
const {app} = require('electron')
const agreement = 'electron-playground-code' // 自定义协定名

console.log('自行正文，自在尝试')
const isApp = app.isDefaultProtocolClient(agreement)
console.log('以后程序是否为自定义协定的处理程序:', isApp)

const AgreementAppName = app.getApplicationNameForProtocol(`${agreement}://`)
console.log('获取该自定义协定链接的利用处理程序的名字', AgreementAppName)

const isDelete = app.removeAsDefaultProtocolClient(agreement)
console.log('删除自定义协定', isDelete)

2. 自定义协定

注册自定义协定，拦挡基于现有协定的申请，依据注册的自定义协定类型返回对应类型的数据。

咱们能够主动的来应用所有的

在该我的项目中的代码地址: electron-playground/app/protocol, 能够运行我的项目调试一下看看成果。

2.1 protocol.registerSchemesAsPrivileged

将协定注册成规范的 scheme, 不便后续调用。

留神：它必须在 ready 事件加载之前调用，并且只能调用一次。

protocol.registerSchemesAsPrivileged([{ scheme: 'myscheme', privileges: { bypassCSP: true} },
])

2.2 protocol.registerFileProtocol

拦挡自定义协定的申请回调，重新处理后再申请门路。

示例

protocol.registerFileProtocol(
  'myscheme',
  (request, callback) => {
    // 拼接绝对路径的 url
    const resolvePath = path.resolve(__dirname, '../../playground')
    let url = request.url.replace(`${myScheme}://`, '' )
    url = `${resolvePath}/${url}`
    return callback({path: decodeURIComponent(url) })
  },
  error => {if (error) console.error('Failed to register protocol')
  },
)

PS: 在文档上提供了不同品种的加载 API，这里只演示其中的一种。

2.3 应用形式

在 html 中应用自定义协定申请文件，即可主动拦挡。

我的项目中的应用地址: electron-playground/playground/page/protocol/protocol.md

 <img src={"myscheme://page/protocol/wakeUp.jpg"} alt="wakeUp"/>

2.4 protocol 其余 API

protocol.unregisterProtocol(scheme) // 勾销对自定义 scheme 的注册
protocol.isProtocolRegistered(scheme) // 自定义协定是否曾经拦挡
protocol.uninterceptProtocol(scheme) // 移除自定义协定的拦截器
// 各种用新的拦截器替换原有的拦截器
protocol.interceptFileProtocol(scheme, handler)
protocol.interceptStringProtocol(scheme, handler)
protocol.interceptBufferProtocol(scheme, handler)
protocol.interceptHttpProtocol(scheme, handler)
protocol.interceptStreamProtocol(scheme, handler)

对 Electron 感兴趣？请关注咱们的开源我的项目 Electron Playground，带你极速上手 Electron。

咱们每周五会精选一些有意思的文章和音讯和大家分享，来掘金关注咱们的 晓前端周刊。

咱们是好将来 · 晓黑板前端技术团队。
咱们会常常与大家分享最新最酷的行业技术常识。
欢送来 知乎、掘金、Segmentfault、CSDN、简书、开源中国、博客园 关注咱们。