it:將網頁製成桌面_app

差異處

這裏顯示兩個版本的差異處。

連向這個比對檢視

Both sides previous revision 前次修改
下次修改 		前次修改
it:將網頁製成桌面_app [2016/08/04 15:13]
ghsrobert [Chrome App Builder] 		it:將網頁製成桌面_app [2021/08/16 17:33] (目前版本)
ghsrobert FirefoxPWA
行 9: 行 9:
     * 但好像不是最新版 Safari     * 但好像不是最新版 Safari
   * 還不錯用   * 還不錯用
-  * 但可能因為核心太舊，執行部分網頁時功能會有小小的異常（例如 Gmail 內不能用 ``⇧⏎`` 換行、Facebook 影片無法全螢幕播放）+  * 但可能因為核心太舊，執行部分網頁時功能會有小小的異常（例如 Gmail 內不能用 ``⇧⏎`` 換行、Facebook 影片無法全螢幕播放）\\ ↑/^20160908^/ 寄信反映 
 +  * 功能可能是所有解決方案裡最豐富的（因為好像幾乎是自己重寫一個瀏覽器一樣）
  
 ===== Chrome App Builder ===== ===== Chrome App Builder =====
行 18: 行 19:
     * 以上兩種方法都會產生 Mac 桌面 app，並且均可在 Chrome 中管理     * 以上兩種方法都會產生 Mac 桌面 app，並且均可在 Chrome 中管理
   * 「Kiosk app」好像是給 Chromebox 之類的迷你桌機用的，讓機器只重覆執行一個 app，所以我應該用不太到吧   * 「Kiosk app」好像是給 Chromebox 之類的迷你桌機用的，讓機器只重覆執行一個 app，所以我應該用不太到吧
 +
 +===== Electron =====
 +  * [[http://stackoverflow.com/questions/29686011/how-do-i-convert-web-application-into-desktop-executable#answer-38620323|這邊]]有教用 Electron 的方法 ☞ [[http://electron.atom.io/|Electron - Build cross platform desktop apps with JavaScript, HTML, and CSS.]]
 +  * 需要 Node.js，稍嫌麻煩了點
 +===== WebDGap =====
 +  * /^20160804^/ 發現還有這個：[[https://mikethedj4.github.io/WebDGap/|WebDGap]]
 +  * 應是以 Node-Webkit 及 Chromium 為基底
 +  * 試用
 +    * /^20160804^/ 但好奇怪，要上傳 icon 時卡住了
 +      * 下載桌面版試試，因為後來發現桌面版有 300 多 MB 大，似乎不只是網頁版的打包 → 執行結果一樣
 +      * → 反映：/-[[https://github.com/mikethedj4/WebDGap/issues/1|Not working on my machine · Issue #1 · mikethedj4/WebDGap]]-/ ← /^20160808^/ 今天再試一次 → 作者修好了！耶比！
 +    * /^20160808^/ → 可以順利上傳 icon，然後選 32bit/64bit → 選平台 → 下載成品
 +      * 是個 zip 檔，打開後尚非 .app 格式，看來是要照作者的影片進行必要修改，再看怎樣打包成 .app 吧
 +  * 修改 app 圖示等資源 ☞ [[https://www.youtube.com/embed/-AszZcClVXA|作者教學影片]]
 +    - 編輯 ''//<app 資料夾>///data/hello.app/Contents/info.plist''
 +      - ''CFBundleDisplayName''、''CFBundleName'' 改為應用程式名稱
 +      - 存檔
 +    - 出來以後，把 //<app 資料夾>///data/hello.app 檔名改為應用程式名稱
 +    - 改圖示：
 +      - 製作好 Mac OS X 的 .icns 格式圖示檔，並改檔名為 nw.icns
 +      - 以上述 nw.icns 取代 ''//<app 資料夾>///data/hello.app/Contents/Resources/'' 中原有的 nw.icns
 +      * <span tip>替代方案：</span>我把 //<app 資料夾>///data/XXX.app 複製一份，拉到 /Applications 去，用 LiteIcon 改好圖示後，再拉回來
 +  * ↑都改好了，但整個資料夾有辦法進一步<span important>打包成 app</span> 嗎？→ 發問：[[https://github.com/mikethedj4/WebDGap/issues/2|[Q] Howto: make Mac .app from the downloaded folder? · Issue #2 · mikethedj4/WebDGap]] → 得解如下：
 +    - 用 Automator 製作一個 app（要與 WebDGap 做的 app 同名！），只要放一個執行 shell script 的工序，並把 ''run.sh'' 的那行程式碼貼入，然後儲存 app
 +    - 打開 app 的套件內容，把 WebDGap 提供的 ''/data'' 整個移到 ''/Contents'' 裡面
 +    - 這樣就可以執行該 app 了
 +    - 需要的話就修改該 app 的圖示
 +
 +  ; 優點
 +  : Node-webkit 及 Chromium 似乎蠻省資源的，以執行 Wikiwand 為例，Firefox 可能需要耗到 100% CPU，而 Node-Webkit 就只要 40～50%
 +  ; 缺點
 +  : app 肥大，要 80～90MB cf. Fluid app 一個大概 7MB 多而已
 +
 +===== createGcApp =====
 +  * /^20160810^/ 又找到這個！[[https://www.lessannoyingcrm.com/blog/2010/08/149/Create+application+shortcuts+in+Google+Chrome+on+a+Mac|Create application shortcuts in Google Chrome on a Mac]]，更扯的是還有人幫忙寫好一個簡單的圖形介面：http://mait.vilbiks.com/files/createGcApp.dmg（可直接從這個映像檔中執行），所以只要決定好<div>
 +  - app 名稱
 +  - 網址
 +  - 圖示（好像一定要正方形）
 +</div>三者齊備，就可以製成一個以 Chrome 為底的 app 了～
 +  * 基本上應是一個獨立的 Chrome profile
 +    * 那可否研究它的 Applescript，改套 Firefox profile？XD
 +  * 能否運用 Chrome 的桌面通知功能？
 +    * /^20160810^/ 初步試試（用兩個 Gmail app 互寄信件），好像沒有作用
 +  * 建 app 時名字盡量不要取 ASCII 以外的字元，以免建 app 時比較有問題？
 +
 +  ; 優
 +  : 差不多和 Fluid 一樣簡便
 +  : 亦可自訂 icon
 +  : 比起 Chrome App Builder 的成品更獨立，所以不會被與 Chrome 視為相同的 app instance，獨立切換 app 無虞
 +  : 程式核心永遠是最新的 Chrome（只要本機的 Chrome 有一直更新），不像 Fluid 用的 Safari 還是 Webkit 好像是封閉的
 +  ; 缺
 +  : /-app 的大小可能會隨 profile 越來越肥-/（其實 Fluid app 也是越來越肥啊，只是存在其他地方，所以這不成問題）
 +
 +===== Flotato ======
 +[[https://www.flotato.com/|Flotato - lost in a sea of browser tabs?]]
 +  * 去（2020）年找到，但因為當時 macOS 還在 10.11 而無法用
 +  * 2021 在舊機 Mojave 上以及新機上都有用了
 +  * 雖然 Gmail 及 Spotify 方面遇到些問題，不過 FB 是堪用的（但一開始預設連到行動版，要一番工夫才能硬調到桌面版）
 +  * 喔喔 Big Sur 上 Spotify 可以用了，不曉得是新系統的緣故還是新版 Flotato 的緣故
 +  * 什麼？！YouTube 即使改用桌面版也無法全螢幕？是因為它的 useragent 是行動裝置嗎？扣 100 分 XD
 +
 +===== FirefoxPWA =====
 +[[https://github.com/filips123/FirefoxPWA|filips123/FirefoxPWA: A tool to install, manage and use Progressive Web Apps (PWAs) in Mozilla Firefox]]
 +  - 裝 extension
 +  - 依跳出的網頁指示
 +    - 用 Homebrew 裝相關程式
 +    - 執行連結指令
 +    - 安裝 runtime
 +    - 自動完成 ✅
 +  - 試用
 +    - Spotify 播放器
 +      - 用 Firefox extension 的工具列按鈕 ''Install current site'' 進行設定 ✅
 +      - 是裝到 ~/Applications，而不是全系統，所以有可能只有本使用者可以用
 +      - 第一次執行需要等個 10 秒，是因為要建立 profile？
 +      - 會變成一個新的 Firefox 實體，用全新的 profile，Dock 圖示是網站圖示，執行檔的圖示仍是 Firefox，只是程式名稱變 Spotify
 +      - 順利 redirect 到 FB 登入，再 redirect 回來 ✅
 +      - Spotify 要吃 600 多 MB RAM
 +      - 預設使用介面是英語耶
 +      - 還好沒有登錄成新的開啟 HTML 的 app
 +      - SoundSource 裡是辨識成一個 bash 程式項目，但直接調整這個程式的音量的話沒有效果，必須調 Firefox 整體 XD
 +      - Menubar 都跟一個正常的 Firefox instance 一樣，是完整的
 +      - 不過不吃 ``⌘L``，看來是進入視窗模式？👍
 +      - 也不吃 ``⌘T``，沒有新分頁
 +      - 但吃 ``⌘N`` 新視窗
 +===== 其他 =====
 +  * 還有一招這個：[[http://www.chriswrites.com/turn-any-website-into-an-iphone-or-ipad-app-with-automator/|Turn Any Website into an App with Automator - ChrisWrites.com]]
 +    * 但一樣是用 Safari 為底
  • 上一次變更: 2016/08/04 15:13
  • 由 ghsrobert