試做Electron桌面應用程式：webapp-wrapper / Try Electron: webapp-wrapper

11月 27, 2016 作品 , Programming/Electron , Programming/JavaScript , Software/Windows 6 Comments Edit Copy Download

繼前一篇在講怎麼使用Chrome命令列選項app來製作網頁應用程式之後，我還是覺得app模式有很多限制。後來索性摸摸看最近很流行的跨平臺桌面作業系統應用程式的開發框架Electron，然後作出一個用Electron開啟網頁的應用程式：webapp-wrapper。

webapp-wrapper

• 原始碼：https://github.com/pulipulichen/electron-webapp-wrapper

首頁的README.md中已經記錄一些編譯的提示，但並不完整。在編譯之前還有一些npm套件需要安裝，但是這些步驟有點複雜，我也不是記得很清楚自己是怎麼操作的。

此程式主要是參考自QQBoxy-酷酷方盒子的「ⓒ使用Electron開發JavaScript的Windows桌面應用程式」，他的範例程式是個非常好的起點。相較之下，Electron的快速入門真的一點也不快速orz

使用教學 / Instruction

不管上面的原始碼怎麼編譯的話，也可以直接下載下面的編譯結果：

• 編譯結果下載webapp-wrapper-win32-x64.zip (48MB)：https://drive.google.com/file/d/0B5UXWzdIPpm0SWEzcDFFZFdpSXM/view?usp=sharing&resourcekey=0-nNjCgooUuQwlQgztUYuCpg

webapp-wrapper是免安裝的可攜軟體。請將下載後的webapp-wrapper-win32-x64.zip解壓縮，這樣就安裝完成了。

執行 / Startup

點選startup-webapp.bat即可執行網頁應用程式程式。

看起來跟Chrome的app模式還蠻像的，不是嗎？

設定 / Configuration

網頁應用程式的設定檔在webapp-config.json當中。這邊可以設定URL網址以及其他BrowserWindow的設定參數，其中特別的是ICON需要以PNG格式進行Base64編碼，請使用BASE64 IMAGE來轉換。詳細設定方式請參考我在README.md的說明。

webapp-config.json必須嚴格遵守JSON的格式，最常見的錯誤就是key前後沒有加雙引號。請搭配http://jsonlint.com/ 驗證JSON格式是否正確。

重要的BrowserWindow設定 / Notable BrowserWindow Options

在BrowserWindow說明中介紹了所有參數，其中我挑出幾個未來可能會用到的參數跟大家分享：

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

結語 / Conclusion

其實我一直有個願望：希望Windows能夠像Android一樣，能在桌面就擺放小工具(Widget)，而這個小工具能夠直接呈現Inbox、Google日曆等網頁，讓我能夠很方便地使用他們。

如果利用webapp-wrapper，將參數skipTasker設成false的話，那一定程度上是可以當做是widget。不過一個好的widget還要跟桌面其他項目排列，而且我常常在不同尺寸的螢幕之間切換，桌面的項目時常亂跑。這樣子想想，在Windows裡面要做一個widget還真不容易，索性就放棄了。

相較於昨天在寫的AutoIt程式，Node.js這種以JavaScript為主的程式碼讓我寫起來非常得心應手。儘管如此，Electron的APP在運作時分成主程式(index.js)跟主網頁，後者是一般Electron APP下設置的index.html，大部分教學都是寫在後者，而不是前者的index.js。但在webapp-wrapper應用程式中，我刻意省略了index.html，只有主程式index.js。因此很多教學對我來說並不適合，讓我花了不少時間理解它們的差異。

這篇寫著寫著，本來應該是做到能夠呈現一個視窗裡面有著「Hello」就該收手了，結果一不小心就開始試著用iframe載入網頁、改在BrowserWindow裡面載入網頁、使用捷徑與JSON檔案搭配來動態產生不同程式(是的，一個webapp-wrapper可以用不同的設定檔開啟不同的網頁應用程式，構想上就跟之前的Chrome創建捷徑是類似的方式)、解決Electron與jQuery相衝問題 (現在Wunderlist也能正常顯示了)、加入快速鍵設定、甚至想為koisk模式加上更多限制……但是真的不行，該適可而止了，都要12點了。

總而言之，有了Electron與這個webapp-wrapper的跨桌面作業系統平臺的應用程式(For Windows, Mac, Linux)，搭配上之前使用PhoneGap的跨行動作業系統的應用程式 (可參考最小需求的打包範本pulipuli-blog-app) (For Android, iOS, Windows Phone)，這樣子就能真的把「同樣的網頁」做成跨所有平臺的應用程式了。

想想這還是挺令人興奮的呢，不是嗎？