nw.js: un cadre pour créer des applications natives utilisant la technologie Web
nw.js est un framework puissant qui permet aux développeurs de créer des applications natives à l'aide de technologies Web telles que HTML, JavaScript et CSS pour générer des applications hybrides qui présentent des avantages importants par rapport aux applications Web ordinaires.
Par rapport à un autre cadre d'application hybride, Electron, NW.JS a les avantages suivants: Prise en charge de Chrome. et intégrer Node.js chez les travailleurs Web.
Le processus de création d'une application hybride à l'aide de NW.js comprend la configuration de la structure du projet, la création de fichiers manifestes et la création d'une vue principale. Vous pouvez vous référer à l'exemple d'application sur GitHub.
nw.js peut être développé et produit et installé à l'aide de packages nw et nw-builder respectivement. Le processus d'emballage et de distribution peut être simplifié en ajoutant des scripts NPM au fichier package.json.
Les tests et le débogage des applications NW.JS peuvent être effectués manuellement parce que NW.JS est basé sur le chrome. Les tests d'unité automatisés peuvent être implémentés à l'aide du plug-in Launcher NW.JS de Karma (tels que Karma-Nodewebkit-Launcher).
Cet article a été examiné par Tim Severien et Joan Yin. Merci à tous les pairs examinateurs de SitePoint pour avoir rendu le contenu de SitePoint parfait!
nw.js est un cadre pour créer des applications natives à l'aide de technologies Web telles que HTML, JavaScript et CSS. Autrement dit, vous utilisez des processus normaux pour développer des applications Web. À la fin du processus, vous exécutez un générateur qui compile tout dans une application native, et l'application affiche votre application Web comme un navigateur. Ces applications sont appelées «applications hybrides».
Les applications hybrides sont excellentes non seulement parce qu'elles sont écrites dans des langues que vous connaissez déjà (HTML, JavaScript et CSS), mais aussi parce qu'elles présentent les avantages importants suivants par rapport aux applications Web régulières:
Ils fournissent également des API personnalisées, qui apportent les avantages suivants:
Ça a l'air bien? Alors commençons. Dans cet article, nous allons réellement découvrir NW.JS et apprendre à créer des applications hybrides. Vous pouvez trouver des exemples d'applications construites en utilisant les instructions de cet article sur GitHub.
Tout d'abord, une chose à mentionner: NW.JS n'est pas le seul cadre pour les applications hybrides. Un autre concurrent s'appelle Electron. Il a été lancé en 2013, deux ans derrière NW.JS, mais il est rapidement devenu bien connu parce qu'il venait de Github. Maintenant, vous pouvez être intéressé par la différence entre eux. Voici les avantages de NW.JS par rapport à l'électron:
Cependant, Electron a également certains avantages à mentionner:
Il y a une autre différence fondamentale. Les applications NW.JS spécifient leur point d'entrée sous forme de fichiers HTML. Ce fichier HTML sera ouvert directement dans l'interface graphique.
En revanche, l'application Electron spécifie un fichier JavaScript comme point d'entrée. Ce fichier JavaScript est ouvert dans un processus principal distinct, et le fichier HTML peut ensuite être ouvert dans l'interface graphique. Cela signifie qu'en théorie, vous pouvez exécuter des applications électroniques sans GUI. De plus, la fermeture de l'interface graphique ne ferme pas le processus principal; vous devez le terminer manuellement en appelant la méthode API.
tandis que l'électron ouvre la porte des applications de bureau écrites en javascript et sans GUI, les applications NW.JS peuvent être plus faciles à configurer si vous souhaitez simplement afficher des applications basées sur HTML.
Remarque: Si vous aimez vraiment les avantages de l'électron, consultez l'article récent de SitePoint sur la création d'applications de bureau avec Electron.
Commençons à créer des applications qui seront compilées dans des applications natives plus tard. Puisqu'il existe de nombreuses façons de configurer une application Web - en utilisant divers langages JS (TypeScript, CoffeeScript, etc.), les chargeurs de modules (requirejs, webpack, systemjs, etc.), les cadres (angularjs, react, vue.js, etc.) et des préprocesseurs (SCSS, moins, HAML, etc.) - et tout le monde a ses propres préférences, nous utilisons uniquement les technologies de base HTML, CSS et JS (ES6 Standard).
Il n'y a pas de chauffeur NW.JS (Démarrer le projet) pour aucun paramètre. Tout cela est conçu pour un cadre spécifique, un chargeur de module ou un préprocesseur. Nous implémenterons donc une application NW.JS simple à partir de zéro nous-mêmes. Il est facile à comprendre et vous pouvez facilement le personnaliser plus tard à vos besoins, ou passer à la buissier.
Tout d'abord, nous devons créer notre structure de projet et notre fichier:
<code>nw.js-example/ ├── src/ │ ├── app/ │ │ └── main.js │ ├── assets/ │ │ └── icon.png │ ├── styles/ │ │ └── common.css │ ├── views/ │ │ └── main.html │ └── package.json └── package.json</code>
Instructions:
Maintenant que nous avons créé la structure du projet et les fichiers, nous pouvons commencer à utiliser le fichier NW.js Manifest Src / Package.json. Selon la documentation, le fichier ne nécessite essentiellement que deux propriétés, le nom (nom de l'application) et le principal (chemin vers le fichier html utilisé comme point d'entrée). Mais nous avons ajouté plus d'informations, telles que le chemin de l'icône de la fenêtre, ainsi que la largeur et la hauteur minimales, pour s'assurer que l'utilisateur ne voit rien d'inattendu:
<code>{
"name":"nw.js-example",
"main":"views/main.html",
"window":{
"min_width":400,
"min_height":400,
"icon":"assets/icon.png"
}
}</code>c'est tout! L'application ouvrira plus tard Src / Views / Main.html au démarrage car le chemin principal est relatif au fichier manifeste.
À ce stade, nous pouvons rédiger une application à faire. Mais nous voulons nous concentrer sur NW.JS et ses fonctionnalités. Pour cela, je préfère laisser vous décider ce que fait l'application. J'ai créé un exemple de projet NW.JS-Examples sur GitHub pour démontrer plusieurs fonctionnalités NW.JS telles que Node.js Intégration et Access Clipboard. N'hésitez pas à l'essayer dans votre application. Mais vous pouvez également utiliser d'autres contenus.
Pour tout ce que vous décidez, vous devez au moins créer le fichier src / vues / main.html car c'est le point d'entrée de l'application. Cela pourrait ressembler à ceci:
<code>nw.js-example/ ├── src/ │ ├── app/ │ │ └── main.js │ ├── assets/ │ │ └── icon.png │ ├── styles/ │ │ └── common.css │ ├── views/ │ │ └── main.html │ └── package.json └── package.json</code>
Dans une application réelle, vous pouvez avoir plusieurs autres fichiers de vue et les charger à l'aide d'Ajax. Pour plus de simplicité, vous pouvez également créer des hyperliens natifs et référence à d'autres fichiers HTML. Par exemple:
<code>{
"name":"nw.js-example",
"main":"views/main.html",
"window":{
"min_width":400,
"min_height":400,
"icon":"assets/icon.png"
}
}</code>Ensuite, créez le https://www.php.cn/link/58c1dbad4977b4c106bca8015477757e fichier en src / vues /. C'est ainsi que je le fais dans l'exemple de projet.
Nous avons maintenant créé un projet NW.JS, y compris les manifestes et la vue principale. Nous avons enfin besoin d'un moyen d'exécuter NW.JS directement sur notre machine de développement pour le développement et d'implémenter un processus de construction qui génère des applications natives pour plusieurs systèmes d'exploitation.
Pour ce faire, nous avons besoin des deux packages suivants:
Puisqu'ils ne sont pas liés à notre application réelle (ils ne sont utilisés qu'aux fins de développement et des builds de production), nous les créons comme DevDependces dans le deuxième package.json dans le dossier racine, ainsi que les champs de nom et de version requis:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>NW.js-example | main</title>
<link rel="stylesheet" href="../styles/common.css">
</head>
<body>
<h1>Hello World :-)</h1>
<🎜>
</body>
</html>Maintenant, nous avons juste besoin d'exécuter la commande suivante dans le dossier racine du projet pour installer DevDependces:
<a href="https://www.php.cn/link/58c1dbad4977b4c106bca8015477757e">Something</a>
terminé! Construisons.
Pour simplifier l'emballage, nous ajoutons des scripts NPM à notre fichier package.json. Ils nous permettent d'exécuter des commandes CLI, définies à droite et en utilisant NPM exécuter à gauche à l'aide de raccourcis. Nous avons ajouté deux scripts, un pour le développement et un pour la production:
{
"name":"nw.js-example",
"version":"1.0.0",
"devDependencies":{
"nw":"^0.18.2",
"nw-builder":"^3.1.2"
}
}Pour démarrer directement l'application NW.JS, il suffit d'exécuter:
$ npm install
Ce raccourci appellera la commande que nous avons définie dans les scripts sous DEV, en utilisant le package NW. Une nouvelle fenêtre doit être ouverte directement sur votre machine de développement, montrant Src / Views / Main.html.
Les builds de production utiliseront NW-Builder, qui prend en charge la sortie de Windows, Linux et MacOS. Dans notre exemple, nous avons construit un package pour toutes ces plates-formes, y compris des versions 32 bits et 64 bits. Pour MacOS, actuellement, seuls 32 bits peuvent être construits en mode ancienne version. (Voir cette question sur Github.) Ainsi, seul 64 bits est construit.
Pour exécuter notre construction de production, il suffit de courir:
{
"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/"
}
}Comme pour exécuter NW.JS directement, cela utilisera les commandes CLI que nous avons définies dans les scripts.
Cela prendra un certain temps ...
Une fois terminé, vérifiez votre dossier DIST /. Cela devrait ressembler à ceci:
$ npm run dev
Génial, nous avons presque fini!
Puisque NW.JS est basé sur le chrome, les tests manuels sont aussi simples que dans Chrome. Lorsque vous rencontrez une erreur (visuel ou fonctionnel), vous pouvez ouvrir l'outil de développement à l'aide du raccourci clavier F12 ou par programme:
<code>nw.js-example/ ├── src/ │ ├── app/ │ │ └── main.js │ ├── assets/ │ │ └── icon.png │ ├── styles/ │ │ └── common.css │ ├── views/ │ │ └── main.html │ └── package.json └── package.json</code>
Veuillez noter que cela nécessite un style de construction SDK. Si vous souhaitez désactiver les outils de développeur en production, vous pouvez construire NW.JS dans un style différent ou désactiver les événements F12.
Les tests unitaires automatisés (heureusement) sont largement utilisés pour s'assurer qu'il fonctionne correctement dans diverses implémentations sans avoir besoin de tests manuels continus.
Si votre application n'utilise pas de méthodes API spécifiques à NW.JS, vous pouvez théoriquement conserver vos workflows d'applications Web habituels - par exemple, en utilisant Karma comme coureur de spécification, combiné avec Jasmine comme cadre de test.
Cependant, si vous utilisez des méthodes API spécifiques à NW.JS, vous devez exécuter les tests dans votre application NW.JS pour vous assurer que les méthodes API sont définies. Une façon consiste à utiliser le plugin NW.JS Launcher de Karma, comme Karma-Nodewebkit-Launcher. Il fonctionne de la même manière que n'importe quel autre plugin de lanceur de navigateur dans Karma: il ouvre l'application dans le conteneur NW.JS pour effectuer un chèque, puis la ferme automatiquement.
Cependant, comme NW.JS n'est pas sans tête (contrairement aux Phantomjs, etc.), il nécessite toujours un affichage physique. Cela signifie qu'il est impossible d'exécuter des tests sur un serveur CLI pur. Heureusement, dans ce cas, vous pouvez utiliser XVFB pour imiter l'affichage. Cela fonctionne sur Travis CI, par exemple. Pour Jenkins, vous devez installer le plugin XVFB. Veuillez consulter cette question sur GitHub pour plus d'informations.
J'espère que cet article vous donnera une compréhension approfondie des avantages et des cas d'utilisation de NW.Js. Il existe de nombreuses raisons pour lesquelles l'utilisation d'une application hybride est meilleure que la distribution d'un dossier .zip contenant des fichiers HTML (puis exécuté à partir du système de fichiers). NW.JS peut également être utilisé en remplacement des applications natives, car vous n'avez pas besoin de vous concentrer sur des GUIS complexes, et vous avez beaucoup de fonctionnalités intégrées comme les lecteurs vidéo. Étant donné que vous pouvez détecter l'environnement, vous pouvez également développer une application qui peut être exécutée sur un serveur Web normal et une machine client à l'aide de NW.JS. Avec quelques astuces, et grâce au puissant moteur Chromium, les utilisateurs peuvent difficilement ressentir la différence par rapport aux applications natives.
Lors de la création d'un nouveau projet NW.JS, déterminez d'abord quel framework, chargeur de modules et préprocesseur que vous souhaitez utiliser - en détendant sur ce que vous connaissez - ou démarrez directement à partir de zéro. Après avoir pris ces décisions, vous pouvez trouver NW.JS Playplate qui répond à vos besoins. S'il n'y a pas de chauffeur approprié, vous pouvez utiliser une application basée sur ce tutoriel comme base.
Quel est votre modèle préféré? Ou quelles technologies choisissez-vous pour développer des applications NW.JS? Est-il efficace d'utiliser l'exemple NW.JS au lieu de l'implémentation de l'application de tâches dans cet article? Veuillez me le faire savoir dans les commentaires.
nw.js est un outil puissant pour développer des applications de bureau multiplateforme. Contrairement à d'autres cadres, NW.JS permet aux développeurs d'écrire du code dans HTML, CSS et JavaScript, qui sont couramment utilisés dans le développement Web. Cela permet aux développeurs Web de passer plus facilement au développement d'applications de bureau. De plus, NW.JS a une fonctionnalité unique qui permet un accès direct à l'API Node.js dans le DOM, permettant des fonctionnalités plus complexes et puissantes.
Pour commencer NW.JS, vous devez d'abord le télécharger et l'installer à partir du site officiel. Une fois l'installation terminée, vous pouvez créer un nouveau répertoire de projet, ajouter vos fichiers HTML, CSS et JavaScript, puis exécuter votre application à l'aide de l'exécutable NW.JS. La documentation NW.JS fournit un guide détaillé sur la façon de commencer.
Oui, vous pouvez utiliser NW.JS pour des projets commerciaux. NW.JS est open source et disponible gratuitement, ce qui en fait une solution rentable pour développer des applications de bureau multiplateforme. Cependant, il convient de noter que tout module tiers utilisé peut avoir ses propres exigences de licence.
Emballage et distribution des applications NW.JS implique la création de fichiers exécutables autonomes qui peuvent s'exécuter sur la plate-forme cible. Cela peut être fait à l'aide d'outils tels que NW-Builder ou WebPack. Une fois emballé, l'application peut être distribuée via divers canaux, tels que les téléchargements directs ou les magasins d'applications.
nw.js prend en charge diverses plates-formes. Il peut être utilisé pour développer des applications pour Windows, Mac et Linux. Ce support multiplateforme est l'un des principaux avantages de l'utilisation de NW.js car il permet aux développeurs d'écrire du code en même temps et d'exécuter sur plusieurs plates-formes.
Les applications NW.JS de débogage sont similaires aux applications Web de débogage. Vous pouvez déboguer à l'aide d'outils de développeur Chrome fourni par NW.JS Bundle. Ces outils fournissent de nombreuses fonctions pour vérifier et déboguer le code.
Oui, l'une des principales caractéristiques de NW.JS est la possibilité d'utiliser le module Node.js directement dans le DOM. Cela permet d'implémenter des fonctionnalités plus complexes et puissantes dans votre application. Vous pouvez utiliser l'un des milliers de modules disponibles sur NPM dans votre application NW.JS.
La mise à jour de l'application NW.JS consiste à remplacer l'ancienne version de l'application par la nouvelle version de l'application. Cela peut être fait manuellement par l'utilisateur, ou vous pouvez utiliser des modules tels que NW-UpDater pour implémenter des mises à jour automatiques dans l'application.
Oui, NW.js permet un accès direct aux API natifs via Node.js. Cela signifie que vous pouvez utiliser des fonctionnalités natives telles que les systèmes de fichiers, les réseaux, les appareils, etc. dans votre application. Il s'agit d'un avantage clé de NW.JS par rapport aux technologies Web traditionnelles.
L'optimisation des performances des applications NW.JS implique diverses technologies telles que la minimisation et la connexion des fichiers JavaScript, l'optimisation d'images et l'utilisation d'algorithmes et de structures de données efficaces. De plus, vous pouvez utiliser des outils de développeur Chrome pour analyser et déboguer les problèmes de performances.
Cette sortie révisée maintient le placement et le format d'image d'origine, reformatique des phrases et des paragraphes pour l'originalité tout en préservant le sens central et utilise un langage plus concis et percutant.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
