From 9cf3811a56dfdc889b939f50e90e644c5d7c12f7 Mon Sep 17 00:00:00 2001 From: Brent Ertz Date: Wed, 5 Nov 2014 07:47:38 -0700 Subject: [PATCH 1/2] Add tutorial on online/offline event detection --- docs/README.md | 1 + docs/tutorial/online-offline-events.md | 80 ++++++++++++++++++++++++++ 2 files changed, 81 insertions(+) create mode 100644 docs/tutorial/online-offline-events.md diff --git a/docs/README.md b/docs/README.md index 9c8cc152612b..d22ef38e7238 100644 --- a/docs/README.md +++ b/docs/README.md @@ -7,6 +7,7 @@ * [Debugging browser process](tutorial/debugging-browser-process.md) * [Using Selenium and WebDriver](tutorial/using-selenium-and-webdriver.md) * [DevTools extension](tutorial/devtools-extension.md) +* [Online/offline event detection](tutorial/online-offline-events.md) ## API references diff --git a/docs/tutorial/online-offline-events.md b/docs/tutorial/online-offline-events.md new file mode 100644 index 000000000000..825296dd4133 --- /dev/null +++ b/docs/tutorial/online-offline-events.md @@ -0,0 +1,80 @@ +# Online/Offline Event Detection + +Online and offline event detection can be implemented in the renderer process +using standard HTML5 APIs, as shown in the following example. + +_main.js_ + +```javascript +var app = require('app'); +var BrowserWindow = require('browser-window'); +var onlineStatusWindow; + +app.on('ready', function() { + onlineStatusWindow = new BrowserWindow({ width: 0, height: 0, show: false }); + onlineStatusWindow.loadUrl('file://' + path.join(__dirname, '/online-status.html')); +}); +``` + +_online-status.html_ + +```html + + + + + +``` + +There may be instances where one wants to respond to these events in the +browser process as well. The browser process however does not have a +"navigator" object and thus cannot detect these events directly. Using +Atom-shell's inter-process communication utilities, the events can be forwarded +to the browser process and handled as needed, as shown in the following example. + +_main.js_ + +```javascript +var app = require('app'); +var ipc = require('ipc'); +var BrowserWindow = require('browser-window'); +var onlineStatusWindow; + +app.on('ready', function() { + onlineStatusWindow = new BrowserWindow({ width: 0, height: 0, show: false }); + onlineStatusWindow.loadUrl('file://' + path.join(__dirname, '/online-status.html')); +}); + +ipc.on('onlineStatusMessage', function(event, status) { + console.log(status); +}); +``` + +_online-status.html_ + +```html + + + + + +``` From 522ae765ea460a86660b82e22caab7561b6bbda7 Mon Sep 17 00:00:00 2001 From: Brent Ertz Date: Wed, 5 Nov 2014 11:21:18 -0700 Subject: [PATCH 2/2] Updates per PR feedback * Use backticks instead of quotes around code object * Remove path.join usage * Dasherize event names --- docs/tutorial/online-offline-events.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/tutorial/online-offline-events.md b/docs/tutorial/online-offline-events.md index 825296dd4133..eab6ce8a0be1 100644 --- a/docs/tutorial/online-offline-events.md +++ b/docs/tutorial/online-offline-events.md @@ -12,7 +12,7 @@ var onlineStatusWindow; app.on('ready', function() { onlineStatusWindow = new BrowserWindow({ width: 0, height: 0, show: false }); - onlineStatusWindow.loadUrl('file://' + path.join(__dirname, '/online-status.html')); + onlineStatusWindow.loadUrl('file://' + __dirname + '/online-status.html'); }); ``` @@ -37,7 +37,7 @@ _online-status.html_ There may be instances where one wants to respond to these events in the browser process as well. The browser process however does not have a -"navigator" object and thus cannot detect these events directly. Using +`navigator` object and thus cannot detect these events directly. Using Atom-shell's inter-process communication utilities, the events can be forwarded to the browser process and handled as needed, as shown in the following example. @@ -51,10 +51,10 @@ var onlineStatusWindow; app.on('ready', function() { onlineStatusWindow = new BrowserWindow({ width: 0, height: 0, show: false }); - onlineStatusWindow.loadUrl('file://' + path.join(__dirname, '/online-status.html')); + onlineStatusWindow.loadUrl('file://' + __dirname + '/online-status.html'); }); -ipc.on('onlineStatusMessage', function(event, status) { +ipc.on('online-status-changed', function(event, status) { console.log(status); }); ``` @@ -67,7 +67,7 @@ _online-status.html_