Sử dụng node-webkit để tạo Ứng dụng trên máy tính để bàn

Trong bài đăng này, tôi đang tìm hiểu về bề mặt của node-webkit, bằng cách triển khai và xây dựng một gói cho một ứng dụng web, trên Mac và Windows.

Cảnh báo: bài đăng này đã cũ và có thể không phản ánh tình trạng hiện tại của nghệ thuật

Đầu tiên, tuyên bố từ chối trách nhiệm: Tôi sẽ không bao gồm việc chạyNode.jsmã, nhưng chỉ đóng gói một ứng dụng web để chạy trên Mac và Windows. Linux cũng là một phần của trò chơi, nhưng tôi không đề cập đến nó.

node-webkitlà, đó là cách nó được gọi từ những người tạo ra nó, một thời gian chạy web.

Nó dựa trên Chromium (mặc dù tên của nó) và node.js. Nó cho phép chúng tôi gọi mã node.js và các mô-đun trực tiếp từ DOM, đồng thời mở ra các khả năng mới cho các ứng dụng gốc được viết bằng công nghệ Web.

Trong bài đăng này, tôi chỉ đang tìm hiểu sơ lược về nó, bằng cách triển khai và xây dựng một gói cho một ứng dụng web, trên Mac và Windows, giống như đó là một ứng dụng gốc.

Chạy ứng dụng

Đầu tiên, hãy giới thiệu tệp index.html

<html>
  <body>
    <p>test</p>
  </body>
</html>

We also need a package.json file

{
  "name": "My Web App",
  "main": "index.html"
}

That’s it from the code-side! Really.

Now to run the app, download the runtime from the site https://github.com/rogerwang/node-webkit for your specific platform, and then you can call

1)
$ alias nw="open -n -a node-webkit '/PATH_TO_APP_DIRECTORY/'
$ ./nw

cd /PATH_TO_APP_DIRECTORY/ zip -r app.nw ./

You have now created a package of the app. You can double-click it on Mac, or drag over the node-webkit application on Windows, and it will run.

There are a lot of options you can now add to the package.json file https://github.com/rogerwang/node-webkit/wiki/Manifest-format, but that’s a start. You can for example hide the top bar with address and debugger, set the menu items, and decide pretty much all you need.

Now, let’s dig into packaging and distributing an app.

Package the app on the Mac

Unzip the node-webkit.app package downloaded from the node-webkit site.

Right-click, “Show package content”, go in Contents/Resources and copy there the app.nw file built with

$ zip -r app.nw ./

or alternatively, copy the app directory there and name it “app.nw”.

That’s it! You can now change the default icon and properties in the Contents/Info.plist file.

Package the app on Windows

Download the latest Windows package.

Copy the .nw file built using Zip in the package directory, alongside nw.exe, and call it app.nw

Run the command

copy /b nw.exe+app.nw app.exe

You can now remove the nw.exe & app.nw files, zip the directory and distribute the package. Your users will need to download the zip file, uncompress and then run the app.exe file contained.


More devtools tutorials: