Electron Web App

說明

使用 Electron 製作一個跨平台的 Web 桌面應用軟體。

步驟開始

建立專案資料夾 - CloudCoinWebApp

mkdir CloudCoinWebApp

下載檔案：https://github.com/pulipulichen/elec...webapp-wrapper

git clone https://github.com/pulipulichen/electron-webapp-wrapper
cp -r electron-webapp-wrapper/src/* CloudCoinWebApp 

TIP:

這裡有三個重要檔案與目錄

index.js
package.json
node_modules/

安裝 Electron 環境與需要的模組
注意：這些安裝只可用於目前的專案目錄，其他的專案目錄，必須也做一次相同安裝。

cd CloudCoinWebApp/
npm install 

編輯 index.js：

...
    //var url = config.URL;
    var url = "https://www.cloudcoin.co/bank.html";
... 

TIPs:

url 是 Web App 要存取的網頁位址

編輯 package.json：

{
  "name": "CloudConinWebApp",
  "version": "0.0.1",
  "description": "CloudCoin Safe Web App",
  "main": "index.js",
  "scripts": {
    "start": "electron .",
    "package": "electron-packager . CloudConinWebApp --ignore=node_modules/electron-* --arch=x64"
  "dependencies": {
    "electron-debug": "^1.1.0",
    "electron-google-oauth": "^2.0.0",
    "file-exists": "^2.0.0",
    "os-tmpdir": "^1.0.2"
  },
  "devDependencies": {
    "devtron": "^1.4.0",
    "electron-packager": "^8.7.2",
    "electron-prebuilt": "^1.4.13"
  }
}

TIPs

build 如果要編譯成 Windows 平台，改成 --platform=win32，CloudCoinWebApp 是自訂的程式名稱

開始編譯執行檔

npm run package

TIP

如果編譯成功，會在現有目錄產生一個 CloudCoinWebApp-linux-x64 目錄，這就是主程式目錄。

目錄內會有一個同名的執行檔（CloudCoinWebApp）。

執行主程式

由於這程式被設計成，執行時必須使用一個 JSON 格式的設定檔，內容的用途：

• URL：APP 要開啟網站的網址
• width, height：APP 視窗的大小
• icon：要顯示 APP 應用軟體在工作列上的圖示
   

新增程式設定檔：

cd CloudCoinWebApp-linux-x64/
vi config.json 

config.json：

{
    "URL": "http://your-web-server/",
    "width": 650, 
    "height": 900, 
    "skipTaskbar": false, 
    "frame": true,
    "kiosk": false,
    "title": "CloudCoin Safe Web App",
    "icon": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABmJLR...",
    "webPreferences": {
        "devTools": true,
        "webSecurity": false,
        "allowDisplayingInsecureContent": true,
        "allowRunningInsecureContent": true,
        "nodeIntegration": false 
    },
    "openDevTools": false
} 

執行軟體

cd CloudCoinWebApp-linux-64
./CloudCoinWebApp config.json 

變更軟體的 ICON 圖示

1. 準備一個合適的 ICON 圖示，筆者使用格式 *.png，大小 48x48。
2. 對圖檔做 base64 編碼（編碼方法有兩種）
   • 網站線上編碼：https://www.base64-image.de
   • Linux 指令：base64 your-icon.png
3. 將編碼後的字串複製貼上到 config.json
    

內容格式如下：

"icon": "data:image/png;base64,ThisBase64CodesForYourICON"

更多軟體的其他設定

以下參數可以用在 config.json

width、height (Integer)：設定高度與寬度
useContentSize (Boolean)：根據內容的尺寸而調整視窗大小，很實用
center (Boolean)：是否置中
alwaysOnTop (Boolean)：是否永遠置頂
skipTaskbar (Boolean)：是否不出現在工作列。這個項目被設為true，那就只能從通知列(Tray)來關閉視窗了。
frame (Boolean)：是否無外框。無外框起來非常像現代的APP，很潮，但不一定好用。
kiosk (Boolean)：全螢幕單視窗模式。想要限制使用者只能用這個視窗時可以使用，非常好用。
transparent (Boolean)：背景是否透明，這樣可以跟其他視窗一起使用。

F.A.Q

cd CloudCoinWebApp/
npm install

npm -v
5.3.0

sudo npm install -g npm@5.2.0

"linux": {
           "category": "Utility",
           "maintainer": "A-Lang <alang.hsu@gmail.com>",
           "target": "AppImage"
         }

參考連結

• Electron App 開發範例
  • Awesome Electron
• 試做Electron桌面應用程式：webapp-wrapper / Try Electron: webapp-wrapper
• https://github.com/pulipulichen/elec...webapp-wrapper
• Electron 快速入門
• Package & Build
  • Electron packager tutorial
  • Electron + AngularJS - Packing and distribution
  • 專案範例：https://github.com/mifi/lossless-cut
• 另一個解決方案：將 Web 快速變身成 Desktop Applicaiton
  • https://github.com/jiahaog/nativefier
  • https://davidwalsh.name/convert-websites-apps
• 4 must-know tips for building cross platform Electron apps