macoselectronelectron-buildercustom-protocolcustom-url-protocol

Open app and pass parameters with deep linking using Electron (macOS)


I want to open app and pass parameters with deep linking using Electron (macOS).

Project 'electron-deep-linking-mac-win' is on GitHub.

enter image description here

Edited package.json, following ‘electron-builder’ quick-setup-guide to produce mac installer:

{
  "name": "electron-deep-linking-osx",
  "version": "1.0.0",
  "description": "A minimal Electron application with Deep Linking (OSX)",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "pack": "build --dir",
    "dist": "build"
  },
  "repository": "https://github.com/oikonomopo/electron-deep-linking-osx",
  "keywords": [
    "Electron",
    "osx",
    "deep-linking"
  ],
  "author": "GitHub",
  "license": "CC0-1.0",
  "devDependencies": {
    "electron": "1.6.6",
    "electron-builder": "17.1.2"
  },
  "build": {
    "appId": "your.id",
    "mac": {
      "category": "your.app.category.type"
    },
    "protocols": {
      "name": "myApp",
      "schemes": ["myApp"]
    }
  }
}

Edited main.js, appended code to register myapp url scheme protocol, listen 'open-url' events and log the arguments:

const electron = require('electron')
// Module to control application life.
const app = electron.app
// Module to create native browser window.
const BrowserWindow = electron.BrowserWindow
// Module with utilities for working with file and directory paths.
const path = require('path')
// Module with utilities for URL resolution and parsing.
const url = require('url')
// Module to display native system dialogs for opening and saving files, alerting, etc.
const dialog = electron.dialog

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow

function createWindow () {
  // Create the browser window.
  mainWindow = new BrowserWindow({width: 800, height: 600})

  // and load the index.html of the app.
  mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }))

  // Open the DevTools.
  mainWindow.webContents.openDevTools()

  // Emitted when the window is closed.
  mainWindow.on('closed', function () {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null
  })
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', function () {
  // On OS X it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', function () {
  // On OS X it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (mainWindow === null) {
    createWindow()
  }
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

// The setAsDefaultProtocolClient only works on packaged versions of the application
app.setAsDefaultProtocolClient('myApp')

// Protocol handler for osx
app.on('open-url', function (event, url) {
  event.preventDefault();
  log("open-url event: " + url)

  dialog.showErrorBox('open-url', `You arrived from: ${url}`)
})

// Log both at terminal and at browser
function log(s) {
    console.log(s)
    if (mainWindow && mainWindow.webContents) {
        mainWindow.webContents.executeJavaScript(`console.log("${s}")`)
    }
}

Steps to come to life:-)

# Clone this repository
git clone https://github.com/oikonomopo/electron-deep-linking-mac-win.git
# Go into the repository
cd electron-deep-linking-mac-win
# Install dependencies
npm install
# Run the app
npm start
# Produce installer
npm run dist

After running the installer (electron-deep-linking-mac-win/dist/electron-quick-start-1.0.0.dmg), i try to open electron-deep-linking-os app with deep linking, entering myapp://param at Safari address bar.

  1. If app is opened, it activates and i can see the dialog and the log open-url event: myapp://param!

  2. If app is closed, it opens, dialog is shown with proper url but isn't logged to dev console!

Why with dialog module url is showing properly, but isn't logged to dev console? How to log it?

Looking for solution using only electron-builder (which uses electron-packager)!


Solution

  • Solved for both macOS and win32 ( Updated project 'electron-deep-linking-mac-win' on GitHub).


    package.json:

    {
      "name": "electron-deeplinking-macos-win32",
      "version": "0.0.1",
      "description": "Minimal Electron application with deep inking (macOS/win32)",
      "main": "main.js",
      "scripts": {
        "start": "electron .",
        "pack": "build --dir",
        "dist": "build"
      },
      "repository": "https://github.com/oikonomopo/electron-deep-linking-osx",
      "author": "oikonomopo",
      "license": "CC0-1.0",
      "devDependencies": {
        "electron": "1.6.6",
        "electron-builder": "17.1.2"
      },
      "build": {
        "appId": "oikonomopo.electron-deeplinking-macos-win32",
        "protocols": {
          "name": "electron-deep-linking",
          "schemes": ["myapp"]
        },
        "mac": {
          "category": "public.app-category.Reference"
        },
        "win": {
        }
      }
    }
    

    main.js:

    const {app, BrowserWindow} = require('electron')
    // Module with utilities for working with file and directory paths.
    const path = require('path')
    // Module with utilities for URL resolution and parsing.
    const url = require('url')
    
    // Keep a global reference of the window object, if you don't, the window will
    // be closed automatically when the JavaScript object is garbage collected.
    let mainWindow
    
    // Deep linked url
    let deeplinkingUrl
    
    // Force Single Instance Application
    const shouldQuit = app.makeSingleInstance((argv, workingDirectory) => {
      // Someone tried to run a second instance, we should focus our window.
    
      // Protocol handler for win32
      // argv: An array of the second instance’s (command line / deep linked) arguments
      if (process.platform == 'win32') {
        // Keep only command line / deep linked arguments
        deeplinkingUrl = argv.slice(1)
      }
      logEverywhere("app.makeSingleInstance# " + deeplinkingUrl)
    
      if (win) {
        if (win.isMinimized()) win.restore()
            win.focus()
      }
    })
    if (shouldQuit) {
        app.quit()
        return
    }
    
    function createWindow () {
      // Create the browser window.
      mainWindow = new BrowserWindow({width: 800, height: 600})
    
      // and load the index.html of the app.
      mainWindow.loadURL(url.format({
        pathname: path.join(__dirname, 'index.html'),
        protocol: 'file:',
        slashes: true
      }))
    
      // Open the DevTools.
      mainWindow.webContents.openDevTools()
    
      // Protocol handler for win32
      if (process.platform == 'win32') {
        // Keep only command line / deep linked arguments
        deeplinkingUrl = process.argv.slice(1)
      }
      logEverywhere("createWindow# " + deeplinkingUrl)
    
      // Emitted when the window is closed.
      mainWindow.on('closed', function () {
        // Dereference the window object, usually you would store windows
        // in an array if your app supports multi windows, this is the time
        // when you should delete the corresponding element.
        mainWindow = null
      })
    }
    
    // This method will be called when Electron has finished
    // initialization and is ready to create browser windows.
    // Some APIs can only be used after this event occurs.
    app.on('ready', createWindow)
    
    // Quit when all windows are closed.
    app.on('window-all-closed', function () {
      // On OS X it is common for applications and their menu bar
      // to stay active until the user quits explicitly with Cmd + Q
      if (process.platform !== 'darwin') {
        app.quit()
      }
    })
    
    app.on('activate', function () {
      // On OS X it's common to re-create a window in the app when the
      // dock icon is clicked and there are no other windows open.
      if (mainWindow === null) {
        createWindow()
      }
    })
    
    // Define custom protocol handler. 
    // Deep linking works on packaged versions of the application!
    app.setAsDefaultProtocolClient('myapp')
    
    // Protocol handler for osx
    app.on('open-url', function (event, url) {
      event.preventDefault()
      deeplinkingUrl = url
      logEverywhere("open-url# " + deeplinkingUrl)
    })
    
    // Log both at dev console and at running node console instance
    function logEverywhere(s) {
        console.log(s)
        if (mainWindow && mainWindow.webContents) {
            mainWindow.webContents.executeJavaScript(`console.log("${s}")`)
        }
    }
    

    main.js code description: