将网站打包成app

归功于近几年CPU速度的提升，web打包成的app流畅度已经和原生app没有多大区别。对于个人而言，用web写UI界面是最好的选择，一方面只需一套代码就可以跑遍所有平台，另一方面web端有各种各样的库，写出好看的界面比原生app容易太多了。

如果有大量数据需要处理，担心web app的性能，可以用其他语言另开一个进程，数据处理完之后再通过websocket交给web显示就好了。

对于桌面端可以使用electron打包，对于移动端可以使用flutter进行打包。他们其实就是一个nodejs的package，对于web开发者来说用起来很方便。

下面以electron举例，将我的博客打包成一个app。

首先创建一个index.js文件：

const { app, BrowserWindow } = require('electron')


app.whenReady().then(() => {
  const win = new BrowserWindow({
    width: 1200,
    height: 800
  })

  win.loadURL('https://fivecakes.com')
})

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

然后创建package.json:

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "Hello World!",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "electron .",
    "pack": "electron-builder --dir",
    "dist": "cross-env CSC_IDENTITY_AUTO_DISCOVERY=false electron-builder"
  },
  "devDependencies": {
    "cross-env": "^7.0.3",
    "electron": "^13.1.1",
    "electron-builder": "^22.10.5"
  }
}

安装依赖，并打包称app:

yarn
yarn dist

运行效果