1. 首頁 > 生活 > >

網站封裝成 app APP在線打包封裝生成源碼

小知識網站封裝成 app



文章插圖
網站封裝成 app APP在線打包封裝生成源碼

文章插圖
由于每天日常的工作需要 ， 我需要接觸大量的外文資料 ， 因此 ， 一個好用的翻譯工具必不可少 。得益于 Google 在翻譯上的優秀表現 ， 將它作為我的主要翻譯工具使用也是無可爭議 。但是在使用中經常會發現 ， web 端的頁面總是會在不經意間被手滑關掉 ， 要用的時候找了一會才發現需要重新打開 。
此外 ， 想要在工作時間更好地進行「摸魚」 ， 用電腦肯定會比用手機更安全 。
有了這兩個需求 ， 我尋找了數款能夠將 Web 轉換成 Mac app 的工具 ， 但在體驗之后都發現會有這樣那樣的小問題 ， 有一些甚至無法工作或是生產的 app 無法打開 。
直到我發現了它 —— nativefier 。
安裝 nativefier
nativefier 是一個基于 Electron 的命令行工具 ， 完全開源 ， 沒有 UI 界面 ， 且無需安裝任何 app ， 只需要通過一行簡單的代碼 ， 就可以輕松地將任何 Web 頁面打包成可以在桌面運行的 app ， 并且支持在Windows ， Mac 甚至是 Linux 系統上運行 。
P.S. 作者是一位在 Google 工作的軟件工程師 ， 似乎是一位華人 。
目前 ， nativefier 在 Github 上已經獲得了 2.14 萬個 Star 。
使用 nativefier 的過程非常簡單 ， 但需要提前準備一些東西 。這里我以 macOS 作為演示 ， 其它平臺大同小異 ， 可以參考網上的其它教程 。
首先 ， 我們需要安裝 Node.js 。你可以通過到 Node.js 的官方網站下載之后進行安裝 ， 但我這里更推薦使用 Homebrew ， 這樣就可以在一個終端 app 里搞定全部的事情 。
如果你還沒有安裝 Homebrew ， 可以通過下面這一條命令在終端進行安裝 。
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"更多關于 Homebrew 的使用 ， 可以參考這篇文章 。
安裝好 Homebrew ， 就可以安裝 Node.js 了 。在終端內輸入：
brew install node如果因為某些網絡原因安裝緩慢 ， 可以試試換成國內的鏡像源 。跑完進度后 ， 可以在終端中輸入 node -v 和 npm -v ， 測試一下版本 ， 出現版本號即說明安裝成功 。
有了 Node.js ， 我們就可以來安裝 nativefier 本體了 。同樣是在終端 ， 輸入下面的命令：
npm install nativefier -g如果提示權限不足 ， 可以試試在前面加上 sudo：
sudo npm install nativefier -g搞定 。接下來 ， 我們就用 nativefier 來制作一個 app 。
使用
最簡單的使用方法 ， 只需要用 nativefier 加上一個你需要轉換成的網站地址就可以了 。例如：
nativefier "https://www.sspai.com"第一次運行會下載 Eletron 框架 ， 可能會慢一些 。
命令執行完畢后 ， 會生成一個大小在 120 – 150M 左右的 ， 名為「 —darwin-x64」的文件夾 。如果你沒有更改運行地址 ， 那么會默認出現在你的個人文件夾中 。
點擊進入文件夾內 ， 就能看到剛剛制作好的 app 了 。將這個 app 拖入到應用程序文件夾中 ， 它就會出現在 Lanchpad 里 。
一個網頁打包的少數派 for Mac app 就做好了 。
【網站封裝成 app APP在線打包封裝生成源碼】上面的這個方法 ， 會自動抓取網站的名字和 Logo 來作為名稱及 app 圖標 。但有時 ， nativefier 也會「翻車」（比如上面 app 名字顯示成了「–」） ， 這時候就需要我們自定義 app 的名稱 ?？梢杂孟旅孢@條命令：
nativefier --name "在這里輸入 app 名字" "http://www.sspai.com"注意 ， 這個 app 名字不支持中文 。如果你想要更改中文的 app 名稱 ， 可以在 nativefier 制作好的 app 上直接更改 ， 再拖入到應用程序文件夾中 。
不過 ， nativefier 有個小瑕疵：由于有些網站的圖標或 logo 形狀不好看 ， 又或者太丑、分辨率太低 ， 導致有些時候生成的 app 圖標無法令人滿意 。
這個問題其實也有解決辦法 。nativefier 提供了一個 –icon 的參數 ， 只要我們準備一張 png 格式的圖片 ， 就可以應用成圖標了 。
如果你不太明白上面在說什么 ， 你也可以手動進行替換 。提前準備好一個 icns 格式的圖標 ， 并命名為「electron.icns」 ， 然后在生成好的 app 上右鍵點擊「查看包內容」 ， 進入「Contents – Resources」 ， 將我們準備好的圖標放到里面替換原來的圖標即可 。
例如 ， 我這里就用 Sketch 為 Tinde 和小特畫了一個和 macOS Catalina 原生風格類似的高清圖標  ， 然后再用 Image2icon 轉換成 icns 格式 ， 替換之后 ， 就沒有這么強烈的「像素風」了 ， 違和感也降低了不少 。
這個頁面里有 4 個 app 都是用 nativefier 生成的
除了這些之外 ， nativefier 還提供了很多可供選擇的參數 ， 例如是否要限制 app 窗口的寬高、是否顯示菜單欄、、是否在關閉時推出、是否開啟 flash 支持等等 ， 你可以在終端直接輸入 nativefier 或 nativefier -h 來查看 ， 或者是閱讀官方的 API 文檔 來學習 。
哦對了 ， nativefier 制作的 app ， 甚至還支持調用系統的推送 。例如將微信網頁版打包成 app 之后 ， 有新消息來時 ， 一樣也能夠收到新消息通知 。
好了 ， nativefier 就給大家介紹到這里 ， 我要用剛打包好的 app 去摸魚了 。