Membina aplikasi desktop silang platform dengan nw.js

nw.js: Rangka kerja untuk membina aplikasi asli menggunakan teknologi web

NW.JS adalah rangka kerja yang kuat yang membolehkan pemaju membuat aplikasi asli menggunakan teknologi web seperti HTML, JavaScript, dan CSS untuk menghasilkan aplikasi hibrid yang mempunyai kelebihan yang signifikan ke atas aplikasi web biasa.

berbanding dengan rangka kerja aplikasi hibrid yang lain, elektron, NW.JS mempunyai kelebihan berikut: sokongan untuk krom. dan mengintegrasikan node.js dalam pekerja web.

Proses membuat aplikasi hibrid menggunakan NW.JS termasuk menubuhkan struktur projek, mewujudkan fail yang nyata, dan mewujudkan pandangan utama. Anda boleh merujuk kepada aplikasi sampel pada GitHub.

nw.js boleh dibangunkan dan dihasilkan dan dipasang menggunakan pakej

dan nw masing -masing. Proses pembungkusan dan pengedaran boleh dipermudahkan dengan menambahkan skrip NPM ke fail nw-builder. package.json

Ujian dan penyahpepijatan aplikasi NW.JS boleh dilakukan secara manual kerana NW.JS didasarkan pada kromium. Ujian unit automatik boleh dilaksanakan menggunakan plug-in pelancar NW.JS Karma (seperti karma-nodewebkit-launcher).

Artikel ini dikaji semula oleh Tim Sevien dan Joan Yin. Terima kasih kepada semua pengulas rakan sebaya SitePoint untuk membuat kandungan SitePoint sempurna!

NW.JS adalah rangka kerja untuk membuat aplikasi asli menggunakan teknologi web seperti HTML, JavaScript dan CSS. Ringkasnya, anda menggunakan proses biasa untuk membangunkan aplikasi web. Pada akhir proses, anda menjalankan penjana yang menyusun segala -galanya ke dalam aplikasi asli, dan aplikasi memaparkan aplikasi web anda seperti penyemak imbas. Aplikasi ini dipanggil "aplikasi hibrid."

Aplikasi hibrid sangat bagus bukan sahaja kerana mereka ditulis dalam bahasa yang sudah anda kenal (HTML, JavaScript, dan CSS), tetapi juga kerana mereka mempunyai kelebihan penting berikut mengenai aplikasi web biasa:

Kawalan penyemak imbas dan versi penyemak imbas (anda tahu penyemak imbas mana aplikasi anda dipanggil). Aplikasi hibrid NW.JS dipaparkan menggunakan Chromium (pelayar sumber terbuka yang berjalan di belakang Google Chrome). Oleh itu, aplikasi yang dijalankan di Chrome juga harus dijalankan dengan NW.Js.

• Kawalan Viewport. Sebagai contoh, anda boleh menentukan viewport tetap atau minimum/maksimum.
• Oleh kerana fail tempatan, tidak ada batasan dasar yang sama. Jika anda membuka fail tempatan dari sistem fail, penyemak imbas menghalang permintaan XMLHTTPREQUEST untuk fail yang tidak dalam direktori yang sama. Tingkah laku ini boleh dilumpuhkan dalam aplikasi NW.JS.
mereka juga menyediakan API tersuai, yang membawa kelebihan berikut:

• integrasi node.js
• akses clipboard
• mengakses sistem fail
• akses perkakasan (contohnya, dapatkan senarai pencetak)
• ikon palet
• kotak dialog pemilih fail tersuai
• integrasi shell (buka fail atau url dalam penyemak imbas fail lalai atau penyemak imbas)
• Pilihan untuk menyesuaikan keseluruhan tetingkap (butang tutup, bar menu) dan menu konteks
• Keupayaan untuk menetapkan dan mendapatkan tahap zum.

terdengar baik? Kemudian mari kita mulakan. Dalam artikel ini, kita sebenarnya akan belajar tentang NW.JS dan belajar bagaimana untuk membuat aplikasi hibrid. Anda boleh mencari contoh aplikasi yang dibina menggunakan arahan dalam artikel ini di GitHub.

Kelebihan NW.JS berbanding dengan elektron

