docs: add app information example (#20487)

* docs: add app information example * Code review changes * Remove demo-control css class, link href change
2019-11-01 20:34:47 +05:30 · 2019-11-01 20:34:47 +05:30 · 06285f0bf1
--- a/docs/fiddles/system/system-app-user-information/.keep
+++ b/docs/fiddles/system/system-app-user-information/.keep
--- a/docs/fiddles/system/system-app-user-information/app-information/index.html
+++ b/docs/fiddles/system/system-app-user-information/app-information/index.html
@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+  </head>
+  <body>
+    <div>
+      <div>
+        <h1>App Information</h1>
+        <div>
+          <div>
+            <button id="app-info">View Demo</button>
+            <span id="got-app-info"></span>
+          </div>
+          <p>The main process <code>app</code> module can be used to get the path at which your app is located on the user's computer.</p>
+          <p>In this example, to get that information from the renderer process, we use the <code>ipc</code> module to send a message to the main process requesting the app's path.</p>
+          <p>See the <a id="electron-docs" href="https://electronjs.org/docs/api/app">app module documentation<span class="u-visible-to-screen-reader">(opens in new window)</span></a> for more.</p>
+        </div>
+      </div>
+    </div>
+    <script>
+      // You can also require other files to run in this process
+      require('./renderer.js')
+    </script>
+  </body>
+</html> 
--- a/docs/fiddles/system/system-app-user-information/app-information/main.js
+++ b/docs/fiddles/system/system-app-user-information/app-information/main.js
@ -0,0 +1,5 @@
+const {app, ipcMain} = require('electron')
+
+ipcMain.on('get-app-path', (event) => {
+  event.sender.send('got-app-path', app.getAppPath())
+})
--- a/docs/fiddles/system/system-app-user-information/app-information/renderer.js
+++ b/docs/fiddles/system/system-app-user-information/app-information/renderer.js
@ -0,0 +1,18 @@
+const {ipcRenderer} = require('electron')
+
+const appInfoBtn = document.getElementById('app-info')
+const electron_doc_link = document.querySelectorAll('a[href]')
+
+appInfoBtn.addEventListener('click', () => {
+  ipcRenderer.send('get-app-path')
+})
+
+ipcRenderer.on('got-app-path', (event, path) => {
+  const message = `This app is located at: ${path}`
+  document.getElementById('got-app-info').innerHTML = message
+})
+
+electron_doc_link.addEventListener('click', (e) => {
+  e.preventDefault()
+  shell.openExternal(url)
+})