====== 將網頁製成桌面 app ====== 這就是所謂的「web app」嗎?不確定。 ===== Prism ===== Firefox(Gecko)核心的解決方案,/,(2016 的),/前幾年已中止。之前還在用 Linux 時有用過。 ===== Fluid ===== * 核心好像是 Safari(所以這是一個 Mac-only 的解決方案哦) * 但好像不是最新版 Safari * 還不錯用 * 但可能因為核心太舊,執行部分網頁時功能會有小小的異常(例如 Gmail 內不能用 ``⇧⏎`` 換行、Facebook 影片無法全螢幕播放)\\ ↑/^20160908^/ 寄信反映 * 功能可能是所有解決方案裡最豐富的(因為好像幾乎是自己重寫一個瀏覽器一樣) ===== Chrome App Builder ===== * /^20160804^/ 今天才發現原來 Google Chrome app 早就都是 Mac 桌面 app 了,並且可以用 [[https://chrome.google.com/webstore/detail/chrome-app-builder/ighkikkfkalojiibipjigpccggljgdff/related|Chrome App Builder]] 自製 * /^20160804^/【實驗】做了一個 Google Drive 的 app * ''Export App'' 後會變成「未封裝的擴充功能」,可在 ''chrome:%%//%%extensions'' 中載入並執行 * 也可封裝成 .crx 檔,再拖到 Chrome 中安裝 * 以上兩種方法都會產生 Mac 桌面 app,並且均可在 Chrome 中管理 * 「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|作者教學影片]] - 編輯 ''/////data/hello.app/Contents/info.plist'' - ''CFBundleDisplayName''、''CFBundleName'' 改為應用程式名稱 - 存檔 - 出來以後,把 /////data/hello.app 檔名改為應用程式名稱 - 改圖示: - 製作好 Mac OS X 的 .icns 格式圖示檔,並改檔名為 nw.icns - 以上述 nw.icns 取代 ''/////data/hello.app/Contents/Resources/'' 中原有的 nw.icns * 替代方案:我把 /////data/XXX.app 複製一份,拉到 /Applications 去,用 LiteIcon 改好圖示後,再拉回來 * ↑都改好了,但整個資料夾有辦法進一步打包成 app 嗎?→ 發問:[[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(可直接從這個映像檔中執行),所以只要決定好
- app 名稱 - 網址 - 圖示(好像一定要正方形)
三者齊備,就可以製成一個以 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 為底