聽說某些職業的人,都會被問說曾用技能解決什麼生活問題?讓我想到之前玩的一個東西,起頭又是想當年…
大學電腦課有三寶:開心農場偷菜、開心水族箱撿寶、跑跑卡丁車尬車,結果還不到十年,已經人事物全非了,開心農場在2017結束營業,跑跑卡丁車在 Mac 跟手機上沒得玩,大家都在拼人生 Online。不過我還一直持續在玩 Facebook 的開心水族箱,幾乎每天都會登入日曆簽到,但後來覺得越來越難玩了…
Facebook 上的 Flash 小遊戲會被瀏覽器阻擋開心水族箱雖然也有出 iOS 跟 Android 版手遊,但手遊版的開心水族箱又是另一組遊戲資料、不同的魚,跟我玩的 Facebook 電腦網頁版遊戲是不互通的,有時候在家連電腦都不開了,這就有點麻煩。但麻煩的是手遊版跟 FB 電腦網頁版是獨立的嗎?麻煩的是魚太多很吃 CPU 效能嗎?都不是,最麻煩的是 Flash 被瀏覽器阻擋掉。
開心水族箱 Facebook 版的遊戲操作畫面是用 Flash 技術寫的,Flash 這些年來被趕盡殺絕,Flash 的開發軟體都易名改姓,許多開發者也轉往 Write Once, Debug Everywhere 的 HTML5 相關技術。
2017 年的時候,各大現代瀏覽器都已經有網頁預設不載入 Flash 的作為,造成「漢堡王極簡官網事件」。Google Chrome 版本 69 更新之後,又變本加厲,每一次瀏覽器關閉,再重新開網頁之後,都要再次點選允許執行 Flash,但當時還是可以透過修改瀏覽器 chrome://flags/ 裡面的設定來規避。
到了今年 Google Chrome 版本 71 之後,Flash 追殺令又雪上加霜了,之前的瀏覽器設定已經沒用了,每次打開都會這樣…
每天玩開心水族箱都要重新按一次允許 Flash ,真的是有點惱人,載入遊戲花的時間比玩遊戲還長啊!
但後來聽到一些開發者大大介紹一個程式開發框架叫 Electron,它爸爸是世界上最大的工程師交友網站 GitHub。跟 WebAssembly 這種讓非網頁程式的開發技能做網頁程式的概念有點相反,Electron 是讓網頁開發技能,用於製作桌面系統 (Windows / macOS / Linux) 的應用程式。
什麼是 Electron這軟體名稱的單字是電子的意思,原子/中子/電子…的電子,不是電子商務的電子。
Electron 內含 Node.js 的伺服器環境和一個能獨立執行的 Chromium 網頁瀏覽器,專案編譯 build 後,例如 Windows 就會產生一個 exe 的應用程式,web 程式就可在這個獨立的 Electron 桌面應用程式中運作,Electron 裡面還有一個 BrowserWindow API 可以用來載入遠端 URL ,或程式打包檔內的網頁程式。
現代軟體工程的開發悲劇,細節更多,裝置更多更複雜,製作「跨裝置的軟體工具」也更複雜、更貴,所以就有像 React Native, Electron 這種,讓本來擁有 WEB 踩雷經驗與技能(CSS/JS/HTML/PHP…) 的開發人員,也可以做出在行動裝置執行、桌面作業系統執行的應用程式,連 2017 年後的新版 Windows Skype,也是用 Electron 做的呢!
為何不直接開網頁就好? Electron 能帶來什麼好處?- 可將網頁程式的瀏覽環境單純化,如 web 網頁程式用了太多先進的 CSS display:grid、JS 的 ES6,在 IE11 根本無法正常執行,又有各種原因不方便用 Babel 或 Webpack 處理過,那現在用 Electron 包裝之後,就不須考慮使用者使用前端語法支援度極差的舊瀏覽器,或是安裝各種奇怪擴充套件的瀏覽器,而無法正常操作 web 程式的情況。
- 桌面應用程式有更高的控制權限,不會像網頁一樣委屈,瀏覽器不給的,你不能要,例如門市機台(kiosk)類的使用情境,不想要使用者碰到桌面的系統設定,Electron 可將軟體用 kiosk 單視窗的操作模式來執行。
- 如果包的是遠端 WEB 網頁程式,有些東西可以直接更新 WEB 網頁程式,而不需要整辦公室/各分店的電腦重新下載、佈屬、安裝軟體…
- 找資料時還發現打包檔內的程式不只是能包 html 和 node.js,還可以灌上 Electron.NET 或 ELECTRON-4-PHP ,跑 .Net Core 或 php 程式,不過我都沒用過。
雖然別人的用途都很高大上,但我靈機一動,Flash 的網頁系統/遊戲,應該可以透過上述的概念,打包成 Mac 應用程式,就再也不用擔心網頁瀏覽器把 Flash 阻擋掉了吧?
Electron 小地雷也不少首先可能會遇到,網頁程式引用 jQuery,會報錯 jQuery is not defined 然後網頁大爆炸,解法有兩種:
如果包的網頁是自己的,可以在引用 script 的前後再加一些 code,例如:
<script >if (typeof module === 'object') {window.module = module; module = undefined;}</script >
<script src="/js/bundle.js"></script>
<script >if (window.module) module = window.module;</script >
如果包的網頁是別人的,可以修改呼叫 BrowserWindow 內的參數
webPreferences :{
... 繼續閱讀⇢
nodeIntegration