Pertama sekali, satu perkara yang disebutkan: NW.JS bukanlah satu -satunya rangka kerja untuk aplikasi hibrid. Pesaing lain dipanggil Electron. Ia dilancarkan pada tahun 2013, dua tahun di belakang NW.JS, tetapi dengan cepat menjadi terkenal kerana ia datang dari GitHub. Sekarang anda mungkin berminat dengan perbezaan di antara mereka. Berikut adalah kelebihan NW.JS berbanding dengan elektron:

• Sokongan Chrome.* API. API ini boleh digunakan untuk berinteraksi dengan penyemak imbas. (Anda boleh mendapatkan lebih banyak maklumat berkaitan dalam dokumentasi NW.JS.)
• menyokong aplikasi Chrome. Aplikasi Chrome adalah aplikasi yang dibungkus ditulis dalam bahasa web. (Lihat dokumentasi pemaju Chrome untuk maklumat lanjut.) Aplikasi ini berbeza daripada NW.JS kerana mereka tidak mempunyai integrasi Node.js dan diterbitkan menggunakan kedai web Chrome. (Chromium akan membatalkan sokongannya pada bulan Ogos 2018 (lihat catatan blog mereka). Tetapi menurut jawatan ini, NW.JS masih akan menyokong aplikasi Chrome.)
• Menyokong aplikasi NaCl (Native Client) dan PNACL (Pelanggan Native Portable). Mereka memberi tumpuan kepada prestasi, jadi mereka ditulis terutamanya dalam C dan C. (Lihat tutorial ini untuk menggunakannya di NW.Js.)
• mempunyai perlindungan kod sumber V8 Snapshot untuk melindungi kod sumber permohonan. Dengan alat NWJC, kod anda akan disusun menjadi kod asli. (Lihat artikel ini untuk maklumat lanjut.)
• mempunyai penonton PDF terbina dalam.
• Sila cetak Pratonton.
• menyokong integrasi node.js dalam pekerja web. Mereka digunakan untuk menulis aplikasi multithreaded.

Walau bagaimanapun, elektron juga mempunyai beberapa kelebihan yang perlu disebutkan:

program kemas kini automatik terbina dalam (anda boleh mengikuti soalan mengenai program kemas kini automatik NW.JS).
Secara automatik menghantar laporan kemalangan ke pelayan jauh. NW.JS hanya menulis kepada fail tempatan dan kemudiannya boleh dihantar secara manual.

Terdapat satu lagi perbezaan asas. Aplikasi NW.JS Tentukan titik masuk mereka sebagai fail HTML. Fail HTML ini akan dibuka secara langsung di GUI.

Sebaliknya, aplikasi elektron menentukan fail JavaScript sebagai titik masuknya. Fail JavaScript ini dibuka dalam proses utama yang berasingan, dan fail HTML kemudiannya boleh dibuka di GUI. Ini bermakna bahawa dalam teori anda boleh menjalankan aplikasi elektron tanpa GUI. Juga, menutup GUI tidak menutup proses utama;

Walaupun Electron membuka pintu untuk aplikasi desktop yang ditulis dalam JavaScript dan tanpa GUI, aplikasi NW.JS mungkin lebih mudah untuk disediakan jika anda hanya ingin memaparkan aplikasi berasaskan HTML.

Nota: Jika anda benar -benar menyukai kelebihan elektron, lihat artikel terbaru SitePoint mengenai membuat aplikasi desktop dengan elektron.

Buat aplikasi demo

Mari mula membuat aplikasi yang akan disusun menjadi aplikasi asli kemudian. Memandangkan terdapat banyak cara untuk menyediakan aplikasi web - menggunakan pelbagai bahasa JS (typescript, coffeescript, dll.), Pemuat modul (memerlukanJs, webpack, systemjs, dll.), Rangka kerja (AngularJS, React, vue.js, dan lain -lain) dan preprocessors (SCSS, kurang, HAML, dll.) - dan setiap orang mempunyai keutamaan mereka sendiri, kami hanya menggunakan teknologi HTML, CSS dan JS (ES6 standard) asas.

