善用工具：三種方法將網(wǎng)頁(yè)打包成APP應(yīng)用程序

時(shí)間：2023-07-26 04:00:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-07-26 04:00:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

善用工具：三種方法將網(wǎng)頁(yè)打包成APP應(yīng)用程序：

題圖：Applications ?Pixabay




互聯(lián)網(wǎng)公司提供了眾多的服務(wù)，而且為了方便絕大部分用戶的使用，通常會(huì)為不同的操作系統(tǒng)（比如Windows、macOS、Android、iOS等）開(kāi)發(fā)對(duì)應(yīng)的軟件.

但不是所有公司的所有產(chǎn)品的應(yīng)用程序（APP）都能支持所有的平臺(tái)，比如Whatsapp、Flomo、Jupyper、Gmail、得到、Yahoo Finance 等等就沒(méi)有支持電腦端的APP，只有網(wǎng)頁(yè)可用。

這主要是因?yàn)樵谝苿?dòng)互聯(lián)網(wǎng)時(shí)代，每個(gè)人都有一部形影不離的手機(jī)，“移動(dòng)為先”，開(kāi)發(fā)手機(jī)APP的優(yōu)先級(jí)更高，沒(méi)有必要支持所有平臺(tái)。

其次，早期創(chuàng)業(yè)的公司沒(méi)有足夠的資源同時(shí)多線并行開(kāi)發(fā)，更為可行的是采用更簡(jiǎn)單粗暴的方式實(shí)現(xiàn)最小可用產(chǎn)品（MVP），以便驗(yàn)證商業(yè)模式后再投入。

在這種情況下，我們使用這些網(wǎng)頁(yè)服務(wù)的時(shí)候，就必須：

1. 先打開(kāi)瀏覽器。
   
   
2. 再輸入網(wǎng)址，或者記不住網(wǎng)址，就得先搜索一下，再打開(kāi)網(wǎng)頁(yè)。
   
   
3. 登陸網(wǎng)頁(yè)，開(kāi)始使用這些服務(wù)。
   
   

相比起APP的一鍵打開(kāi)立即使用（比如你要用瀏覽器直接打開(kāi)瀏覽器就用），這個(gè)過(guò)程繁瑣.

更為不便的是，我們常常在關(guān)閉瀏覽器的時(shí)候，不小心就把正在使用的網(wǎng)頁(yè)服務(wù)一并關(guān)閉了，因?yàn)楝F(xiàn)在的瀏覽器都是多標(biāo)簽設(shè)計(jì)的，尤其在使用JupyterLab的時(shí)候，內(nèi)心多少有點(diǎn)崩潰。

那有沒(méi)有辦法解決這種打開(kāi)過(guò)程操作麻煩？有沒(méi)有辦法避免無(wú)意中關(guān)閉網(wǎng)頁(yè)服務(wù)的情況呢？有的。

解決的辦法就是：

把網(wǎng)頁(yè)服務(wù)打包成為一個(gè)獨(dú)立的應(yīng)用程序（APP）。

那你自己可以實(shí)現(xiàn)這么復(fù)雜的操作嘛？完全可以，非常簡(jiǎn)單。本文以 MacBook Pro 的使用為例，介紹三種將網(wǎng)頁(yè)打包成APP應(yīng)用程序的方法。

第一種方法，使用 Webcatlog 軟件。

這個(gè)軟件支持 macOS、Windows和Linux，而且已經(jīng)預(yù)置了數(shù)千個(gè)可以打包的網(wǎng)頁(yè)服務(wù)，安裝完成后就會(huì)出現(xiàn)在啟動(dòng)臺(tái)（ Launchpad）里面，可以作為獨(dú)立的應(yīng)用使用。

免費(fèi)版可以安裝 10 個(gè)網(wǎng)頁(yè)服務(wù)獨(dú)立應(yīng)用。Webcatlog 的下載網(wǎng)站為 https://webcatalog.io/ 。



圖片：Webcatlog 內(nèi)置的網(wǎng)頁(yè)打包服務(wù)







圖片：Webcatlog 打包后的 Yahoo Finance 界面





第二種方法，使用 Nativefier 命令行工具。

這個(gè)工具同樣支持 macOS、Windows和Linux，只是操作看起來(lái)略微復(fù)雜，事實(shí)上也并不難，只是第一次用命令行多少讓人有點(diǎn)摸頭不著腦，你只要按步驟一步一步操作即可，實(shí)在不行搜索一下。

