From fc10b53f9511dfdc406fbe334328971440de24b6 Mon Sep 17 00:00:00 2001 From: Jeremy Foster Date: Sun, 6 Jun 2021 21:02:20 -0700 Subject: [PATCH] docs: Update notifications (renderer) docs (#29267) * remove version information from html * change format for readability * clarify which console the message should appear in * minor changes to renderer.md * update UI on click instead of developer console * remove node-integration and fix md * update content * chore: remove **** Co-authored-by: Ethan Arrowood Co-authored-by: Cheng Zhao --- .../notifications/renderer/index.html | 8 +++----- .../features/notifications/renderer/main.js | 5 +---- .../notifications/renderer/renderer.js | 11 +++++----- docs/tutorial/notifications.md | 20 ++++++++----------- 4 files changed, 17 insertions(+), 27 deletions(-) diff --git a/docs/fiddles/features/notifications/renderer/index.html b/docs/fiddles/features/notifications/renderer/index.html index 4d6de7642e14..206eadb3a3dd 100644 --- a/docs/fiddles/features/notifications/renderer/index.html +++ b/docs/fiddles/features/notifications/renderer/index.html @@ -7,11 +7,9 @@

Hello World!

-

- We are using node , - Chrome , - and Electron . -

+

After launching this application, you should see the system notification.

+

Click it to see the effect in this interface.

+ diff --git a/docs/fiddles/features/notifications/renderer/main.js b/docs/fiddles/features/notifications/renderer/main.js index 4502be681476..e24a66dd52b8 100644 --- a/docs/fiddles/features/notifications/renderer/main.js +++ b/docs/fiddles/features/notifications/renderer/main.js @@ -3,10 +3,7 @@ const { app, BrowserWindow } = require('electron') function createWindow () { const win = new BrowserWindow({ width: 800, - height: 600, - webPreferences: { - nodeIntegration: true - } + height: 600 }) win.loadFile('index.html') diff --git a/docs/fiddles/features/notifications/renderer/renderer.js b/docs/fiddles/features/notifications/renderer/renderer.js index 7ea004cba152..a6c88f9a7946 100644 --- a/docs/fiddles/features/notifications/renderer/renderer.js +++ b/docs/fiddles/features/notifications/renderer/renderer.js @@ -1,7 +1,6 @@ -const myNotification = new Notification('Title', { - body: 'Notification from the Renderer process' -}) +const NOTIFICATION_TITLE = 'Title' +const NOTIFICATION_BODY = 'Notification from the Renderer process. Click to log to console.' +const CLICK_MESSAGE = 'Notification clicked!' -myNotification.onclick = () => { - console.log('Notification clicked') -} +new Notification(NOTIFICATION_TITLE, { body: NOTIFICATION_BODY }) + .onclick = () => document.getElementById("output").innerText = CLICK_MESSAGE diff --git a/docs/tutorial/notifications.md b/docs/tutorial/notifications.md index 2ba5abb2b7a5..f6f4f28a4862 100644 --- a/docs/tutorial/notifications.md +++ b/docs/tutorial/notifications.md @@ -18,7 +18,7 @@ To show notifications in the Main process, you need to use the ### Show notifications in the Renderer process -Assuming you have a working Electron application from the +Starting with a working application from the [Quick Start Guide](quick-start.md), add the following line to the `index.html` file before the closing `` tag: @@ -26,26 +26,22 @@ Assuming you have a working Electron application from the ``` -and add the `renderer.js` file: +...and add the `renderer.js` file: ```javascript fiddle='docs/fiddles/features/notifications/renderer' -const myNotification = new Notification('Title', { - body: 'Notification from the Renderer process' -}) +const NOTIFICATION_TITLE = 'Title' +const NOTIFICATION_BODY = 'Notification from the Renderer process. Click to log to console.' +const CLICK_MESSAGE = 'Notification clicked' -myNotification.onclick = () => { - console.log('Notification clicked') -} +new Notification(NOTIFICATION_TITLE, { body: NOTIFICATION_BODY }) + .onclick = () => console.log(CLICK_MESSAGE) ``` After launching the Electron application, you should see the notification: ![Notification in the Renderer process](../images/notification-renderer.png) -If you open the Console and then click the notification, you will see the -message that was generated after triggering the `onclick` event: - -![Onclick message for the notification](../images/message-notification-renderer.png) +Additionally, if you click on the notification, the DOM will update to show "Notification clicked!". ### Show notifications in the Main process