tidak ada nw.js boilerplate (projek mula) untuk sebarang tetapan. Semua ini dibina untuk rangka kerja tertentu, loader modul, atau preprocessor. Oleh itu, kami akan melaksanakan aplikasi NW.JS yang mudah dari awal. Sangat mudah difahami dan anda boleh menyesuaikannya dengan mudah kemudian ke keperluan anda, atau beralih ke boilerplate.

Struktur Projek

Pertama, kita perlu membuat struktur dan fail projek kita:

<code>nw.js-example/
├── src/
│   ├── app/
│   │  └── main.js
│   ├── assets/
│   │  └── icon.png
│   ├── styles/
│   │  └── common.css
│   ├── views/
│   │  └── main.html
│   └── package.json
└── package.json</code>

Arahan:

• src/mengandungi fail sumber aplikasi.
• src/ app/ mengandungi fail JavaScript kami.
Src/ Styles/ biasanya mengandungi SCSS atau kurang fail - dalam contoh kami, ia hanya fail CSS yang mudah.
src/ views/ mengandungi fail paparan html.
src/package.json adalah fail manifes untuk aplikasi NW.JS (lihat format manifes). Kami juga menentukan kebergantungan aplikasi di sini.
Package.json adalah fail pakej NPM yang perlu kita lakukan aliran kerja membina dan menentukan kebergantungan yang tidak diperlukan dalam aplikasi NW.JS sebenar (seperti kebergantungan bangunan).

Buat Senarai

Sekarang kita telah mencipta struktur dan fail projek, kita boleh mula menggunakan fail manifest nw.js src/pakej.json. Menurut dokumentasi, fail pada dasarnya memerlukan hanya dua sifat, nama (nama aplikasi) dan utama (laluan ke fail HTML yang digunakan sebagai titik masuk). Tetapi kami menambah lebih banyak maklumat, seperti laluan ikon tetingkap, serta lebar dan ketinggian minimum, untuk memastikan pengguna tidak melihat apa -apa yang tidak dijangka:

<code>{
  "name":"nw.js-example",
  "main":"views/main.html",
  "window":{
    "min_width":400,
    "min_height":400,
    "icon":"assets/icon.png"
  }
}</code>

itu sahaja! Permohonan kemudian akan membuka src/views/main.html pada permulaan kerana laluan utama adalah relatif kepada fail manifes.

Buat paparan rumah

Pada ketika ini, kita boleh menulis aplikasi tugasan. Tetapi kami mahu memberi tumpuan kepada NW.JS dan ciri -cirinya. Untuk ini, saya lebih suka membiarkan

anda memutuskan apa aplikasinya. Saya mencipta contoh Projek NW.JS-Examples pada GitHub untuk menunjukkan beberapa ciri NW.JS seperti Integrasi Node.js dan akses papan klip. Jangan ragu untuk mencubanya dalam permohonan anda. Tetapi anda boleh menggunakan kandungan lain juga.

Untuk apa sahaja yang anda memutuskan, anda mesti sekurang -kurangnya membuat fail src/views/main.html kerana ia adalah titik masuk aplikasi. Ia mungkin kelihatan seperti ini:

<code>nw.js-example/
├── src/
│   ├── app/
│   │  └── main.js
│   ├── assets/
│   │  └── icon.png
│   ├── styles/
│   │  └── common.css
│   ├── views/
│   │  └── main.html
│   └── package.json
└── package.json</code>

Dalam aplikasi sebenar, anda mungkin mempunyai beberapa fail pandangan lain dan memuatkannya menggunakan AJAX. Untuk kesederhanaan, anda juga boleh membuat hiperpautan asli dan rujukan fail HTML yang lain. Contohnya:

<code>{
  "name":"nw.js-example",
  "main":"views/main.html",
  "window":{
    "min_width":400,
    "min_height":400,
    "icon":"assets/icon.png"
  }
}</code>

Kemudian, buat https://www.php.cn/link/58c1dbad4977b4c106bca8015477757e dalam src/views/. Inilah cara saya melakukannya dalam projek contoh.

Pasang nw.js

