原文：https://github.com/electron/electron/blob/master/docs/tutorial/desktop-environment-integration.md
譯者：Lin
不同的操作系統(tǒng)為集成桌面應用程序到它們的桌面環(huán)境提供了不同的特性。例如，Windows系統(tǒng)中，應用程序可以在任務欄的跳轉(zhuǎn)列表中放置它們的快捷方式，Mac系統(tǒng)中，應用程序可以在dock菜單中放置一個自定義的菜單。
本篇指南將講解如何使用Electron接口集成你的應用程序到這些桌面環(huán)境中。
通知（Windows, Linux, macOS）
三個操作系統(tǒng)都給提供了應用程序發(fā)送給用戶通知的方法。Electron是非常方便的允許開發(fā)者使用HTML5的Notification接口發(fā)送通知，然后使用當前操作系統(tǒng)的原生通知接口展示通知。
注意：因為這是一個HTML5接口，所以他只在渲染進程中有效。
let myNotification = new Notification('Title', {
body: 'Lorem Ipsum Dolor Sit Amet'
})
myNotification.onclick = () => {
console.log('Notification clicked')
}
雖然代碼和跨操作系統(tǒng)的用戶體驗是相同，但是它們有著細微的差別。
Windows
- Windows 10操作系統(tǒng)中，notifications “just work”。
- Windows 8.1和Windows 8操作系統(tǒng)中，你的應用程序的一個包含一個Application User Model ID的快捷方式必須安裝到開始屏幕上。注意，它不一定要被固定在開始屏幕上。
- Windows 7操作系統(tǒng)中，通知是不被支持的。然而你可以使用Tray API發(fā)送“balloon notifications”。
此外，通知主體的最大長度是250個字符，Windows團隊建議通知應該保持在200個字符以內(nèi)。
Linux
通知使用libnotify發(fā)送，它可以將通知顯示在任何一個桌面環(huán)境中，遵循Desktop Notifications Specification，包括了Cinnamon、Enlightenment、Unity、GNOME、KDE。
macOS
通知在macOS中是直截了當?shù)模欢阈枰私?a target="_blank" rel="nofollow">Apple’s Human Interface guidelines regarding notifications。
請注意，通知長度僅限于256字節(jié)大小——如果你超過了這個限制它將會被截斷。
最近的文件
Windows和macOS提供簡單方便訪問最近打開的文件的列表，應用分別通過跳轉(zhuǎn)列表和dock菜單進入。
添加一個文件到最近文件列表，你可以使用app.addRecentDocument接口：
const {app} = require('electron')
app.addRecentDocument('/Users/USERNAME/Desktop/work.type')
你可以使用app.clearRecentDocuments接口清空最近文件列表：
const {app} = require('electron')
app.clearRecentDocuments()
Windows中的注意事項
為了能夠在Windows使用使用這個特性，你的應用程序需要被注冊為一個處理文件的程序，否則即使你添加文件，文件也不會被展示在跳轉(zhuǎn)列表中。你可以在Application Registration中找到任何關于注冊你的應用程序的信息。
當一個用戶從跳轉(zhuǎn)列表中點擊一個文件，一個你的應用程序的新的實例將會被啟動，這個文件路徑將作為一個命令行參數(shù)添加到你的應用程序中。
MacOS注意事項
當一個文件從最近文件列表中請求，app中的open-file事件接口將會被激活。
自定義Dock菜單（MacOS）
MacOS 允許開發(fā)人員在dock上指定一個包含了一些你的應用程序常用的功能的自定義菜單：
你可以使用app.dock.setMenu接口設置你的自定義dock菜單，這只能在MacOS上顯示：
const {app, Menu} = require('electron')
const dockMenu = Menu.buildFromTemplate([
{label: 'New Window', click () { console.log('New Window') }},
{label: 'New Window with Settings',
submenu: [
{label: 'Basic'},
{label: 'Pro'}
]
},
{label: 'New Command...'}
])
app.dock.setMenu(dockMenu)
用戶任務（Windows）
Windows中你可以在跳轉(zhuǎn)列表的Tasks部分中指定自定義事件，引用MSDN：
Applications define tasks based on both the program’s features and the key things a user is expected to do with them. Tasks should be context-free, in that the application does not need to be running for them to work. They should also be the statistically most common actions that a normal user would perform in an application, such as compose an email message or open the calendar in a mail program, create a new document in a word processor, launch an application in a certain mode, or launch one of its subcommands. An application should not clutter the menu with advanced features that standard users won’t need or one-time actions such as registration. Do not use tasks for promotional items such as upgrades or special offers.
It is strongly recommended that the task list be static. It should remain the same regardless of the state or status of the application. While it is possible to vary the list dynamically, you should consider that this could confuse the user who does not expect that portion of the destination list to change.
不像在macOS下dock菜單是一個真正的菜單，Windows中用戶任務更像一個應用程序快捷方式，當用戶點擊一個任務，一個程序?qū)⒔邮盏街付ǖ膮?shù)來執(zhí)行。
你可以使用app.setUserTasks接口來為你的應用程序設置用戶任務：
const {app} = require('electron')
app.setUserTasks([
{
program: process.execPath,
arguments: '--new-window',
iconPath: process.execPath,
iconIndex: 0,
title: 'New Window',
description: 'Create a new window'
}
])
清理你的任務列表只需要調(diào)用app.setUserTasks賦值一個空的數(shù)組就可以：
const {app} = require('electron')
app.setUserTasks([])
即使你的應用程序關閉了，用戶任務也仍然會顯示，所以任務中的圖標和程序路徑在你的應用程序被寫在之前一直存在。
縮略圖工具欄（Windows）
Windows中你可以在應用窗口的任務欄布局中添加一個帶有指定按鈕的縮略圖工具欄。它提供給用戶在不用還原或激活窗口的情況下，一個進入一個詳細的窗口命令的方法。
MSDN中是這樣說明的：
This toolbar is simply the familiar standard toolbar common control. It has a maximum of seven buttons. Each button’s ID, image, tooltip, and state are defined in a structure, which is then passed to the taskbar. The application can show, enable, disable, or hide buttons from the thumbnail toolbar as required by its current state.
For example, Windows Media Player might offer standard media transport controls such as play, pause, mute, and stop.
你可以使用BrowserWindow.setThumbarButtons在你的應用程序中設置縮略圖工具欄：
const {BrowserWindow} = require('electron')
const path = require('path')
let win = new BrowserWindow({
width: 800,
height: 600
})
win.setThumbarButtons([
{
tooltip: 'button1',
icon: path.join(__dirname, 'button1.png'),
click () { console.log('button1 clicked') }
},
{
tooltip: 'button2',
icon: path.join(__dirname, 'button2.png'),
flags: ['enabled', 'dismissonclick'],
click () { console.log('button2 clicked.') }
}
])
清空縮略圖工具欄只需要調(diào)用BrowserWindow.setThumbarButtons接口并傳入一個空的數(shù)組：
const {BrowserWindow} = require('electron')
let win = new BrowserWindow()
win.setThumbarButtons([])
Unity Launcher Shortcuts (Linux)
Unity中，你可以通過修改.desktop文件添加自定義entries到它自己的啟動器中，詳情請見Adding Shortcuts to a Launcher。
任務欄中的進度條
Windows中一個任務欄上的按鈕可以被用來展示一個進度條。這使得一個窗口可以提供進度信息給用戶，而無需用戶切換到窗口本身。
MacOS中將會被展示為dock圖標的一部分。
Unity DE也同樣有一個類似允許你在啟動器中設置進度條的功能。
你可以使用BrowserWindow.setProgressBar接口來給一個窗口設置進度條：
const {BrowserWindow} = require('electron')
let win = new BrowserWindow()
win.setProgressBar(0.5)
任務欄的圖標覆蓋（Windows）
Windows中一個任務欄上的按鈕可以用一個小的重疊狀態(tài)來展示應用狀態(tài)，MSDN中是這樣說明的：
Icon overlays serve as a contextual notification of status, and are intended to negate the need for a separate notification area status icon to communicate that information to the user. For instance, the new mail status in Microsoft Outlook, currently shown in the notification area, can now be indicated through an overlay on the taskbar button. Again, you must decide during your development cycle which method is best for your application. Overlay icons are intended to supply important, long-standing status or notifications such as network status, messenger status, or new mail. The user should not be presented with constantly changing overlays or animations.
你可以使用BrowserWindow.setOverlayIcon接口來為一個窗口設置重疊圖標：
const {BrowserWindow} = require('electron')
let win = new BrowserWindow()
win.setOverlayIcon('path/to/overlay.png', 'Description for overlay')
閃爍框架（Windows）
Windows中你可以高亮任務欄按鈕來獲得用戶的關注。這類似于在macOS中dock上圖標的彈跳。MSDN的文檔參考：
Typically, a window is flashed to inform the user that the window requires attention but that it does not currently have the keyboard focus.
你可以使用BrowserWindow.flashFrame接口來設置任務欄按鈕的閃爍狀態(tài)：
const {BrowserWindow} = require('electron')
let win = new BrowserWindow()
win.once('focus', () => win.flashFrame(false))
win.flashFrame(true)
不要忘記調(diào)用flashFrame方法設置為false來關閉閃爍。上面的示例中，當窗口獲得焦點時它會被調(diào)用，但是你可能會使用一個延時時間或其他事件來禁用它。
窗口的路徑文件 (macOS)
MacOS中一個窗口可以設置它的路徑文件，并且文件的圖片可以展示在標題欄，當用戶按Command鍵或者Control鍵時，一個快捷功能表將會展示在標題上。
你也可以設置窗口的編輯狀態(tài)以便文件圖標可以指示窗口中的文檔是否被修改。
你可以使用BrowserWindow.setRepresentedFilename和BrowserWindow.setDocumentEdited接口來設置窗口路徑文件：
const {BrowserWindow} = require('electron')
let win = new BrowserWindow()
win.setRepresentedFilename('/etc/passwd')
win.setDocumentEdited(true)
將文件拖拽出窗口
對于某些需要操作文件類型的應用，有很重要的功能室允許拖拽文件從Electron到其他應用。在你的應用中實現(xiàn)這個功能你需要在ondragstart事件中調(diào)用webContents.startDrag(item)接口。
網(wǎng)頁中：
<a href="#" id="drag">item</a>
<script type="text/javascript" charset="utf-8">
document.getElementById('drag').ondragstart = (event) => {
event.preventDefault()
ipcRenderer.send('ondragstart', '/path/to/item')
}
</script>
主進程中：
const {ipcMain} = require('electron')
ipcMain.on('ondragstart', (event, filePath) => {
event.sender.startDrag({
file: filePath,
icon: '/path/to/icon.png'
})
})