From 9cf3811a56dfdc889b939f50e90e644c5d7c12f7 Mon Sep 17 00:00:00 2001 From: Brent Ertz Date: Wed, 5 Nov 2014 07:47:38 -0700 Subject: [PATCH] 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 + + + + + +```