Kami kini telah mencipta projek NW.JS, termasuk manifes dan pandangan utama. Kami akhirnya memerlukan cara untuk menjalankan NW.JS secara langsung pada mesin pembangunan kami untuk pembangunan dan melaksanakan proses binaan yang menjana aplikasi asli untuk pelbagai sistem operasi.

untuk melakukan ini, kita memerlukan dua pakej berikut:

nw (pembangunan)
NW-Builder (Pengeluaran)

Oleh kerana mereka tidak berkaitan dengan permohonan sebenar kami (mereka hanya digunakan untuk tujuan pembangunan dan pengeluaran pengeluaran), kami mencipta mereka sebagai kebencian dalam pakej kedua.json dalam folder root, bersama dengan nama dan versi yang diperlukan:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>NW.js-example | main</title>
    <link rel="stylesheet" href="../styles/common.css">
</head>
<body>
    <h1 id="Hello-World">Hello World :-)</h1>
    <🎜>
</body>
</html>

Sekarang kita hanya perlu menjalankan arahan berikut dalam folder root projek untuk memasang DevDependency:

<a href="https://www.php.cn/link/58c1dbad4977b4c106bca8015477757e">Something</a>

selesai! Mari bina.

Pembungkusan dan pengedaran

Untuk memudahkan pembungkusan, kami menambah skrip NPM ke fail pakej.json kami. Mereka membenarkan kami menjalankan arahan CLI, yang ditakrifkan di sebelah kanan dan menggunakan NPM berjalan di sebelah kiri menggunakan jalan pintas. Kami menambah dua skrip, satu untuk pembangunan dan satu untuk pengeluaran:

{
  "name":"nw.js-example",
  "version":"1.0.0",
  "devDependencies":{
    "nw":"^0.18.2",
    "nw-builder":"^3.1.2"
  }
}

Jalankan nw.js secara langsung

Untuk memulakan aplikasi NW.JS secara langsung, hanya jalankan:

$ npm install

Pintasan ini akan memanggil arahan yang kami tentukan dalam skrip di bawah Dev, menggunakan pakej NW. Tingkap baru harus dibuka secara langsung pada mesin pembangunan anda, menunjukkan SRC/VIEWS/MAIN.HTML.

Pembinaan Pengeluaran

Pembentukan pengeluaran akan menggunakan NW-Builder, yang menyokong output dari Windows, Linux, dan MacOS. Dalam contoh kami, kami membina satu pakej untuk semua platform ini, termasuk versi 32-bit dan 64-bit. Untuk macOS, pada masa ini, hanya 32-bit boleh dibina dalam mod versi lama. (Lihat soalan ini mengenai GitHub.) Jadi, hanya 64-bit dibina.

untuk menjalankan pengeluaran pengeluaran kami, hanya jalankan:

{
  "name":"nw.js-example",
  "version":"1.0.0",
  "devDependencies":{
    "nw":"^0.18.2",
    "nw-builder":"^3.1.2"
  },
  "scripts":{
    "dev":"nw src/",
    "prod":"nwbuild --platforms win32,win64,osx64,linux32,linux64 --buildDir dist/ src/"
  }
}

Seperti yang dijalankan secara langsung, ini akan menggunakan arahan CLI yang kami tentukan dalam skrip.

akan mengambil sedikit masa ...

Apabila selesai, periksa dist/folder anda. Ia sepatutnya kelihatan seperti ini:

Hebat, kami hampir selesai!

$ npm run dev

Ujian dan Debug

manual

Sejak nw.js didasarkan pada kromium, ujian manual semudah dalam Chrome. Apabila anda menghadapi ralat (visual atau berfungsi), anda boleh membuka alat pemaju menggunakan pintasan papan kekunci F12 atau secara programatik:

<code>nw.js-example/
├── src/
│   ├── app/
│   │  └── main.js
│   ├── assets/
│   │  └── icon.png
│   ├── styles/
│   │  └── common.css
│   ├── views/
│   │  └── main.html
│   └── package.json
└── package.json</code>

Sila ambil perhatian bahawa ini memerlukan gaya membina SDK. Jika anda ingin melumpuhkan alat pemaju dalam pengeluaran, anda boleh membina NW.JS dalam gaya yang berbeza atau melumpuhkan peristiwa F12.

Automasi

