原文：https://github.com/electron/electron/blob/master/docs/tutorial/desktop-environment-integration.md
譯者：Lin
不同的操作系統(tǒng)為集成桌面應(yīng)用程序到它們的桌面環(huán)境提供了不同的特性。例如冀膝，Windows系統(tǒng)中窝剖，應(yīng)用程序可以在任務(wù)欄的跳轉(zhuǎn)列表中放置它們的快捷方式，Mac系統(tǒng)中熬北，應(yīng)用程序可以在dock菜單中放置一個(gè)自定義的菜單疙描。
本篇指南將講解如何使用Electron接口集成你的應(yīng)用程序到這些桌面環(huán)境中。
通知（Windows, Linux, macOS）
三個(gè)操作系統(tǒng)都給提供了應(yīng)用程序發(fā)送給用戶通知的方法讶隐。Electron是非常方便的允許開發(fā)者使用HTML5的Notification接口發(fā)送通知起胰，然后使用當(dāng)前操作系統(tǒng)的原生通知接口展示通知。
注意：因?yàn)檫@是一個(gè)HTML5接口巫延，所以他只在渲染進(jìn)程中有效效五。
let myNotification = new Notification('Title', {
body: 'Lorem Ipsum Dolor Sit Amet'
})
myNotification.onclick = () => {
console.log('Notification clicked')
}
雖然代碼和跨操作系統(tǒng)的用戶體驗(yàn)是相同，但是它們有著細(xì)微的差別炉峰。
Windows
- Windows 10操作系統(tǒng)中戒劫，notifications “just work”。
- Windows 8.1和Windows 8操作系統(tǒng)中，你的應(yīng)用程序的一個(gè)包含一個(gè)Application User Model ID的快捷方式必須安裝到開始屏幕上枚尼。注意蜻直，它不一定要被固定在開始屏幕上。
- Windows 7操作系統(tǒng)中王悍，通知是不被支持的源譬。然而你可以使用Tray API發(fā)送“balloon notifications”。
此外，通知主體的最大長(zhǎng)度是250個(gè)字符，Windows團(tuán)隊(duì)建議通知應(yīng)該保持在200個(gè)字符以內(nèi)霞溪。
Linux
通知使用libnotify發(fā)送，它可以將通知顯示在任何一個(gè)桌面環(huán)境中，遵循Desktop Notifications Specification，包括了Cinnamon孤页、Enlightenment悲龟、Unity皿渗、GNOME、KDE。
macOS
通知在macOS中是直截了當(dāng)?shù)模欢阈枰私?a target="_blank" rel="nofollow">Apple’s Human Interface guidelines regarding notifications。
請(qǐng)注意懦尝，通知長(zhǎng)度僅限于256字節(jié)大小——如果你超過了這個(gè)限制它將會(huì)被截?cái)唷?/p>
最近的文件
Windows和macOS提供簡(jiǎn)單方便訪問最近打開的文件的列表踊挠，應(yīng)用分別通過跳轉(zhuǎn)列表和dock菜單進(jìn)入扁凛。
添加一個(gè)文件到最近文件列表则披，你可以使用app.addRecentDocument接口：
const {app} = require('electron')
app.addRecentDocument('/Users/USERNAME/Desktop/work.type')
你可以使用app.clearRecentDocuments接口清空最近文件列表：
const {app} = require('electron')
app.clearRecentDocuments()
Windows中的注意事項(xiàng)
為了能夠在Windows使用使用這個(gè)特性阱洪，你的應(yīng)用程序需要被注冊(cè)為一個(gè)處理文件的程序蚌本，否則即使你添加文件轴猎，文件也不會(huì)被展示在跳轉(zhuǎn)列表中。你可以在Application Registration中找到任何關(guān)于注冊(cè)你的應(yīng)用程序的信息。
當(dāng)一個(gè)用戶從跳轉(zhuǎn)列表中點(diǎn)擊一個(gè)文件，一個(gè)你的應(yīng)用程序的新的實(shí)例將會(huì)被啟動(dòng)，這個(gè)文件路徑將作為一個(gè)命令行參數(shù)添加到你的應(yīng)用程序中蛮位。
MacOS注意事項(xiàng)
當(dāng)一個(gè)文件從最近文件列表中請(qǐng)求控轿，app中的open-file事件接口將會(huì)被激活片部。
自定義Dock菜單（MacOS）
MacOS 允許開發(fā)人員在dock上指定一個(gè)包含了一些你的應(yīng)用程序常用的功能的自定義菜單：
你可以使用app.dock.setMenu接口設(shè)置你的自定義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)
用戶任務(wù)（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菜單是一個(gè)真正的菜單，Windows中用戶任務(wù)更像一個(gè)應(yīng)用程序快捷方式仆百，當(dāng)用戶點(diǎn)擊一個(gè)任務(wù)建丧，一個(gè)程序?qū)⒔邮盏街付ǖ膮?shù)來執(zhí)行。
你可以使用app.setUserTasks接口來為你的應(yīng)用程序設(shè)置用戶任務(wù)：
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'
}
])
清理你的任務(wù)列表只需要調(diào)用app.setUserTasks賦值一個(gè)空的數(shù)組就可以：
const {app} = require('electron')
app.setUserTasks([])
即使你的應(yīng)用程序關(guān)閉了叁熔，用戶任務(wù)也仍然會(huì)顯示革砸，所以任務(wù)中的圖標(biāo)和程序路徑在你的應(yīng)用程序被寫在之前一直存在。
縮略圖工具欄（Windows）
Windows中你可以在應(yīng)用窗口的任務(wù)欄布局中添加一個(gè)帶有指定按鈕的縮略圖工具欄阎肝。它提供給用戶在不用還原或激活窗口的情況下眼刃，一個(gè)進(jìn)入一個(gè)詳細(xì)的窗口命令的方法。
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在你的應(yīng)用程序中設(shè)置縮略圖工具欄：
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接口并傳入一個(gè)空的數(shù)組：
const {BrowserWindow} = require('electron')
let win = new BrowserWindow()
win.setThumbarButtons([])
Unity Launcher Shortcuts (Linux)
Unity中钳垮，你可以通過修改.desktop文件添加自定義entries到它自己的啟動(dòng)器中，詳情請(qǐng)見Adding Shortcuts to a Launcher你稚。
任務(wù)欄中的進(jìn)度條
Windows中一個(gè)任務(wù)欄上的按鈕可以被用來展示一個(gè)進(jìn)度條涯肩。這使得一個(gè)窗口可以提供進(jìn)度信息給用戶，而無需用戶切換到窗口本身瞒斩。
MacOS中將會(huì)被展示為dock圖標(biāo)的一部分抛丽。
Unity DE也同樣有一個(gè)類似允許你在啟動(dòng)器中設(shè)置進(jìn)度條的功能。
你可以使用BrowserWindow.setProgressBar接口來給一個(gè)窗口設(shè)置進(jìn)度條：
const {BrowserWindow} = require('electron')
let win = new BrowserWindow()
win.setProgressBar(0.5)
任務(wù)欄的圖標(biāo)覆蓋（Windows）
Windows中一個(gè)任務(wù)欄上的按鈕可以用一個(gè)小的重疊狀態(tài)來展示應(yīng)用狀態(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接口來為一個(gè)窗口設(shè)置重疊圖標(biāo)：
const {BrowserWindow} = require('electron')
let win = new BrowserWindow()
win.setOverlayIcon('path/to/overlay.png', 'Description for overlay')
閃爍框架（Windows）
Windows中你可以高亮任務(wù)欄按鈕來獲得用戶的關(guān)注驼鹅。這類似于在macOS中dock上圖標(biāo)的彈跳。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接口來設(shè)置任務(wù)欄按鈕的閃爍狀態(tài)：
const {BrowserWindow} = require('electron')
let win = new BrowserWindow()
win.once('focus', () => win.flashFrame(false))
win.flashFrame(true)
不要忘記調(diào)用flashFrame方法設(shè)置為false來關(guān)閉閃爍。上面的示例中双谆，當(dāng)窗口獲得焦點(diǎn)時(shí)它會(huì)被調(diào)用，但是你可能會(huì)使用一個(gè)延時(shí)時(shí)間或其他事件來禁用它果善。
窗口的路徑文件 (macOS)
MacOS中一個(gè)窗口可以設(shè)置它的路徑文件，并且文件的圖片可以展示在標(biāo)題欄句喜，當(dāng)用戶按Command鍵或者Control鍵時(shí)，一個(gè)快捷功能表將會(huì)展示在標(biāo)題上。
你也可以設(shè)置窗口的編輯狀態(tài)以便文件圖標(biāo)可以指示窗口中的文檔是否被修改隅居。
你可以使用BrowserWindow.setRepresentedFilename和BrowserWindow.setDocumentEdited接口來設(shè)置窗口路徑文件：
const {BrowserWindow} = require('electron')
let win = new BrowserWindow()
win.setRepresentedFilename('/etc/passwd')
win.setDocumentEdited(true)
將文件拖拽出窗口
對(duì)于某些需要操作文件類型的應(yīng)用申钩，有很重要的功能室允許拖拽文件從Electron到其他應(yīng)用廉涕。在你的應(yīng)用中實(shí)現(xiàn)這個(gè)功能你需要在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>
主進(jìn)程中：
const {ipcMain} = require('electron')
ipcMain.on('ondragstart', (event, filePath) => {
event.sender.startDrag({
file: filePath,
icon: '/path/to/icon.png'
})
})