From a15e0e0657ba2d9544ad0d9b0cf914fcefc22e3a Mon Sep 17 00:00:00 2001 From: Alan Ionita Date: Wed, 13 Nov 2019 05:46:54 +0000 Subject: [PATCH] FEAT [#20442] : adds the fiddle for launching an app from URL in another app, including all 3 files main.js, index.html, renderer.js (#20718) --- .../index.html | 92 +++++++++++++++++++ .../main.js | 69 ++++++++++++++ .../renderer.js | 14 +++ 3 files changed, 175 insertions(+) create mode 100644 docs/fiddles/system/protocol-handler/launch-app-from-URL-in-another-app/index.html create mode 100644 docs/fiddles/system/protocol-handler/launch-app-from-URL-in-another-app/main.js create mode 100644 docs/fiddles/system/protocol-handler/launch-app-from-URL-in-another-app/renderer.js diff --git a/docs/fiddles/system/protocol-handler/launch-app-from-URL-in-another-app/index.html b/docs/fiddles/system/protocol-handler/launch-app-from-URL-in-another-app/index.html new file mode 100644 index 000000000000..8839a0806e5d --- /dev/null +++ b/docs/fiddles/system/protocol-handler/launch-app-from-URL-in-another-app/index.html @@ -0,0 +1,92 @@ + + + + + Hello World! + + +
+
+

+ Protocol Handler +

+

The app module provides methods for handling protocols.

+

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.

+ +

Open the full app API documentation(opens in new window) in your browser.

+
+ +
+ + +
+

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 electron-api-demos://. 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.

+
Packaging
+

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 plist for the app is updated to include the new protocol handler. If you're using electron-packager then you can add the flag --extend-info with a path to the plist you've created. The one for this app is below.

+
Renderer Process
+ 

+            const {shell} = require('electron')
+            const path = require('path')
+            const protocolHandlerBtn = document.getElementById('protocol-handler')
+            protocolHandlerBtn.addEventListener('click', () => {
+                const pageDirectory = __dirname.replace('app.asar', 'app.asar.unpacked')
+                const pagePath = path.join('file://', pageDirectory, '../../sections/system/protocol-link.html')
+                shell.openExternal(pagePath)
+            })
+
+
Main Process
+ 

+            const {app, dialog} = require('electron')
+            const path = require('path')
+
+            if (process.defaultApp) {
+                if (process.argv.length >= 2) {
+                    app.setAsDefaultProtocolClient('electron-api-demos', process.execPath, [path.resolve(process.argv[1])])
+                }
+            } else {
+                app.setAsDefaultProtocolClient('electron-api-demos')
+            }
+
+            app.on('open-url', (event, url) => {
+                dialog.showErrorBox('Welcome Back', `You arrived from: ${url}`)
+            })
+
+
+
macOS plist
+ 

+            
+                
+                    
+                        
+                            CFBundleURLTypes
+                            
+                                
+                                    CFBundleURLSchemes
+                                    
+                                        electron-api-demos
+                                    
+                                    CFBundleURLName
+                                    Electron API Demos Protocol
+                                
+                            
+                            ElectronTeamID
+                            VEKTX9H2N7
+                        
+                    
+                
+
+
+
+ +
+ + + + + \ No newline at end of file diff --git a/docs/fiddles/system/protocol-handler/launch-app-from-URL-in-another-app/main.js b/docs/fiddles/system/protocol-handler/launch-app-from-URL-in-another-app/main.js new file mode 100644 index 000000000000..f52b46b4dd3f --- /dev/null +++ b/docs/fiddles/system/protocol-handler/launch-app-from-URL-in-another-app/main.js @@ -0,0 +1,69 @@ +// Modules to control application life and create native browser window +const { app, BrowserWindow, dialog } = require('electron') +const path = require('path') + +// 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, + webPreferences: { + nodeIntegration: true + } + }) + + // and load the index.html of the app. + mainWindow.loadFile('index.html') + + // 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. + +if (process.defaultApp) { + if (process.argv.length >= 2) { + app.setAsDefaultProtocolClient('electron-api-demos', process.execPath, [path.resolve(process.argv[1])]) + } +} else { + app.setAsDefaultProtocolClient('electron-api-demos') +} + +app.on('open-url', (event, url) => { + dialog.showErrorBox('Welcome Back', `You arrived from: ${url}`) +}) diff --git a/docs/fiddles/system/protocol-handler/launch-app-from-URL-in-another-app/renderer.js b/docs/fiddles/system/protocol-handler/launch-app-from-URL-in-another-app/renderer.js new file mode 100644 index 000000000000..8aa314d3c2c0 --- /dev/null +++ b/docs/fiddles/system/protocol-handler/launch-app-from-URL-in-another-app/renderer.js @@ -0,0 +1,14 @@ +const { shell } = require('electron') +const path = require('path') + +const openInBrowserButton = document.getElementById('open-in-browser') +const openAppLink = document.getElementById('open-app-link') +// Hides openAppLink when loaded inside Electron +openAppLink.style.display = 'none' + +openInBrowserButton.addEventListener('click', () => { + console.log('clicked') + const pageDirectory = __dirname.replace('app.asar', 'app.asar.unpacked') + const pagePath = path.join('file://', pageDirectory, 'index.html') + shell.openExternal(pagePath) +})