Ujian unit automatik (bernasib baik) digunakan secara meluas untuk memastikan ia berfungsi dengan baik dalam pelbagai pelaksanaan tanpa memerlukan ujian manual yang berterusan.

Jika aplikasi anda tidak menggunakan kaedah API khusus NW.JS, anda secara teorinya boleh menyimpan aliran kerja aplikasi web biasa anda-sebagai contoh, menggunakan karma sebagai pelari spesifikasi, digabungkan dengan melati sebagai rangka kerja ujian.

Walau bagaimanapun, jika anda menggunakan kaedah API khusus NW.JS, anda perlu menjalankan ujian dalam aplikasi NW.JS anda untuk memastikan kaedah API ditakrifkan. Salah satu cara ialah menggunakan plugin pelancar NW.JS Karma, seperti Karma-Nodewebkit-Launcher. Ia berfungsi dengan cara yang sama seperti mana -mana plugin pelancar pelayar lain di Karma: Ia membuka aplikasi dalam bekas NW.JS untuk melakukan cek, dan kemudian menutupnya secara automatik.

Walau bagaimanapun, kerana nw.js tidak tanpa kepala (tidak seperti Phantomjs, dan lain -lain), ia sentiasa memerlukan paparan fizikal. Ini bermakna mustahil untuk menjalankan ujian pada pelayan CLI tulen. Nasib baik, dalam kes ini anda boleh menggunakan XVFB untuk mencontohi paparan. Ini berfungsi pada Travis CI, sebagai contoh. Untuk Jenkins, anda perlu memasang plugin XVFB. Sila lihat soalan ini di GitHub untuk maklumat lanjut.

Kesimpulan

Saya harap artikel ini akan memberi anda pemahaman yang mendalam tentang kelebihan dan penggunaan kes-kes NW.JS. Terdapat banyak sebab mengapa menggunakan aplikasi hibrid lebih baik daripada mengedarkan folder .zip yang mengandungi fail HTML (dan kemudian berjalan dari sistem fail). NW.JS juga boleh digunakan sebagai pengganti aplikasi asli, kerana anda tidak perlu memberi tumpuan kepada GUI kompleks, dan anda mempunyai banyak ciri terbina dalam seperti pemain video. Oleh kerana anda dapat mengesan persekitaran, anda juga boleh membangunkan aplikasi yang boleh dijalankan pada pelayan web dan mesin klien biasa menggunakan NW.JS. Dengan beberapa helah, dan terima kasih kepada enjin Chromium yang kuat, pengguna tidak dapat merasakan perbezaan dari aplikasi asli.

Apabila membuat projek NW.JS baru, mula -mula menentukan kerangka kerja, loader modul, dan preprocessor yang anda mahu gunakan -bergantung pada apa yang anda kenal -atau mula terus dari awal. Selepas membuat keputusan ini, anda boleh mencari nw.js boilerplate yang sesuai dengan keperluan anda. Sekiranya tidak ada boilerplate yang sesuai, anda boleh menggunakan aplikasi berdasarkan tutorial ini sebagai asas.

Apakah model pilihan anda? Atau teknologi apa yang anda pilih untuk membangunkan aplikasi NW.JS? Adakah ia berkesan untuk menggunakan contoh NW.JS dan bukannya pelaksanaan aplikasi tugasan dalam artikel ini? Tolong beritahu saya dalam komen.

Soalan Lazim (Soalan Lazim) Mengenai Aplikasi Desktop Cross-Platform Menggunakan NW.JS

Apakah perbezaan utama antara NW.JS dan kerangka aplikasi desktop silang platform yang lain?

nw.js adalah alat yang berkuasa untuk membangunkan aplikasi desktop silang platform. Tidak seperti kerangka lain, NW.JS membolehkan pemaju menulis kod dalam HTML, CSS, dan JavaScript, yang biasanya digunakan dalam pembangunan web. Ini memudahkan pemaju web beralih ke pembangunan aplikasi desktop. Di samping itu, NW.JS mempunyai ciri unik yang membolehkan akses langsung ke API Node.js di DOM, membolehkan ciri -ciri yang lebih kompleks dan berkuasa.

