Enable Deep Linking


#1

I cannot find anything mentioned about how to enable deep linking with Electron. I want users of my app to click on links in emails that can open a specific route in the Electron app.

How would this be possible on Windows platform? The closest idea I can think of is I embed the route/url in a file with a custom extension. The extension is registered in Windows to use my app to open. My app handles that file by getting the route and navigating to it.

But it seems clunky to use file attachments for this solution.

Any other ideas?


#2

Custom protocol ? Your-app://route/to/your/ressource

Github use this to open url with their app:
github-windows://openRepo/https://github.com/author/project


#3

Yes! That is what I was looking for.

As far as consuming the protocol in my app, that seems like it is an already-documented feature

But for registering the custom protocol with the OS, looks like this is a brand new feature with no documentation yet (as far as being implemented in electron core)?

Found this pull request that seems to add support for registering your app to handle a custom protocol? I don’t know where to find any documentation for this though??


#4

OK I think I found how to do this in the documentation:


#5

From mine similar Q/A at SO:
It’s about opening app and pass parameters with deep linking using Electron for both platforms (macOS/win32).


Minimal electron project with deep linking capabilities in macOS/win32 platforms (Single Instance Application) ‘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:

  • At let deeplinkingUrl we keep the provided url.

  • At macOS platform this is captured at 'open-url' event, we set it with deeplinkingUrl = url! (See // Protocol handler for osx)

  • At win32 platform this is saved at process.argv together with other arguments. To get only the provided url, deeplinkingUrl = argv.slice(1). (See // Protocol handler for win32)

  • As @Aurélien Nicolas mentions, at app.makeSingleInstance method we check in which platform we are and we set deeplinkingUrl accordingly! If we are at win32 platform, the url is located at argv variable from callback, else at macOS should have already been set at 'open-url' event! (See // Force Single Instance Application)


#6

Hi @oikonomopo,

I am trying this on windows system and hit from the url from chrome browser but it did not work. I have run npm run dist to generate the executable and then trying. Please suggest. i see it works for firefox browser. So is this an issue with chrome?

Thanks


#7

@rakesh1502

Check out the Handling URIs section in the flight manual to enable users to link to your package or use

atom://core/open/file?filename=urlEncodedFileName&line=n&column=n

to open a file in atom