Home Explore 引导页 在线工具 Blog
Register Sign In
Pchen0
/
electron
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

docs: Update notifications (renderer) docs (#29564)

* 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: Jeremy Foster <[email protected]>
Co-authored-by: Ethan Arrowood <[email protected]>
Co-authored-by: Cheng Zhao <[email protected]>
trop[bot] 3 years ago
parent
07b8b2ffdd
commit
78569e9b91
4 changed files with 17 additions and 27 deletions
Split View Show Diff Stats
  1. 3 5
      docs/fiddles/features/notifications/renderer/index.html
  2. 1 4
      docs/fiddles/features/notifications/renderer/main.js
  3. 5 6
      docs/fiddles/features/notifications/renderer/renderer.js
  4. 8 12
      docs/tutorial/notifications.md

+ 3 - 5
docs/fiddles/features/notifications/renderer/index.html
View File 

@@ -7,11 +7,9 @@
 
 </head>
 
 <body>
 
     <h1>Hello World!</h1>
 
-    <p>
 
-        We are using node <script>document.write(process.versions.node)</script>,
 
-        Chrome <script>document.write(process.versions.chrome)</script>,
 
-        and Electron <script>document.write(process.versions.electron)</script>.
 
-    </p>
 
+    <p>After launching this application, you should see the system notification.</p>
 
+    <p id="output">Click it to see the effect in this interface.</p>
 
+
 
     <script src="renderer.js"></script>
 
 </body>
 
 </html>

+ 1 - 4
docs/fiddles/features/notifications/renderer/main.js
View File 

@@ -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')

+ 5 - 6
docs/fiddles/features/notifications/renderer/renderer.js
View File 

@@ -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

+ 8 - 12
docs/tutorial/notifications.md
View File 

@@ -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 `</body>` tag:
 
 
@@ -26,26 +26,22 @@ Assuming you have a working Electron application from the
 
 <script src="renderer.js"></script>
 
 ```
 
 
-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