Bagaimana untuk memulakan dengan nw.js?

Untuk memulakan dengan nw.js, anda perlu memuat turun dan memasangnya dari laman web rasmi. Sebaik sahaja pemasangan selesai, anda boleh membuat direktori projek baru, tambahkan fail HTML, CSS, dan JavaScript anda, dan kemudian jalankan aplikasi anda menggunakan NW.JS Executable. Dokumentasi NW.JS menyediakan panduan terperinci tentang cara memulakan.

Bolehkah saya menggunakan nw.js untuk projek komersial?

Ya, anda boleh menggunakan NW.JS untuk projek komersial. NW.JS adalah sumber terbuka dan tersedia secara percuma, menjadikannya penyelesaian kos efektif untuk membangunkan aplikasi desktop silang platform. Walau bagaimanapun, perlu diperhatikan bahawa mana-mana modul pihak ketiga yang digunakan mungkin mempunyai keperluan pelesenan sendiri.

Bagaimana untuk membungkus dan mengedarkan aplikasi NW.JS saya?

Pembungkusan dan pengedaran aplikasi NW.JS melibatkan membuat fail yang boleh dilaksanakan secara mandiri yang boleh dijalankan pada platform sasaran. Ini boleh dilakukan menggunakan alat seperti NW-Builder atau Webpack. Setelah dibungkus, aplikasi itu boleh diedarkan melalui pelbagai saluran, seperti muat turun langsung atau kedai aplikasi.

Platform apa yang disokong oleh NW.JS?

nw.js menyokong pelbagai platform. Ia boleh digunakan untuk membangunkan aplikasi untuk Windows, Mac, dan Linux. Sokongan rentas platform ini adalah salah satu kelebihan utama menggunakan NW.JS kerana ia membolehkan pemaju menulis kod sekaligus dan dijalankan pada pelbagai platform.

bagaimana debug aplikasi nw.js saya?

Debugging Aplikasi NW.JS adalah serupa dengan aplikasi web debugging. Anda boleh debug menggunakan alat pemaju Chrome yang disediakan oleh bundle NW.JS. Alat ini menyediakan banyak fungsi untuk memeriksa dan menyahpepijat kod.

Bolehkah saya menggunakan modul Node.js dalam aplikasi NW.JS saya?

Ya, salah satu ciri utama NW.JS adalah keupayaan untuk menggunakan modul Node.js secara langsung di DOM. Ini membolehkan fungsi yang lebih kompleks dan berkuasa dilaksanakan dalam permohonan anda. Anda boleh menggunakan mana -mana beribu -ribu modul yang terdapat pada NPM dalam aplikasi NW.JS anda.

Bagaimana untuk mengemas kini aplikasi NW.JS saya?

Mengemas kini aplikasi NW.JS melibatkan menggantikan versi lama aplikasi dengan versi baru aplikasi. Ini boleh dilakukan secara manual oleh pengguna, atau anda boleh menggunakan modul seperti NW-updater untuk melaksanakan kemas kini automatik dalam aplikasi.

Bolehkah saya mengakses API asli menggunakan nw.js?

Ya, nw.js membolehkan akses langsung ke API asli melalui Node.js. Ini bermakna anda boleh menggunakan ciri -ciri asli seperti sistem fail, rangkaian, peranti, dan lain -lain dalam aplikasi anda. Ini adalah kelebihan utama NW.JS melalui teknologi web tradisional.

Bagaimana untuk mengoptimumkan prestasi aplikasi NW.JS saya?

Mengoptimumkan prestasi aplikasi NW.JS melibatkan pelbagai teknologi seperti meminimumkan dan menghubungkan fail JavaScript, mengoptimumkan imej, dan menggunakan algoritma yang cekap dan struktur data. Di samping itu, anda boleh menggunakan alat pemaju Chrome untuk menganalisis dan menyahpepijat isu prestasi.

Output yang disemak semula ini mengekalkan penempatan dan format imej asal, ayat -ayat dan perenggan untuk keaslian semasa memelihara makna teras, dan menggunakan bahasa yang lebih ringkas dan berkesan.

Atas ialah kandungan terperinci Membina aplikasi desktop silang platform dengan nw.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!