WIP: Hybrid App using Capacitor (for Electron/iOS)

ci/build-electron

@@ -0,0 +1,17 @@
+#!/usr/bin/env bash
+set -e
+set -o pipefail
+
+sbt webApp/fullOptJS::webpack
+
+# clear old electron integration
+rm -rf webApp/target/scala-2.12/scalajs-bundler/main/electron
+
+# switch to the webpack root folder:
+cd webApp/target/scala-2.12/scalajs-bundler/main
+
+# https://capacitor.ionicframework.com/docs/electron
+npx cap add electron
+npx cap copy
+
+electron electron/

production.nix

@@ -14,6 +14,7 @@ in
       nodejs-11_x yarn
       # phantomjs
       # gnumake gcc # required for some weird npm things
+      electron
     ];
 
     installPhase= ''

project/Deps.scala

@@ -169,6 +169,8 @@ object Deps {
         "workbox-webpack-plugin" -> "4.3.1" ::
         "optimize-css-assets-webpack-plugin" -> "5.0.1" ::
         "cssnano" -> "4.1.10" ::
+        "@capacitor/core" -> "1.0.0" ::
+        "@capacitor/cli" -> "1.0.0" ::
         Nil
   }
 

webApp/src/html/index.template.html

@@ -37,6 +37,9 @@
         };
     </script>
 
+    <!-- Make jquery work in electron: Insert this line above script imports (https://stackoverflow.com/questions/32621988/electron-jquery-is-not-defined/37480521#37480521)  -->
+    <script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
+
     <noscript>
         <div id="noscriptmsg">
             <p>Welcome to Woost!</p>
@@ -65,4 +68,6 @@
     <script>window.noltQueue=window.noltQueue||[];function nolt(){noltQueue.push(arguments)}</script>
     <% } %>
   </body>
+  <!-- Make jquery work in electron: Insert this line after script imports (https://stackoverflow.com/questions/32621988/electron-jquery-is-not-defined/37480521#37480521) -->
+  <script>if (window.module) module = window.module;</script>
 </html>

webApp/src/main/scala/wust/webApp/Client.scala

@@ -23,12 +23,13 @@ object Client {
   import window.location
   // in firefox or chrome: location.port is always set
   // in edge: location.port might be empty if not specified.
-  private val hostname = location.hostname
+  private val hostname = if(location.hostname.isEmpty) "app.woost.space" else location.hostname // Electron: location.hostname == ""
   private val port = if (location.port.isEmpty) "" else ":" + location.port
   private val protocol = location.protocol
 
   private val wustUrl = {
-    val socketProtocol = if (location.protocol == "https:") "wss:" else "ws:"
+    // Electron: location.protocol == "file:"
+    val socketProtocol = if (location.protocol == "https:" || location.protocol == "file:") "wss:" else "ws:"
 
     if (LinkingInfo.developmentMode)
       s"$socketProtocol//${hostname}$port/ws" // allows to access the devserver without subdomain

webApp/webpack/capacitor.config.json

@@ -0,0 +1,7 @@
+{
+  "appId": "space.woost",
+  "appName": "Woost",
+  "bundledWebRuntime": false,
+  "npmClient": "yarn",
+  "webDir": "dist"
+}