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

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

Browse source 
* 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 <ethan.arrowood@gmail.com>
Co-authored-by: Cheng Zhao <github@zcbenz.com>
This commit is contained in:
Jeremy Foster 2021-06-06 21:02:20 -07:00 committed by GitHub
parent dd98fa3cd3
commit fc10b53f95
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 17 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
docs/fiddles/features/notifications/renderer/index.html
View file

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

5
docs/fiddles/features/notifications/renderer/main.js
View file

@ -3,10 +3,7 @@ const { app, BrowserWindow } = require('electron')
function createWindow () { function createWindow () {
const win = new BrowserWindow({ const win = new BrowserWindow({
width: 800, width: 800,
height: 600, height: 600
webPreferences: {
nodeIntegration: true
}
}) })
win.loadFile('index.html') win.loadFile('index.html')

11
docs/fiddles/features/notifications/renderer/renderer.js
View file

@ -1,7 +1,6 @@
const myNotification = new Notification('Title', { const NOTIFICATION_TITLE = 'Title'
body: 'Notification from the Renderer process' const NOTIFICATION_BODY = 'Notification from the Renderer process. Click to log to console.'
}) const CLICK_MESSAGE = 'Notification clicked!'
myNotification.onclick = () => { new Notification(NOTIFICATION_TITLE, { body: NOTIFICATION_BODY })
console.log('Notification clicked') .onclick = () => document.getElementById("output").innerText = CLICK_MESSAGE
}

20
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 ### 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 [Quick Start Guide](quick-start.md), add the following line to the
`index.html` file before the closing `</body>` tag: `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> <script src="renderer.js"></script>
``` ```
and add the `renderer.js` file: ...and add the `renderer.js` file:
```javascript fiddle='docs/fiddles/features/notifications/renderer' ```javascript fiddle='docs/fiddles/features/notifications/renderer'
const myNotification = new Notification('Title', { const NOTIFICATION_TITLE = 'Title'
body: 'Notification from the Renderer process' const NOTIFICATION_BODY = 'Notification from the Renderer process. Click to log to console.'
}) const CLICK_MESSAGE = 'Notification clicked'
myNotification.onclick = () => { new Notification(NOTIFICATION_TITLE, { body: NOTIFICATION_BODY })
console.log('Notification clicked') .onclick = () => console.log(CLICK_MESSAGE)
}
``` ```
After launching the Electron application, you should see the notification: After launching the Electron application, you should see the notification:
![Notification in the Renderer process](../images/notification-renderer.png) ![Notification in the Renderer process](../images/notification-renderer.png)
If you open the Console and then click the notification, you will see the Additionally, if you click on the notification, the DOM will update to show "Notification clicked!".
message that was generated after triggering the `onclick` event:
![Onclick message for the notification](../images/message-notification-renderer.png)
### Show notifications in the Main process ### Show notifications in the Main process