jQuery Mobile 學習筆記 (十八) : 用 appsgeyser 將行動網頁轉成 App

以前曾經找到一個 appsgeyser 網站可將行動網頁轉成原生 App, 那時只用一個簡單的網頁測試了一下, 確定產生的 Apk 檔可順利安裝到 Android 手機 (手機設定須開啟 "允許不明的來源"), 這對不需要用到手機硬體例如相機與 GPS 等功能的行動網頁而言非常方便, 參考 :

# 好站 : 可將網站轉成 Android App 的 appsgeyser

前陣子完成的疫苗登記行動網頁測試網址如下 (用手機掃 QR code) :

# http://tony1966.xyz/test/vaccine_app/index.htm

此行動網頁測試過程參考 :

# jQuery Mobile 學習筆記 (十三) : 疫苗登記表專案 (上)
# jQuery Mobile 學習筆記 (十四) : 疫苗登記表專案 (中)

# jQuery Mobile 學習筆記 (十七) : 疫苗登記表專案 (下)

全部 jQuery Mobile 測試筆記參考 :

# jQuery Mobile 學習筆記索引

首先在 appsgeyser 首頁按 "CREATE APP NOW" 鈕 :

在 "Website URL" 欄填入行動網頁首頁 index.htm 網址, 按 NEXT 鈕 :

在 "APP NAME" 欄位填入 App 名稱, 按 NEXT 鈕 :

在 "ICON" 欄勾選 "Custom icon" (也可用預設), 再按右邊的 "Upload" 鈕上傳最大 512*512 px 的圖檔 (png/jpg/gif 等), 我下載聯合國的 Covid-19 圖示加以編輯, 加上 STOP 字樣作為 App 的圖示, 再用線上軟體 https://www.remove.bg/ 去背, 上傳後還可以截圖, 不需要就直接按 "Crop 鈕" 即可, 按 NEXT 鈕即完成 App 製作準備 : 

 

按 "CREATE" 鈕即開始轉換為 App 作業 :  

但轉換前會要求註冊為會員 (免費會員一次只能轉一個 App), 我因上回已註冊過, 故按 Log In 鈕直接登入, 一會兒便轉換完畢了 (檔名為 _Vaccine_Test_13322400.apk) : 

按 Download 鈕出現 Email 傳送 Apk 檔與 QR code 兩種下載方式 :

也可以按 Apk id 旁的下載鈕將其下載到電腦中保存 :

我用手機掃 QR code 直接下載 Apk 檔, 但安裝前須在手機設定中開啟 Chrome "允許安裝未知來源程式" 權限才行, 以我的三星 Note8 為例 (Android 9), 程序如下 :

參考 :

# 要裝 apk，但找不到 Android 允許未知來源，怎麼辦呢？

這樣便能安裝從 Chrome 下載的 Apk 檔了 (因為 appsgeyser 是網路服務, 所產生的 Apk 是從 Chrome 下載, 所以要選擇 Chrome), 安裝時還會出現安全警示, 接受後即可順利安裝, 完畢就可在桌面看到這個有自訂圖示特色的 App 了 : 

點擊執行此 App 確認功能與使用瀏覽器操作行動網頁時完全相同, 轉成原生 App 的好處就是不需要記網址了. 由於 appsgeyser 免費用戶一次只能保存一個專案, 因此上面轉換出來的 Apk 下載 QR code 因為轉別的行動網頁而失效, 因此我將這次下載的 Apk 檔與其圖示 vaccine_test.png 壓縮為 zip 檔寄存 GitHub :

# https://tony1966.github.io/test/jquerymobile/vaccine2_apk.zip