mirrors/electron
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

chore: update line endings on HTML files (#37755)

Browse source
This commit is contained in:
John Kleinschmidt 2023-03-29 15:02:13 -04:00 committed by GitHub
parent 48e13fde80
commit 8f3ef39f1e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 1118 additions and 1118 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

256
docs/fiddles/menus/customize-menus/index.html
View file

@ -1,128 +1,128 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Customize Menus</title>
</head>
<body>
<div>
<h1>Customize Menus</h1>
<h3>
The <code>Menu</code> and <code>MenuItem</code> modules can be used to
create custom native menus.
</h3>
<p>
There are two kinds of menus: the application (top) menu and context
(right-click) menu.
</p>
<p>
Open the
<a href="https://electronjs.org/docs/api/menu"
>full API documentation<span
>(opens in new window)</span
></a
>
in your browser.
</p>
</div>
<div>
<h2>Create an application menu</h2>
<div>
<div>
<p>
The <code>Menu</code> and <code>MenuItem</code> modules allow you to
customize your application menu. If you don't set any menu, Electron
will generate a minimal menu for your app by default.
</p>
<p>
If you click the 'View' option in the application menu and then the
'App Menu Demo', you'll see an information box displayed.
</p>
<div>
<h2>ProTip</h2>
<strong>Know operating system menu differences.</strong>
<p>
When designing an app for multiple operating systems it's
important to be mindful of the ways application menu conventions
differ on each operating system.
</p>
<p>
For instance, on Windows, accelerators are set with an
<code>&</code>. Naming conventions also vary, like between
"Settings" or "Preferences". Below are resources for learning
operating system specific standards.
</p>
<ul>
<li>
<a
href="https://developer.apple.com/macos/human-interface-guidelines/menus/menu-anatomy/"
>macOS<span
>(opens in new window)</span
></a
>
</li>
<li>
<a
href="https://learn.microsoft.com/en-us/previous-versions/windows/desktop/bb226797"
>Windows<span
>(opens in new window)</span
></a
>
</li>
<li>
<a
href="https://developer.gnome.org/hig/stable/menu-bars.html.en"
>Linux<span
>(opens in new window)</span
></a
>
</li>
</ul>
</div>
</div>
</div>
</div>
<div>
<h2>Create a context menu</h2>
<div>
<div>
<div>
<button id="context-menu">View Demo</button>
</div>
<p>
A context, or right-click, menu can be created with the
<code>Menu</code> and <code>MenuItem</code> modules as well. You can
right-click anywhere in this app or click the demo button to see an
example context menu.
</p>
<p>
In this demo we use the <code>ipcRenderer</code> module to show the
context menu when explicitly calling it from the renderer process.
</p>
<p>
See the full
<a
href="https://electronjs.org/docs/api/web-contents/#event-context-menu"
>context-menu event documentation</a
>
for all the available properties.
</p>
</div>
</div>
</div>
<script>
// You can also require other files to run in this process
require("./renderer.js");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Customize Menus</title>
</head>
<body>
<div>
<h1>Customize Menus</h1>
<h3>
The <code>Menu</code> and <code>MenuItem</code> modules can be used to
create custom native menus.
</h3>
<p>
There are two kinds of menus: the application (top) menu and context
(right-click) menu.
</p>
<p>
Open the
<a href="https://electronjs.org/docs/api/menu"
>full API documentation<span
>(opens in new window)</span
></a
>
in your browser.
</p>
</div>
<div>
<h2>Create an application menu</h2>
<div>
<div>
<p>
The <code>Menu</code> and <code>MenuItem</code> modules allow you to
customize your application menu. If you don't set any menu, Electron
will generate a minimal menu for your app by default.
</p>
<p>
If you click the 'View' option in the application menu and then the
'App Menu Demo', you'll see an information box displayed.
</p>
<div>
<h2>ProTip</h2>
<strong>Know operating system menu differences.</strong>
<p>
When designing an app for multiple operating systems it's
important to be mindful of the ways application menu conventions
differ on each operating system.
</p>
<p>
For instance, on Windows, accelerators are set with an
<code>&</code>. Naming conventions also vary, like between
"Settings" or "Preferences". Below are resources for learning
operating system specific standards.
</p>
<ul>
<li>
<a
href="https://developer.apple.com/macos/human-interface-guidelines/menus/menu-anatomy/"
>macOS<span
>(opens in new window)</span
></a
>
</li>
<li>
<a
href="https://learn.microsoft.com/en-us/previous-versions/windows/desktop/bb226797"
>Windows<span
>(opens in new window)</span
></a
>
</li>
<li>
<a
href="https://developer.gnome.org/hig/stable/menu-bars.html.en"
>Linux<span
>(opens in new window)</span
></a
>
</li>
</ul>
</div>
</div>
</div>
</div>
<div>
<h2>Create a context menu</h2>
<div>
<div>
<div>
<button id="context-menu">View Demo</button>
</div>
<p>
A context, or right-click, menu can be created with the
<code>Menu</code> and <code>MenuItem</code> modules as well. You can
right-click anywhere in this app or click the demo button to see an
example context menu.
</p>
<p>
In this demo we use the <code>ipcRenderer</code> module to show the
context menu when explicitly calling it from the renderer process.
</p>
<p>
See the full
<a
href="https://electronjs.org/docs/api/web-contents/#event-context-menu"
>context-menu event documentation</a
>
for all the available properties.
</p>
</div>
</div>
</div>
<script>
// You can also require other files to run in this process
require("./renderer.js");
</script>
</body>
</html>

146
docs/fiddles/menus/shortcuts/index.html
View file

@ -1,73 +1,73 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Keyboard Shortcuts</title>
</head>
<body>
<div>
<h1>Keyboard Shortcuts</h1>
<h3>The <code>globalShortcut</code> and <code>Menu</code> modules can be used to define keyboard shortcuts.</h3>
<p>
In Electron, keyboard shortcuts are called accelerators.
They can be assigned to actions in your application's Menu,
or they can be assigned globally so they'll be triggered even when
your app doesn't have keyboard focus.
</p>
<p>
Open the full documentation for the
<a href="https://electronjs.org/docs/api/menu">Menu</a>,
<a href="https://electronjs.org/docs/api/accelerator">Accelerator</a>,
and
<a href="https://electronjs.org/docs/api/global-shortcut">globalShortcut</a>
APIs in your browser.
</p>
</div>
<div>
<div>
<div>
<p>
To try this demo, press <kbd>CommandOrControl+Alt+K</kbd> on your
keyboard.
</p>
<p>
Global shortcuts are detected even when the app doesn't have
keyboard focus, and they must be registered after the app's
`ready` event is emitted.
</p>
<div>
<h2>ProTip</h2>
<strong>Avoid overriding system-wide keyboard shortcuts.</strong>
<p>
When registering global shortcuts, it's important to be aware of
existing defaults in the target operating system, so as not to
override any existing behaviors. For an overview of each
operating system's keyboard shortcuts, view these documents:
</p>
<ul>
<li><a
href="https://developer.apple.com/library/mac/documentation/UserExperience/Conceptual/OSXHIGuidelines/Keyboard.html">macOS</a>
</li>
<li><a
href="http://windows.microsoft.com/en-us/windows-10/keyboard-shortcuts">Windows</a></li>
<li><a
href="https://developer.gnome.org/hig/stable/keyboard-input.html.en">Linux</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Keyboard Shortcuts</title>
</head>
<body>
<div>
<h1>Keyboard Shortcuts</h1>
<h3>The <code>globalShortcut</code> and <code>Menu</code> modules can be used to define keyboard shortcuts.</h3>
<p>
In Electron, keyboard shortcuts are called accelerators.
They can be assigned to actions in your application's Menu,
or they can be assigned globally so they'll be triggered even when
your app doesn't have keyboard focus.
</p>
<p>
Open the full documentation for the
<a href="https://electronjs.org/docs/api/menu">Menu</a>,
<a href="https://electronjs.org/docs/api/accelerator">Accelerator</a>,
and
<a href="https://electronjs.org/docs/api/global-shortcut">globalShortcut</a>
APIs in your browser.
</p>
</div>
<div>
<div>
<div>
<p>
To try this demo, press <kbd>CommandOrControl+Alt+K</kbd> on your
keyboard.
</p>
<p>
Global shortcuts are detected even when the app doesn't have
keyboard focus, and they must be registered after the app's
`ready` event is emitted.
</p>
<div>
<h2>ProTip</h2>
<strong>Avoid overriding system-wide keyboard shortcuts.</strong>
<p>
When registering global shortcuts, it's important to be aware of
existing defaults in the target operating system, so as not to
override any existing behaviors. For an overview of each
operating system's keyboard shortcuts, view these documents:
</p>
<ul>
<li><a
href="https://developer.apple.com/library/mac/documentation/UserExperience/Conceptual/OSXHIGuidelines/Keyboard.html">macOS</a>
</li>
<li><a
href="http://windows.microsoft.com/en-us/windows-10/keyboard-shortcuts">Windows</a></li>
<li><a
href="https://developer.gnome.org/hig/stable/keyboard-input.html.en">Linux</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>

162
docs/fiddles/native-ui/dialogs/error-dialog/index.html
View file

@ -1,81 +1,81 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Error Dialog</title>
</head>
<body>
<div>
<h1>Use system dialogs</h1>
<h3>
The <code>dialog</code> module in Electron allows you to use native
system dialogs for opening files or directories, saving a file or
displaying informational messages.
</h3>
<p>
This is a main process module because this process is more efficient
with native utilities and it allows the call to happen without
interrupting the visible elements in your page's renderer process.
</p>
<p>
Open the
<a href="https://electronjs.org/docs/api/dialog/">
full API documentation (opens in new window)
</a>
in your browser.
</p>
</div>
<div>
<div>
<h2>Error Dialog</h2>
<div>
<div>
<button id="error-dialog">View Demo</button>
</div>
<p>
In this demo, the <code>ipc</code> module is used to send a message
from the renderer process instructing the main process to launch the
error dialog.
</p>
<p>
You can use an error dialog before the app's
<code>ready</code> event, which is useful for showing errors upon
startup.
</p>
<h5>Renderer Process</h5>
<pre>
<code>
const {ipcRenderer} = require('electron')
const errorBtn = document.getElementById('error-dialog')
errorBtn.addEventListener('click', (event) => {
ipcRenderer.send('open-error-dialog')
})
</code></pre>
<h5>Main Process</h5>
<pre>
<code>
const {ipcMain, dialog} = require('electron')
ipcMain.on('open-error-dialog', (event) => {
dialog.showErrorBox('An Error Message', 'Demonstrating an error message.')
})
</code>
</pre>
</div>
</div>
</div>
<script>
// You can also require other files to run in this process
require("./renderer.js");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Error Dialog</title>
</head>
<body>
<div>
<h1>Use system dialogs</h1>
<h3>
The <code>dialog</code> module in Electron allows you to use native
system dialogs for opening files or directories, saving a file or
displaying informational messages.
</h3>
<p>
This is a main process module because this process is more efficient
with native utilities and it allows the call to happen without
interrupting the visible elements in your page's renderer process.
</p>
<p>
Open the
<a href="https://electronjs.org/docs/api/dialog/">
full API documentation (opens in new window)
</a>
in your browser.
</p>
</div>
<div>
<div>
<h2>Error Dialog</h2>
<div>
<div>
<button id="error-dialog">View Demo</button>
</div>
<p>
In this demo, the <code>ipc</code> module is used to send a message
from the renderer process instructing the main process to launch the
error dialog.
</p>
<p>
You can use an error dialog before the app's
<code>ready</code> event, which is useful for showing errors upon
startup.
</p>
<h5>Renderer Process</h5>
<pre>
<code>
const {ipcRenderer} = require('electron')
const errorBtn = document.getElementById('error-dialog')
errorBtn.addEventListener('click', (event) => {
ipcRenderer.send('open-error-dialog')
})
</code></pre>
<h5>Main Process</h5>
<pre>
<code>
const {ipcMain, dialog} = require('electron')
ipcMain.on('open-error-dialog', (event) => {
dialog.showErrorBox('An Error Message', 'Demonstrating an error message.')
})
</code>
</pre>
</div>
</div>
</div>
<script>
// You can also require other files to run in this process
require("./renderer.js");
</script>
</body>
</html>

208
docs/fiddles/native-ui/dialogs/information-dialog/index.html
View file

@ -1,104 +1,104 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Information Dialog</title>
</head>
<body>
<div class="section-wrapper">
<h1>Use system dialogs</h1>
<h3>
The <code>dialog</code> module in Electron allows you to use native
system dialogs for opening files or directories, saving a file or
displaying informational messages.
</h3>
<p>
This is a main process module because this process is more efficient
with native utilities and it allows the call to happen without
interrupting the visible elements in your page's renderer process.
</p>
<p>
Open the
<a href="https://electronjs.org/docs/api/dialog/">
full API documentation (opens in new window)
</a>
in your browser.
</p>
</div>
<div>
<div>
<h2>Information Dialog</h2>
<div>
<div>
<button id="information-dialog">
View Demo
</button>
<span id="info-selection"></span>
</div>
<p>
In this demo, the <code>ipc</code> module is used to send a message
from the renderer process instructing the main process to launch the
information dialog. Options may be provided for responses which can
then be relayed back to the renderer process.
</p>
<p>
Note: The <code>title</code> property is not displayed in macOS.
</p>
<p>
An information dialog can contain an icon, your choice of buttons,
title and message.
</p>
<h5>Renderer Process</h5>
<pre>
<code>
const {ipcRenderer} = require('electron')
const informationBtn = document.getElementById('information-dialog')
informationBtn.addEventListener('click', (event) => {
ipcRenderer.send('open-information-dialog')
})
ipcRenderer.on('information-dialog-selection', (event, index) => {
let message = 'You selected '
if (index === 0) message += 'yes.'
else message += 'no.'
document.getElementById('info-selection').innerHTML = message
})
</code>
</pre>
<h5>Main Process</h5>
<pre>
<code>
const {ipcMain, dialog} = require('electron')
ipcMain.on('open-information-dialog', (event) => {
const options = {
type: 'info',
title: 'Information',
message: "This is an information dialog. Isn't it nice?",
buttons: ['Yes', 'No']
}
dialog.showMessageBox(options, (index) => {
event.sender.send('information-dialog-selection', index)
})
})
</code>
</pre>
</div>
</div>
</div>
<script>
// You can also require other files to run in this process
require("./renderer.js");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Information Dialog</title>
</head>
<body>
<div class="section-wrapper">
<h1>Use system dialogs</h1>
<h3>
The <code>dialog</code> module in Electron allows you to use native
system dialogs for opening files or directories, saving a file or
displaying informational messages.
</h3>
<p>
This is a main process module because this process is more efficient
with native utilities and it allows the call to happen without
interrupting the visible elements in your page's renderer process.
</p>
<p>
Open the
<a href="https://electronjs.org/docs/api/dialog/">
full API documentation (opens in new window)
</a>
in your browser.
</p>
</div>
<div>
<div>
<h2>Information Dialog</h2>
<div>
<div>
<button id="information-dialog">
View Demo
</button>
<span id="info-selection"></span>
</div>
<p>
In this demo, the <code>ipc</code> module is used to send a message
from the renderer process instructing the main process to launch the
information dialog. Options may be provided for responses which can
then be relayed back to the renderer process.
</p>
<p>
Note: The <code>title</code> property is not displayed in macOS.
</p>
<p>
An information dialog can contain an icon, your choice of buttons,
title and message.
</p>
<h5>Renderer Process</h5>
<pre>
<code>
const {ipcRenderer} = require('electron')
const informationBtn = document.getElementById('information-dialog')
informationBtn.addEventListener('click', (event) => {
ipcRenderer.send('open-information-dialog')
})
ipcRenderer.on('information-dialog-selection', (event, index) => {
let message = 'You selected '
if (index === 0) message += 'yes.'
else message += 'no.'
document.getElementById('info-selection').innerHTML = message
})
</code>
</pre>
<h5>Main Process</h5>
<pre>
<code>
const {ipcMain, dialog} = require('electron')
ipcMain.on('open-information-dialog', (event) => {
const options = {
type: 'info',
title: 'Information',
message: "This is an information dialog. Isn't it nice?",
buttons: ['Yes', 'No']
}
dialog.showMessageBox(options, (index) => {
event.sender.send('information-dialog-selection', index)
})
})
</code>
</pre>
</div>
</div>
</div>
<script>
// You can also require other files to run in this process
require("./renderer.js");
</script>
</body>
</html>

216
docs/fiddles/native-ui/dialogs/open-file-or-directory/index.html
View file

@ -1,108 +1,108 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Open File or Directory</title>
</head>
<body>
<div class="section-wrapper">
<h1>Use system dialogs</h1>
<h3>
The <code>dialog</code> module in Electron allows you to use native
system dialogs for opening files or directories, saving a file or
displaying informational messages.
</h3>
<p>
This is a main process module because this process is more efficient
with native utilities and it allows the call to happen without
interrupting the visible elements in your page's renderer process.
</p>
<p>
Open the
<a href="https://electronjs.org/docs/api/dialog/">
full API documentation (opens in new window)
</a>
in your browser.
</p>
</div>
<div>
<div>
<h2>Open a File or Directory</h2>
<div>
<div>
<button id="select-directory">View Demo</button>
<span id="selected-file"></span>
</div>
<p>
In this demo, the <code>ipc</code> module is used to send a message
from the renderer process instructing the main process to launch the
open file (or directory) dialog. If a file is selected, the main
process can send that information back to the renderer process.
</p>
<h5>Renderer Process</h5>
<pre>
<code>
const {ipcRenderer} = require('electron')
const selectDirBtn = document.getElementById('select-directory')
selectDirBtn.addEventListener('click', (event) => {
ipcRenderer.send('open-file-dialog')
})
ipcRenderer.on('selected-directory', (event, path) => {
document.getElementById('selected-file').innerHTML = `You selected: ${path}`
})
</code>
</pre>
<h5>Main Process</h5>
<pre>
<code>
const {ipcMain, dialog} = require('electron')
ipcMain.on('open-file-dialog', (event) => {
dialog.showOpenDialog({
properties: ['openFile', 'openDirectory']
}, (files) => {
if (files) {
event.sender.send('selected-directory', files)
}
})
})
</code>
</pre>
<div>
<h2>ProTip</h2>
<strong>The sheet-style dialog on macOS.</strong>
<p>
On macOS you can choose between a "sheet" dialog or a default
dialog. The sheet version descends from the top of the window. To
use sheet version, pass the <code>window</code> as the first
argument in the dialog method.
</p>
<pre><code class="language-js">const ipc = require('electron').ipcMain
const dialog = require('electron').dialog
const BrowserWindow = require('electron').BrowserWindow
ipc.on('open-file-dialog-sheet', function (event) {
const window = BrowserWindow.fromWebContents(event.sender)
const files = dialog.showOpenDialog(window, { properties: [ 'openFile' ]})
})</code></pre>
</div>
</div>
</div>
</div>
<script>
// You can also require other files to run in this process
require("./renderer.js");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Open File or Directory</title>
</head>
<body>
<div class="section-wrapper">
<h1>Use system dialogs</h1>
<h3>
The <code>dialog</code> module in Electron allows you to use native
system dialogs for opening files or directories, saving a file or
displaying informational messages.
</h3>
<p>
This is a main process module because this process is more efficient
with native utilities and it allows the call to happen without
interrupting the visible elements in your page's renderer process.
</p>
<p>
Open the
<a href="https://electronjs.org/docs/api/dialog/">
full API documentation (opens in new window)
</a>
in your browser.
</p>
</div>
<div>
<div>
<h2>Open a File or Directory</h2>
<div>
<div>
<button id="select-directory">View Demo</button>
<span id="selected-file"></span>
</div>
<p>
In this demo, the <code>ipc</code> module is used to send a message
from the renderer process instructing the main process to launch the
open file (or directory) dialog. If a file is selected, the main
process can send that information back to the renderer process.
</p>
<h5>Renderer Process</h5>
<pre>
<code>
const {ipcRenderer} = require('electron')
const selectDirBtn = document.getElementById('select-directory')
selectDirBtn.addEventListener('click', (event) => {
ipcRenderer.send('open-file-dialog')
})
ipcRenderer.on('selected-directory', (event, path) => {
document.getElementById('selected-file').innerHTML = `You selected: ${path}`
})
</code>
</pre>
<h5>Main Process</h5>
<pre>
<code>
const {ipcMain, dialog} = require('electron')
ipcMain.on('open-file-dialog', (event) => {
dialog.showOpenDialog({
properties: ['openFile', 'openDirectory']
}, (files) => {
if (files) {
event.sender.send('selected-directory', files)
}
})
})
</code>
</pre>
<div>
<h2>ProTip</h2>
<strong>The sheet-style dialog on macOS.</strong>
<p>
On macOS you can choose between a "sheet" dialog or a default
dialog. The sheet version descends from the top of the window. To
use sheet version, pass the <code>window</code> as the first
argument in the dialog method.
</p>
<pre><code class="language-js">const ipc = require('electron').ipcMain
const dialog = require('electron').dialog
const BrowserWindow = require('electron').BrowserWindow
ipc.on('open-file-dialog-sheet', function (event) {
const window = BrowserWindow.fromWebContents(event.sender)
const files = dialog.showOpenDialog(window, { properties: [ 'openFile' ]})
})</code></pre>
</div>
</div>
</div>
</div>
<script>
// You can also require other files to run in this process
require("./renderer.js");
</script>
</body>
</html>

182
docs/fiddles/native-ui/dialogs/save-dialog/index.html
View file

@ -1,91 +1,91 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Save Dialog</title>
</head>
<body>
<div>
<h1>Use system dialogs</h1>
<h3>
The <code>dialog</code> module in Electron allows you to use native
system dialogs for opening files or directories, saving a file or
displaying informational messages.
</h3>
<p>
This is a main process module because this process is more efficient
with native utilities and it allows the call to happen without
interrupting the visible elements in your page's renderer process.
</p>
<p>
Open the
<a href="https://electronjs.org/docs/api/dialog/">
full API documentation (opens in new window)
</a>
in your browser.
</p>
</div>
<div>
<div>
<h2>Save Dialog</h2>
<div>
<div>
<button button id="save-dialog">View Demo</button>
<span id="file-saved"></span>
</div>
<p>
In this demo, the <code>ipc</code> module is used to send a message
from the renderer process instructing the main process to launch the
save dialog. It returns the path selected by the user which can be
relayed back to the renderer process.
</p>
<h5>Renderer Process</h5>
<pre>
<code>
const {ipcRenderer} = require('electron')
const saveBtn = document.getElementById('save-dialog')
saveBtn.addEventListener('click', (event) => {
ipcRenderer.send('save-dialog')
})
ipcRenderer.on('saved-file', (event, path) => {
if (!path) path = 'No path'
document.getElementById('file-saved').innerHTML = `Path selected: ${path}`
})
</code>
</pre>
<h5>Main Process</h5>
<pre>
<code>
const {ipcMain, dialog} = require('electron')
ipcMain.on('save-dialog', (event) => {
const options = {
title: 'Save an Image',
filters: [
{ name: 'Images', extensions: ['jpg', 'png', 'gif'] }
]
}
dialog.showSaveDialog(options, (filename) => {
event.sender.send('saved-file', filename)
})
})
</code>
</pre>
</div>
</div>
</div>
<script>
// You can also require other files to run in this process
require("./renderer.js");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Save Dialog</title>
</head>
<body>
<div>
<h1>Use system dialogs</h1>
<h3>
The <code>dialog</code> module in Electron allows you to use native
system dialogs for opening files or directories, saving a file or
displaying informational messages.
</h3>
<p>
This is a main process module because this process is more efficient
with native utilities and it allows the call to happen without
interrupting the visible elements in your page's renderer process.
</p>
<p>
Open the
<a href="https://electronjs.org/docs/api/dialog/">
full API documentation (opens in new window)
</a>
in your browser.
</p>
</div>
<div>
<div>
<h2>Save Dialog</h2>
<div>
<div>
<button button id="save-dialog">View Demo</button>
<span id="file-saved"></span>
</div>
<p>
In this demo, the <code>ipc</code> module is used to send a message
from the renderer process instructing the main process to launch the
save dialog. It returns the path selected by the user which can be
relayed back to the renderer process.
</p>
<h5>Renderer Process</h5>
<pre>
<code>
const {ipcRenderer} = require('electron')
const saveBtn = document.getElementById('save-dialog')
saveBtn.addEventListener('click', (event) => {
ipcRenderer.send('save-dialog')
})
ipcRenderer.on('saved-file', (event, path) => {
if (!path) path = 'No path'
document.getElementById('file-saved').innerHTML = `Path selected: ${path}`
})
</code>
</pre>
<h5>Main Process</h5>
<pre>
<code>
const {ipcMain, dialog} = require('electron')
ipcMain.on('save-dialog', (event) => {
const options = {
title: 'Save an Image',
filters: [
{ name: 'Images', extensions: ['jpg', 'png', 'gif'] }
]
}
dialog.showSaveDialog(options, (filename) => {
event.sender.send('saved-file', filename)
})
})
</code>
</pre>
</div>
</div>
</div>
<script>
// You can also require other files to run in this process
require("./renderer.js");
</script>
</body>
</html>

152
docs/fiddles/native-ui/drag-and-drop/index.html
View file

@ -1,76 +1,76 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Drag and drop files</title>
</head>
<body>
<div>
<h1>Drag and drop files</h1>
<div>Supports: Win, macOS, Linux <span>|</span> Process: Both</div>
<h3>
Electron supports dragging files and content out from web content into
the operating system's world.
</h3>
<p>
Open the
<a href="https://electronjs.org/docs/tutorial/native-file-drag-drop">
full API documentation (opens in new window)
</a>
in your browser.
</p>
</div>
<div>
<div>
<h2>Dragging files</h2>
<div>
<div>
<a href="#" id="drag-file-link">Drag Demo</a>
</div>
<p>
Click and drag the link above to copy the renderer process
javascript file on to your machine.
</p>
<p>
In this demo, the <code>webContents.startDrag()</code> API is called
in response to the <code>ondragstart</code> event.
</p>
<h5>Renderer Process</h5>
<pre><code>
const {ipcRenderer} = require('electron')
const dragFileLink = document.getElementById('drag-file-link')
dragFileLink.addEventListener('dragstart', (event) => {
event.preventDefault()
ipcRenderer.send('ondragstart', __filename)
})
</code></pre>
<h5>Main Process</h5>
<pre>
<code>
const {ipcMain} = require('electron')
const path = require('path')
ipcMain.on('ondragstart', (event, filepath) => {
const iconName = 'codeIcon.png'
event.sender.startDrag({
file: filepath,
icon: path.join(__dirname, iconName)
})
})
</code></pre>
</div>
</div>
</div>
<script>
// You can also require other files to run in this process
require("./renderer.js");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Drag and drop files</title>
</head>
<body>
<div>
<h1>Drag and drop files</h1>
<div>Supports: Win, macOS, Linux <span>|</span> Process: Both</div>
<h3>
Electron supports dragging files and content out from web content into
the operating system's world.
</h3>
<p>
Open the
<a href="https://electronjs.org/docs/tutorial/native-file-drag-drop">
full API documentation (opens in new window)
</a>
in your browser.
</p>
</div>
<div>
<div>
<h2>Dragging files</h2>
<div>
<div>
<a href="#" id="drag-file-link">Drag Demo</a>
</div>
<p>
Click and drag the link above to copy the renderer process
javascript file on to your machine.
</p>
<p>
In this demo, the <code>webContents.startDrag()</code> API is called
in response to the <code>ondragstart</code> event.
</p>
<h5>Renderer Process</h5>
<pre><code>
const {ipcRenderer} = require('electron')
const dragFileLink = document.getElementById('drag-file-link')
dragFileLink.addEventListener('dragstart', (event) => {
event.preventDefault()
ipcRenderer.send('ondragstart', __filename)
})
</code></pre>
<h5>Main Process</h5>
<pre>
<code>
const {ipcMain} = require('electron')
const path = require('path')
ipcMain.on('ondragstart', (event, filepath) => {
const iconName = 'codeIcon.png'
event.sender.startDrag({
file: filepath,
icon: path.join(__dirname, iconName)
})
})
</code></pre>
</div>
</div>
</div>
<script>
// You can also require other files to run in this process
require("./renderer.js");
</script>
</body>
</html>

208
docs/fiddles/native-ui/external-links-file-manager/index.html
View file

@ -1,104 +1,104 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Open external links and the file manager</title>
</head>
<body>
<div>
<h1>
Open external links and the file manager
</h1>
<h3>
The <code>shell</code> module in Electron allows you to access certain
native elements like the file manager and default web browser.
</h3>
<p>This module works in both the main and renderer process.</p>
<p>
Open the
<a href="https://electronjs.org/docs/api/shell">
full API documentation (opens in new window)
</a>
in your browser.
</p>
</div>
<div>
<div>
<h2>Open Path in File Manager</h2>
<div>
<div>
<button id="open-file-manager">
View Demo
</button>
</div>
<p>
This demonstrates using the <code>shell</code> module to open the
system file manager at a particular location.
</p>
<p>
Clicking the demo button will open your file manager at the root.
</p>
</div>
</div>
</div>
<div>
<div>
<h2>Open External Links</h2>
<div>
<div>
<button id="open-ex-links">View Demo</button>
</div>
<p>
If you do not want your app to open website links
<em>within</em> the app, you can use the <code>shell</code> module
to open them externally. When clicked, the links will open outside
of your app and in the user's default web browser.
</p>
<p>
When the demo button is clicked, the electron website will open in
your browser.
</p>
<p></p>
<div>
<h2>ProTip</h2>
<strong>Open all outbound links externally.</strong>
<p>
You may want to open all <code>http</code> and
<code>https</code> links outside of your app. To do this, query
the document and loop through each link and add a listener. This
app uses the code below which is located in
<code>assets/ex-links.js</code>.
</p>
<h5>Renderer Process</h5>
<pre>
<code>
const shell = require('electron').shell
const links = document.querySelectorAll('a[href]')
Array.prototype.forEach.call(links, (link) => {
const url = link.getAttribute('href')
if (url.indexOf('http') === 0) {
link.addEventListener('click', (e) => {
e.preventDefault()
shell.openExternal(url)
})
}
})
</code>
</pre>
</div>
</div>
</div>
</div>
<script>
// You can also require other files to run in this process
require("./renderer.js");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Open external links and the file manager</title>
</head>
<body>
<div>
<h1>
Open external links and the file manager
</h1>
<h3>
The <code>shell</code> module in Electron allows you to access certain
native elements like the file manager and default web browser.
</h3>
<p>This module works in both the main and renderer process.</p>
<p>
Open the
<a href="https://electronjs.org/docs/api/shell">
full API documentation (opens in new window)
</a>
in your browser.
</p>
</div>
<div>
<div>
<h2>Open Path in File Manager</h2>
<div>
<div>
<button id="open-file-manager">
View Demo
</button>
</div>
<p>
This demonstrates using the <code>shell</code> module to open the
system file manager at a particular location.
</p>
<p>
Clicking the demo button will open your file manager at the root.
</p>
</div>
</div>
</div>
<div>
<div>
<h2>Open External Links</h2>
<div>
<div>
<button id="open-ex-links">View Demo</button>
</div>
<p>
If you do not want your app to open website links
<em>within</em> the app, you can use the <code>shell</code> module
to open them externally. When clicked, the links will open outside
of your app and in the user's default web browser.
</p>
<p>
When the demo button is clicked, the electron website will open in
your browser.
</p>
<p></p>
<div>
<h2>ProTip</h2>
<strong>Open all outbound links externally.</strong>
<p>
You may want to open all <code>http</code> and
<code>https</code> links outside of your app. To do this, query
the document and loop through each link and add a listener. This
app uses the code below which is located in
<code>assets/ex-links.js</code>.
</p>
<h5>Renderer Process</h5>
<pre>
<code>
const shell = require('electron').shell
const links = document.querySelectorAll('a[href]')
Array.prototype.forEach.call(links, (link) => {
const url = link.getAttribute('href')
if (url.indexOf('http') === 0) {
link.addEventListener('click', (e) => {
e.preventDefault()
shell.openExternal(url)
})
}
})
</code>
</pre>
</div>
</div>
</div>
</div>
<script>
// You can also require other files to run in this process
require("./renderer.js");
</script>
</body>
</html>

134
docs/fiddles/native-ui/notifications/index.html
View file

@ -1,67 +1,67 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Desktop notifications</title>
</head>
<body>
<div>
<h1>Desktop notifications</h1>
<h3>
The <code>notification</code> module in Electron allows you to add basic
desktop notifications.
</h3>
<p>
Electron conveniently allows developers to send notifications with the
<a href="https://notifications.spec.whatwg.org/">HTML5 Notification API</a>,
using the currently running operating system’s native notification
APIs to display it.
</p>
<p>
<b>Note:</b> Since this is an HTML5 API it is only available in the
renderer process.
</p>
<p>
Open the
<a href="https://electronjs.org/docs/all/#notifications-windows-linux-macos">
full API documentation<span>(opens in new window)</span>
</a>
in your browser.
</p>
</div>
<div>
<div>
<h2>Basic notification</h2>
<div>
<div>
<button id="basic-noti">View demo</button>
</div>
<p>This demo demonstrates a basic notification. Text only.</p>
</div>
</div>
</div>
<div>
<div>
<h2>Notification with image</h2>
<div>
<div>
<button id="advanced-noti">View demo</button>
</div>
<p>
This demo demonstrates a basic notification. Both text and a image
</p>
</div>
</div>
</div>
<script>
// You can also require other files to run in this process
require("./renderer.js");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Desktop notifications</title>
</head>
<body>
<div>
<h1>Desktop notifications</h1>
<h3>
The <code>notification</code> module in Electron allows you to add basic
desktop notifications.
</h3>
<p>
Electron conveniently allows developers to send notifications with the
<a href="https://notifications.spec.whatwg.org/">HTML5 Notification API</a>,
using the currently running operating system’s native notification
APIs to display it.
</p>
<p>
<b>Note:</b> Since this is an HTML5 API it is only available in the
renderer process.
</p>
<p>
Open the
<a href="https://electronjs.org/docs/all/#notifications-windows-linux-macos">
full API documentation<span>(opens in new window)</span>
</a>
in your browser.
</p>
</div>
<div>
<div>
<h2>Basic notification</h2>
<div>
<div>
<button id="basic-noti">View demo</button>
</div>
<p>This demo demonstrates a basic notification. Text only.</p>
</div>
</div>
</div>
<div>
<div>
<h2>Notification with image</h2>
<div>
<div>
<button id="advanced-noti">View demo</button>
</div>
<p>
This demo demonstrates a basic notification. Both text and a image
</p>
</div>
</div>
</div>
<script>
// You can also require other files to run in this process
require("./renderer.js");
</script>
</body>
</html>

94
docs/fiddles/native-ui/tray/index.html
View file

@ -1,47 +1,47 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Tray</title>
</head>
<body>
<div>
<h1>Tray</h1>
<h3>
The <code>tray</code> module allows you to create an icon in the
operating system's notification area.
</h3>
<p>This icon can also have a context menu attached.</p>
<p>
Open the
<a href="https://electronjs.org/docs/api/tray">
full API documentation
</a>
in your browser.
</p>
</div>
<div>
<div>
<h2>ProTip</h2>
<strong>Tray support in Linux.</strong>
<p>
On Linux distributions that only have app indicator support, users
will need to install <code>libappindicator1</code> to make the
tray icon work. See the
<a href="https://electronjs.org/docs/api/tray">
full API documentation
</a>
for more details about using Tray on Linux.
</p>
</div>
</div>
</div>
</div>
<script>
// You can also require other files to run in this process
require("./renderer.js");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Tray</title>
</head>
<body>
<div>
<h1>Tray</h1>
<h3>
The <code>tray</code> module allows you to create an icon in the
operating system's notification area.
</h3>
<p>This icon can also have a context menu attached.</p>
<p>
Open the
<a href="https://electronjs.org/docs/api/tray">
full API documentation
</a>
in your browser.
</p>
</div>
<div>
<div>
<h2>ProTip</h2>
<strong>Tray support in Linux.</strong>
<p>
On Linux distributions that only have app indicator support, users
will need to install <code>libappindicator1</code> to make the
tray icon work. See the
<a href="https://electronjs.org/docs/api/tray">
full API documentation
</a>
for more details about using Tray on Linux.
</p>
</div>
</div>
</div>
</div>
<script>
// You can also require other files to run in this process
require("./renderer.js");
</script>
</body>
</html>

154
docs/fiddles/windows/manage-windows/frameless-window/index.html
View file

@ -1,77 +1,77 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Frameless window</title>
</head>
<body>
<div>
<h1>Create and Manage Windows</h1>
<h3>
The <code>BrowserWindow</code> module in Electron allows you to create a
new browser window or manage an existing one.
</h3>
<p>
Each browser window is a separate process, known as the renderer
process. This process, like the main process that controls the life
cycle of the app, has full access to the Node.js APIs.
</p>
<p>
Open the
<a href="https://electronjs.org/docs/api/browser-window">
full API documentation (opens in new window)
</a>
in your browser.
</p>
</div>
<div>
<div>
<h2>Create a frameless window</h2>
<div>
<div>
<button id="frameless-window">View Demo</button>
</div>
<p>
A frameless window is a window that has no
<a href="https://developer.mozilla.org/en-US/docs/Glossary/Chrome">
"chrome"
</a>
, such as toolbars, title bars, status bars, borders, etc. You can
make a browser window frameless by setting <code>frame</code> to
<code>false</code> when creating the window.
</p>
<p>
Windows can have a transparent background, too. By setting the
<code>transparent</code> option to <code>true</code>, you can also
make your frameless window transparent:
</p>
<pre>
<code class="language-js">var win = new BrowserWindow({
transparent: true,
frame: false
})</code></pre>
<p>
For more details, see the
<a href="https://electronjs.org/docs/tutorial/window-customization/">
Window Customization
</a>
documentation.
</p>
</div>
</div>
</div>
<script>
// You can also require other files to run in this process
require("./renderer.js");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Frameless window</title>
</head>
<body>
<div>
<h1>Create and Manage Windows</h1>
<h3>
The <code>BrowserWindow</code> module in Electron allows you to create a
new browser window or manage an existing one.
</h3>
<p>
Each browser window is a separate process, known as the renderer
process. This process, like the main process that controls the life
cycle of the app, has full access to the Node.js APIs.
</p>
<p>
Open the
<a href="https://electronjs.org/docs/api/browser-window">
full API documentation (opens in new window)
</a>
in your browser.
</p>
</div>
<div>
<div>
<h2>Create a frameless window</h2>
<div>
<div>
<button id="frameless-window">View Demo</button>
</div>
<p>
A frameless window is a window that has no
<a href="https://developer.mozilla.org/en-US/docs/Glossary/Chrome">
"chrome"
</a>
, such as toolbars, title bars, status bars, borders, etc. You can
make a browser window frameless by setting <code>frame</code> to
<code>false</code> when creating the window.
</p>
<p>
Windows can have a transparent background, too. By setting the
<code>transparent</code> option to <code>true</code>, you can also
make your frameless window transparent:
</p>
<pre>
<code class="language-js">var win = new BrowserWindow({
transparent: true,
frame: false
})</code></pre>
<p>
For more details, see the
<a href="https://electronjs.org/docs/tutorial/window-customization/">
Window Customization
</a>
documentation.
</p>
</div>
</div>
</div>
<script>
// You can also require other files to run in this process
require("./renderer.js");
</script>
</body>
</html>

128
docs/fiddles/windows/manage-windows/manage-window-state/index.html
View file

@ -1,64 +1,64 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Manage window state</title>
</head>
<body>
<div>
<h1>Create and Manage Windows</h1>
<h3>
The <code>BrowserWindow</code> module in Electron allows you to create a
new browser window or manage an existing one.
</h3>
<p>
Each browser window is a separate process, known as the renderer
process. This process, like the main process that controls the life
cycle of the app, has full access to the Node.js APIs.
</p>
<p>
Open the
<a href="https://electronjs.org/docs/api/browser-window">
full API documentation (opens in new window)
</a>
in your browser.
</p>
</div>
<div>
<div>
<h2>Manage window state</h2>
<div>
<div>
<button id="manage-window">View Demo</button>
<span id="manage-window-reply"></span>
</div>
<p>
In this demo we create a new window and listen for
<code>move</code> and <code>resize</code> events on it. Click the
demo button, change the new window and see the dimensions and
position update here, above.
</p>
<p>
There are a lot of methods for controlling the state of the window
such as the size, location, and focus status as well as events to
listen to for window changes. Visit the
<a href="https://electronjs.org/docs/api/browser-window">
documentation (opens in new window)
</a>
for the full list.
</p>
</div>
</div>
</div>
<script>
// You can also require other files to run in this process
require("./renderer.js");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Manage window state</title>
</head>
<body>
<div>
<h1>Create and Manage Windows</h1>
<h3>
The <code>BrowserWindow</code> module in Electron allows you to create a
new browser window or manage an existing one.
</h3>
<p>
Each browser window is a separate process, known as the renderer
process. This process, like the main process that controls the life
cycle of the app, has full access to the Node.js APIs.
</p>
<p>
Open the
<a href="https://electronjs.org/docs/api/browser-window">
full API documentation (opens in new window)
</a>
in your browser.
</p>
</div>
<div>
<div>
<h2>Manage window state</h2>
<div>
<div>
<button id="manage-window">View Demo</button>
<span id="manage-window-reply"></span>
</div>
<p>
In this demo we create a new window and listen for
<code>move</code> and <code>resize</code> events on it. Click the
demo button, change the new window and see the dimensions and
position update here, above.
</p>
<p>
There are a lot of methods for controlling the state of the window
such as the size, location, and focus status as well as events to
listen to for window changes. Visit the
<a href="https://electronjs.org/docs/api/browser-window">
documentation (opens in new window)
</a>
for the full list.
</p>
</div>
</div>
</div>
<script>
// You can also require other files to run in this process
require("./renderer.js");
</script>
</body>
</html>

116
docs/fiddles/windows/manage-windows/window-events/index.html
View file

@ -1,58 +1,58 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Window events</title>
</head>
<body>
<div>
<h1>Create and Manage Windows</h1>
<h3>
The <code>BrowserWindow</code> module in Electron allows you to create a
new browser window or manage an existing one.
</h3>
<p>
Each browser window is a separate process, known as the renderer
process. This process, like the main process that controls the life
cycle of the app, has full access to the Node.js APIs.
</p>
<p>
Open the
<a href="https://electronjs.org/docs/api/browser-window">
full API documentation (opens in new window)
</a>
in your browser.
</p>
</div>
<div>
<div>
<h2>Window events</h2>
<div>
<div>
<button id="listen-to-window">View Demo</button>
<button id="focus-on-modal-window">
Focus on Demo
</button>
</div>
<p>
In this demo, we create a new window and listen for
<code>blur</code> event on it. Click the demo button to create a new
modal window, and switch focus back to the parent window by clicking
on it. You can click the <i>Focus on Demo</i> button to switch focus
to the modal window again.
</p>
</div>
</div>
</div>
<script>
// You can also require other files to run in this process
require("./renderer.js");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Window events</title>
</head>
<body>
<div>
<h1>Create and Manage Windows</h1>
<h3>
The <code>BrowserWindow</code> module in Electron allows you to create a
new browser window or manage an existing one.
</h3>
<p>
Each browser window is a separate process, known as the renderer
process. This process, like the main process that controls the life
cycle of the app, has full access to the Node.js APIs.
</p>
<p>
Open the
<a href="https://electronjs.org/docs/api/browser-window">
full API documentation (opens in new window)
</a>
in your browser.
</p>
</div>
<div>
<div>
<h2>Window events</h2>
<div>
<div>
<button id="listen-to-window">View Demo</button>
<button id="focus-on-modal-window">
Focus on Demo
</button>
</div>
<p>
In this demo, we create a new window and listen for
<code>blur</code> event on it. Click the demo button to create a new
modal window, and switch focus back to the parent window by clicking
on it. You can click the <i>Focus on Demo</i> button to switch focus
to the modal window again.
</p>
</div>
</div>
</div>
<script>
// You can also require other files to run in this process
require("./renderer.js");
</script>
</body>
</html>

22
spec/fixtures/api/frame-subscriber.html vendored
View file

@ -1,11 +1,11 @@
<html>
<body>
<div style="width: 10px; height: 10px;" id="dirty"></div>
</body>
<script type="text/javascript" charset="utf-8">
setInterval(function(){
document.getElementById('dirty').style.backgroundColor =
'#'+(Math.random()*0xFFFFFF<<0).toString(16)
}, 100)
</script>
</html>
<html>
<body>
<div style="width: 10px; height: 10px;" id="dirty"></div>
</body>
<script type="text/javascript" charset="utf-8">
setInterval(function(){
document.getElementById('dirty').style.backgroundColor =
'#'+(Math.random()*0xFFFFFF<<0).toString(16)
}, 100)
</script>
</html>

22
spec/fixtures/api/offscreen-rendering.html vendored
View file

@ -1,11 +1,11 @@
<html>
<body>
<div style="width: 10px; height: 10px;" id="dirty"></div>
</body>
<script type="text/javascript" charset="utf-8">
setInterval(function(){
document.getElementById('dirty').style.backgroundColor =
'#'+(Math.random()*0xFFFFFF<<0).toString(16)
}, 10)
</script>
</html>
<html>
<body>
<div style="width: 10px; height: 10px;" id="dirty"></div>
</body>
<script type="text/javascript" charset="utf-8">
setInterval(function(){
document.getElementById('dirty').style.backgroundColor =
'#'+(Math.random()*0xFFFFFF<<0).toString(16)
}, 10)
</script>
</html>

18
spec/fixtures/api/service-workers/index.html vendored
View file

@ -1,10 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<body>
<script>
navigator.serviceWorker.register('sw.js', {
scope: location.pathname.split('/').slice(0, 2).join('/') + '/'
})
</script>
</body>
<!DOCTYPE html>
<html lang="en">
<body>
<script>
navigator.serviceWorker.register('sw.js', {
scope: location.pathname.split('/').slice(0, 2).join('/') + '/'
})
</script>
</body>
</html>

18
spec/fixtures/api/service-workers/logs.html vendored
View file

@ -1,10 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<body>
<script>
navigator.serviceWorker.register('sw-logs.js', {
scope: location.pathname.split('/').slice(0, 2).join('/') + '/'
})
</script>
</body>
<!DOCTYPE html>
<html lang="en">
<body>
<script>
navigator.serviceWorker.register('sw-logs.js', {
scope: location.pathname.split('/').slice(0, 2).join('/') + '/'
})
</script>
</body>
</html>