Webview - Visit initial web address, go back, forward, home (#10)

#7 #5
ukwa · May 7, 2022 · 836d89a · 836d89a
1 parent 5b307bc
commit 836d89a
Show file tree

Hide file tree

Showing 11 changed files with 283 additions and 141 deletions.
diff --git a/README.md b/README.md
@@ -6,6 +6,14 @@ Secured browser for accessing NPLD content in Legal Deposit Library reading room
 
 ### Quickstart
 
+Copy environment variables:
+
+```sh
+cp sample.env .env
+```
+
+Install and run app locally:
+
 ```sh
 yarn && yarn start
 ```
diff --git a/package.json b/package.json
@@ -49,7 +49,10 @@
                 {
                   "html": "./src/index.html",
                   "js": "./src/renderer.ts",
-                  "name": "main_window"
+                  "name": "main_window",
+                  "preload": {
+                    "js": "./src/preload.ts"
+                  }
                 }
               ]
             }
@@ -65,12 +68,13 @@
     "@electron-forge/maker-squirrel": "^6.0.0-beta.63",
     "@electron-forge/maker-zip": "^6.0.0-beta.63",
     "@electron-forge/plugin-webpack": "6.0.0-beta.63",
-    "@shoelace-style/shoelace": "^2.0.0-beta.73",
+    "@shoelace-style/shoelace": "2.0.0-beta.72",
     "@typescript-eslint/eslint-plugin": "^5.0.0",
     "@typescript-eslint/parser": "^5.0.0",
     "@vercel/webpack-asset-relocator-loader": "1.7.0",
     "copy-webpack-plugin": "^10.2.4",
     "css-loader": "^6.0.0",
+    "dotenv": "^16.0.0",
     "electron": "18.2.0",
     "eslint": "^8.0.1",
     "eslint-plugin-import": "^2.25.0",

diff --git a/sample.env b/sample.env
@@ -0,0 +1,2 @@
+NPLD_PLAYER_PREFIX=
+NPLD_PLAYER_INITIAL_WEB_ADDRESS=https://webrecorder.net
diff --git a/src/app-bar.ts b/src/app-bar.ts
diff --git a/src/index.css b/src/index.css
@@ -6,9 +6,4 @@ body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
     Arial, sans-serif;
   margin: 0;
-}
-
-#webview {
-  background: #eee;
-  height: calc(100vh - 47px); /* app height - app bar height */
 }
diff --git a/src/index.html b/src/index.html
@@ -14,9 +14,7 @@
     <title>NPLD Player</title>
   </head>
   <body>
-    <app-bar></app-bar>
-    <main id="webview">
-      <!-- TODO Webview goes here -->
-    </main>
+    <!-- URL is set in preload script -->
+    <npld-player></npld-player>
   </body>
 </html>
diff --git a/src/index.ts b/src/index.ts
@@ -3,8 +3,9 @@ import { app, BrowserWindow } from 'electron';
 // plugin that tells the Electron app where to look for the Webpack-bundled app code (depending on
 // whether you're running in development or production).
 declare const MAIN_WINDOW_WEBPACK_ENTRY: string;
+declare const MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY: string;
 
-// const isDev = !app.isPackaged;
+const isDev = !app.isPackaged;
 
 // Handle creating/removing shortcuts on Windows when installing/uninstalling.
 if (require('electron-squirrel-startup')) {
@@ -15,15 +16,38 @@ if (require('electron-squirrel-startup')) {
 const createWindow = (): void => {
   // Create the browser window.
   const mainWindow = new BrowserWindow({
+    show: false, // show once the renderer process has rendered
     height: 600,
     width: 800,
+    webPreferences: {
+      webviewTag: true, // Enable <webview>
+      preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
+    },
   });
 
   // and load the index.html of the app.
   mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);
 
-  // Open the DevTools.
-  mainWindow.webContents.openDevTools();
+  // Main window events:
+  mainWindow.once('ready-to-show', () => {
+    mainWindow.maximize();
+    mainWindow.show();
+  });
+
+  mainWindow.webContents.on(
+    'will-attach-webview',
+    (evt, webPreferences, params) => {
+      // TODO strip away preload script for security?
+      // See docs on `webviewTag`: https://www.electronjs.org/docs/latest/api/browser-window
+    }
+  );
+
+  if (isDev) {
+    // Open the DevTools.
+    mainWindow.webContents.openDevTools({
+      mode: 'detach',
+    });
+  }
 };
 
 // This method will be called when Electron has finished