Skip to content

Commit a15e0e0

Browse files
alanionitazcbenz
alanionita
authored and
zcbenz
committed
FEAT [electron#20442] : adds the fiddle for launching an app from URL in another app, including all 3 files main.js, index.html, renderer.js (electron#20718)
1 parent 09533e7 commit a15e0e0

File tree

3 files changed

+175
-0
lines changed

3 files changed

+175
-0
lines changed

‎docs/fiddles/system/protocol-handler/launch-app-from-URL-in-another-app/index.html

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Hello World!</title>
6+
</head>
7+
<body>
8+
<section>
9+
<header>
10+
<h1>
11+
Protocol Handler
12+
</h1>
13+
<h3>The <code>app</code> module provides methods for handling protocols.</h3>
14+
<p>These methods allow you to set and unset the protocols your app should be the default app for. Similar to when a browser asks to be your default for viewing web pages.</p>
15+
16+
<p>Open the <a href="http://electron.atom.io/docs/api/app">full app API documentation<span class="u-visible-to-screen-reader">(opens in new window)</span></a> in your browser.</p>
17+
</header>
18+
19+
<div >
20+
<button id="open-in-browser" class="js-container-target demo-toggle-button">Launch current page in browser
21+
<div class="demo-meta u-avoid-clicks">Supports: Win, macOS <span class="demo-meta-divider">|</span> Process: Main</div>
22+
</button>
23+
<section id='open-app-link'>
24+
<a href="electron-api-demos://open">Now... launch the app from a web link</a>
25+
</section>
26+
<div >
27+
<p>You can set your app as the default app to open for a specific protocol. For instance, in this demo we set this app as the default for <code>electron-api-demos://</code>. The demo button above will launch a page in your default browser with a link. Click that link and it will re-launch this app.</p>
28+
<h5>Packaging</h5>
29+
<p>This feature will only work on macOS when your app is packaged. It will not work when you're launching it in development from the command-line. When you package your app you'll need to make sure the macOS <code>plist</code> for the app is updated to include the new protocol handler. If you're using <code>electron-packager</code> then you can add the flag <code>--extend-info</code> with a path to the <code>plist</code> you've created. The one for this app is below.</p>
30+
<h5>Renderer Process</h5>
31+
<pre><code>
32+
const {shell} = require('electron')
33+
const path = require('path')
34+
const protocolHandlerBtn = document.getElementById('protocol-handler')
35+
protocolHandlerBtn.addEventListener('click', () => {
36+
const pageDirectory = __dirname.replace('app.asar', 'app.asar.unpacked')
37+
const pagePath = path.join('file://', pageDirectory, '../../sections/system/protocol-link.html')
38+
shell.openExternal(pagePath)
39+
})
40+
</code></pre>
41+
<h5>Main Process</h5>
42+
<pre><code>
43+
const {app, dialog} = require('electron')
44+
const path = require('path')
45+
46+
if (process.defaultApp) {
47+
if (process.argv.length >= 2) {
48+
app.setAsDefaultProtocolClient('electron-api-demos', process.execPath, [path.resolve(process.argv[1])])
49+
}
50+
} else {
51+
app.setAsDefaultProtocolClient('electron-api-demos')
52+
}
53+
54+
app.on('open-url', (event, url) => {
55+
dialog.showErrorBox('Welcome Back', `You arrived from: ${url}`)
56+
})
57+
58+
</code></pre>
59+
<h5>macOS plist</h5>
60+
<pre><code>
61+
<?xml version="1.0" encoding="UTF-8"?>
62+
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
63+
<plist version="1.0">
64+
<dict>
65+
<key>CFBundleURLTypes</key>
66+
<array>
67+
<dict>
68+
<key>CFBundleURLSchemes</key>
69+
<array>
70+
<string>electron-api-demos</string>
71+
</array>
72+
<key>CFBundleURLName</key>
73+
<string>Electron API Demos Protocol</string>
74+
</dict>
75+
</array>
76+
<key>ElectronTeamID</key>
77+
<string>VEKTX9H2N7</string>
78+
</dict>
79+
</plist>
80+
</code>
81+
</pre>
82+
</div>
83+
</div>
84+
<script type="text/javascript">
85+
require('./renderer.js')
86+
</script>
87+
</section>
88+
</body>
89+
</html>
90+
91+
</body>
92+
</html>

‎docs/fiddles/system/protocol-handler/launch-app-from-URL-in-another-app/main.js

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
// Modules to control application life and create native browser window
2+
const { app, BrowserWindow, dialog } = require('electron')
3+
const path = require('path')
4+
5+
// Keep a global reference of the window object, if you don't, the window will
6+
// be closed automatically when the JavaScript object is garbage collected.
7+
let mainWindow
8+
9+
function createWindow () {
10+
// Create the browser window.
11+
mainWindow = new BrowserWindow({
12+
width: 800,
13+
height: 600,
14+
webPreferences: {
15+
nodeIntegration: true
16+
}
17+
})
18+
19+
// and load the index.html of the app.
20+
mainWindow.loadFile('index.html')
21+
22+
// Open the DevTools.
23+
mainWindow.webContents.openDevTools()
24+
25+
// Emitted when the window is closed.
26+
mainWindow.on('closed', function () {
27+
// Dereference the window object, usually you would store windows
28+
// in an array if your app supports multi windows, this is the time
29+
// when you should delete the corresponding element.
30+
mainWindow = null
31+
})
32+
}
33+
34+
// This method will be called when Electron has finished
35+
// initialization and is ready to create browser windows.
36+
// Some APIs can only be used after this event occurs.
37+
app.on('ready', createWindow)
38+
39+
// Quit when all windows are closed.
40+
app.on('window-all-closed', function () {
41+
// On OS X it is common for applications and their menu bar
42+
// to stay active until the user quits explicitly with Cmd + Q
43+
if (process.platform !== 'darwin') {
44+
app.quit()
45+
}
46+
})
47+
48+
app.on('activate', function () {
49+
// On OS X it's common to re-create a window in the app when the
50+
// dock icon is clicked and there are no other windows open.
51+
if (mainWindow === null) {
52+
createWindow()
53+
}
54+
})
55+
56+
// In this file you can include the rest of your app's specific main process
57+
// code. You can also put them in separate files and require them here.
58+
59+
if (process.defaultApp) {
60+
if (process.argv.length >= 2) {
61+
app.setAsDefaultProtocolClient('electron-api-demos', process.execPath, [path.resolve(process.argv[1])])
62+
}
63+
} else {
64+
app.setAsDefaultProtocolClient('electron-api-demos')
65+
}
66+
67+
app.on('open-url', (event, url) => {
68+
dialog.showErrorBox('Welcome Back', `You arrived from: ${url}`)
69+
})

‎docs/fiddles/system/protocol-handler/launch-app-from-URL-in-another-app/renderer.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
const { shell } = require('electron')
2+
const path = require('path')
3+
4+
const openInBrowserButton = document.getElementById('open-in-browser')
5+
const openAppLink = document.getElementById('open-app-link')
6+
// Hides openAppLink when loaded inside Electron
7+
openAppLink.style.display = 'none'
8+
9+
openInBrowserButton.addEventListener('click', () => {
10+
console.log('clicked')
11+
const pageDirectory = __dirname.replace('app.asar', 'app.asar.unpacked')
12+
const pagePath = path.join('file://', pageDirectory, 'index.html')
13+
shell.openExternal(pagePath)
14+
})

0 commit comments

Comments
 (0)