1. 打開(kāi)啟動(dòng)臺(tái)搜索「終端」或者「Terminal」；或者使用 「Command + 空格」，然后搜索「終端」或者「Terminal」，打開(kāi)終端。
   
   
2. 在終端中輸入 “npm install -g nativefier”命令（命令行不包含雙引號(hào)）并回車(chē)，安裝軟件包。
   
   
3. 使用“nativefier -n "得到" -i dedaofavicon.ico "https://www.dedao.cn"”創(chuàng)建「得到」APP。其中“-n "得到””用于重命名網(wǎng)頁(yè)默認(rèn)標(biāo)題為APP名字，“-i dedaofavicon.ico”用于更改APP的圖標(biāo)，這個(gè)圖標(biāo)從得到的網(wǎng)頁(yè)圖標(biāo)提取而來(lái)，地址為 https://www.dedao.cn/favicon.ico ；命令行的最后一個(gè)為網(wǎng)址，也就是你要打包的那個(gè)網(wǎng)頁(yè)。
   
   
4. 等待終端完成網(wǎng)頁(yè)打包成應(yīng)用，耗時(shí) 5 秒鐘。你的終端界面可能長(zhǎng)得跟下圖不一樣，因?yàn)橄聢D中的終端是“裝修”過(guò)的，看起來(lái)稍微好看一點(diǎn)，不過(guò)外貌并不影響命令執(zhí)行。
   
   
5. 將打包完成的應(yīng)用，復(fù)制到應(yīng)用（ Application ）文件夾，然后打開(kāi)啟動(dòng)臺(tái)，就可以找到應(yīng)用圖標(biāo)，點(diǎn)擊打開(kāi)它。
   
   

圖片：使用命令行工具打包「得到」



圖片：使用 Nativefier 打包「得到」網(wǎng)頁(yè)后的效果



圖片：在啟動(dòng)臺(tái)顯示的「得到」獨(dú)立APP效果




第三種方法，使用 Microsoft Edge 瀏覽器。

在 Microsoft Edge 瀏覽器的界面，點(diǎn)擊右上角的“…”，在彈出的菜單中選擇“APPs”，在彈出的二級(jí)菜單中選擇“Install this site as an app”（見(jiàn)下圖），這樣你就可以得到一個(gè)獨(dú)立的APP，在啟動(dòng)臺(tái)（ Launchpad）中可以找到。











安裝完成后的效果如下：







這個(gè)方法對(duì)普通人來(lái)說(shuō)最容易實(shí)現(xiàn)，尤其是當(dāng)你的默認(rèn)瀏覽器就是 Edge 的時(shí)候。

缺點(diǎn)是如果你的默認(rèn)瀏覽器不是 Edge ，你在點(diǎn)擊由它打包的網(wǎng)頁(yè)服務(wù)應(yīng)用時(shí)，Edge 會(huì)被同時(shí)啟動(dòng)。

我個(gè)人最喜歡的方法是第二種（Nativefier命令行工具），既可以打包無(wú)限制的網(wǎng)頁(yè)，又不用依賴 Edge 瀏覽器。

希望以上的分享對(duì)你提升使用工具的效率有幫助。

< 全文完 >

本作品采用知識(shí)共享署名-非商業(yè)性使用-禁止演繹 4.0 國(guó)際許可協(xié)議進(jìn)行許可。

---

你錯(cuò)過(guò)的文章


善用工具：銷(xiāo)售數(shù)據(jù)分析用Python，輕松搞定報(bào)告不費(fèi)神。


善用工具：分享「一勞永逸」的MacBook Pro 使用技巧


善用工具：推薦一個(gè)高效快捷、簡(jiǎn)單易學(xué)的輸入方法，秒殺身邊的絕大多數(shù)人





「優(yōu)杜時(shí)間」已為你開(kāi)通「評(píng)論」功能，若你對(duì)本文有什么啟發(fā)、觀點(diǎn)、問(wèn)題或想要補(bǔ)充內(nèi)容，歡迎留言評(píng)論。你的支持是我寫(xiě)作最大的動(dòng)力，如果你閱讀此文有所收獲，請(qǐng)不吝點(diǎn)擊文末的「分享」、「贊」或者「在看」，謝謝你！