Lösungen für die Verteilung von HTML5-Anwendungen als Desktop-Anwendungen? [geschlossen]


141

Welche Lösungen gibt es für die Verteilung einer HTML5-basierten Desktop-Anwendung?

Ich möchte meine HTML5-App als eigenständige Desktop-Anwendung unter Windows, OSX und Linux verteilen können. Ich möchte, dass Benutzer auf die Verknüpfung meines App-Symbols doppelklicken können, um mein Programm auszuführen.

Ich möchte nicht, dass das Browserfenster angezeigt wird, sondern nur meine App. Ist das möglich?


4
Chrome + Vollbild funktioniert gut
PostMan

2
Chrome unter Windows verfügt über die Option "Anwendungsverknüpfung erstellen" aus dem Schraubenschlüsselmenü. Auf dem Desktop wird ein Link erstellt, der das Standardfenster ohne Adressleiste öffnet.
6502

3
Haben Sie andere Anforderungen, wie den Zugriff auf lokale Dateien oder andere Dinge, die normalerweise im Browser nicht möglich sind?
Tiemen

76
Kann mir jemand erklären, warum diese Frage als nicht konstruktiv markiert ist ? Er fragt, ob es eine Plattform gibt, die Antwort ist objektiv: Ja . Und könnte mit einigen Möglichkeiten "implementiert" werden, warum also wirklich so markiert ist.
Francesco Belladonna

10
Diese Frage ist sowohl relevant als auch aktuell - wie dieser aktuelle Artikel zeigt: clintberry.com/2013/html5-apps-desktop-2013 .
Per Quested Aronsson

Antworten:


75

HTML5 Apps im Jahr 2014

Rahmen von Chrome / Webkit

  • Elektron (ehemalige Atom Shell)

    Electron ist eine von GitHub entwickelte Open Source-Bibliothek zum Erstellen plattformübergreifender Desktop-Anwendungen mit HTML, CSS und JavaScript. Electron erreicht dies, indem Chromium und Node.js zu einer einzigen Laufzeit kombiniert werden und Apps für Mac, Windows und Linux gepackt werden können. ( Quelle )

    Die Leute bei github verwenden dies, um ihren Code-Editor Atom als App bereitzustellen . Es hat eine dokumentierte API und einen Hilfekanal in den offiziellen Atomforen.

  • Node-Webkit , der minimalste Ansatz

    Node-Webkit ist eine App-Laufzeit, die auf Chromium und node.js basiert. Mit Node-Webkit können Sie native Apps in HTML und JavaScript schreiben. Außerdem können Sie Node.js-Module direkt aus dem DOM aufrufen und eine neue Methode zum Schreiben nativer Anwendungen mit allen Webtechnologien aktivieren.

    Intel steckt dahinter (?). Mir wurde gesagt, dass es an den Rändern sehr rau ist.

  • Brackets Shell , die Sandbox des Adobes-Code-Editors (und Basis von Adobe Edge)

    Hinweis: Die Brackets-Shell wird nur für das Brackets-Projekt verwaltet. Obwohl einige Leute definitiv Erfolg damit hatten, es als App-Shell für andere Projekte zu verwenden, bieten wir keine offizielle Unterstützung dafür und wir haben nicht viel Arbeit geleistet, um die App-Shell einfach wiederverwendbar zu machen. Viele Leute werden es wahrscheinlich einfacher finden, ein Projekt wie das Node-Webkit zu verwenden, das von Natur aus allgemeiner ist.

    sagt die Readme, aber es gibt ziemlich viele Leute da draußen, die es trotzdem getan haben.

Frameworks + Tools

  • Adobe AIR , wie eine andere Antwort vorschlug.

    Mit der Adobe® AIR®-Laufzeit können Entwickler denselben Code in native Apps für Windows- und Mac OS-Desktops sowie für iPhone, iPad, Kindle Fire, Nook Tablet und andere Android ™ -Geräte packen und so die mobilen App-Stores für über 500 Millionen erreichen Geräte.

  • Sencha ist ein Unternehmen, das Tools für App-Entwickler verkauft, einschließlich der Entwicklung und Verteilung von HTML5-Apps.

Inaktive Ansätze


7
Mozilla Prism ist jetzt inaktiv
Harshith JV

8
Nur ein Kopf hoch mit Adobe Air. Wenn Sie eine JavaScript-Vorlagenlösung (z. B. Lenker, Schnurrbart) verwenden möchten, funktionieren die meisten von ihnen aufgrund von Sicherheitsfehlern im Zusammenhang mit den neuen JavaScript-Aufrufen von function () nicht.
James Parker

danke für diesen sehr nützlichen Hinweis! Leider hatte ich noch nicht die Möglichkeit, eines der oben aufgeführten Beispiele zu testen. Ich habe sie lediglich durch Recherchen gesammelt.
Samuel Herzog

Sie können Ihre Anwendung in der Sicherheits-Sandbox übergroß ausführen. Ich hatte dieses Problem auch mit dem KendoUI-Template-System und konnte es überwinden. So oder so wechselte ich von Air zu Titanium Desktop, suche aber derzeit nach Alternativen, da die Windows-Webkit-Implementierung von TD ernsthafte Probleme mit Formularelementen (Eingaben / Dropdowns) aufweist ).
Vasco Costa

Sie können Sentenza Desktop in Betracht ziehen, um eine HTML5 / CSS3 / JS-Webanwendung in eine Mac OS X-Anwendung (.app) zu packen. Eine API-Bibliothek ist ebenfalls verfügbar. Es sind keine Frameworks erforderlich (wie Adobe Air oder TideSDK). Mac App Store-Bereitstellung wird unterstützt.
Beny

15

Sie können AppJS verwenden, das Nodejs und Chromium verwendet, um HTML5-Apps für den Desktop zu erstellen. Probieren Sie es aus: http://appjs.com Github Link: https://github.com/appjs/appjs


1
Ähnlich ist das Node-Webkit, es hat einige nette Funktionen wie das Kompilieren Ihres Javascript mit v8 Snapshot. link
pillar15

Abschreibungshinweis Das AppJS-Projekt wurde seit einigen Jahren nicht mehr aktiv entwickelt. Bitte überprüfen Sie stattdessen NW.js oder Electron.
Aaron Franke

10

Vielleicht möchten Sie sich XULRunner von Mozilla ansehen. Auf einer Höhe von 10000 Fuß ist der FireFox-Browser eine XULRunner-Anwendung (offensichtlich eine sehr ausgefeilte, aber ...). Mit XULRunner können Sie jedoch Javascript und XML zum Erstellen von Anwendungen verwenden. Das Browserfenster ist eine dieser Komponenten. Sobald Sie Ihr Basisfenster eingerichtet haben, können Sie wahrscheinlich so ziemlich alles tun, was Sie möchten.

Abhängig von der Komplexität Ihrer Anwendung gibt es auch verschiedene "Widget" -Frameworks (wie Dashboard auf dem Mac, Yahoo Widgets, Windows-Gadgets), bei denen es sich im Grunde auch um HTML-Laufzeiten handelt.


2
Ich kann XULRunner nur empfehlen. Für das, was Sie beschreiben, ist es ideal und gut dokumentiert. Chrome würde wohl auch genauso gut funktionieren, aber ich habe es nicht untersucht.
Jared Farrish

XUL Runner ist ein fantastisches Framework und sehr flexibel, aber nicht gut dokumentiert, wie Sie sagen. Ein Neuling muss viel leiden, um die Sache in Gang zu bringen.
Esafwan

10

Schauen Sie sich auf jeden Fall Titan an . Erst heute habe ich eine funktionierende HTML5-App genommen und konnte sie mit ein paar geringfügigen Änderungen in Titanium ablegen und für Mac, Windows und Linux verpacken.

Außerdem werden PHP, Python und Ruby unterstützt, wenn Ihre App eine "serverseitige" Verarbeitung erfordert.


Wenn Sie eine vorgefertigte Lösung wünschen, ist dies meiner Meinung nach die Antwort.
23:53 dylanisiert

15
Meine Erfahrungen mit Titan waren schrecklich - es sieht von außen großartig aus, ist aber voller Fehler und wird zur Hölle, wenn man es sehr schnell benutzt. Ich kann es nicht empfehlen.
Damian

3
Ich dachte auch, dass dies eine gute Wahl wäre, aber: 1) Ich konnte es nicht dazu bringen, ein einfaches "neues Projekt erstellen / ausführen" unter Linux (Ubuntu 11.10) auszuführen. 2) Titanium Desktop wird in ein Community-gesteuertes Projekt umgewandelt ( das heißt, wenn jemand seinen Code nicht nimmt, wird er sterben)
Luis Lobo Borobia

4
Ich weiß, dass dies alt ist, aber ich habe gerade diese Antwort gelesen und einige Zeit damit verbracht, herauszufinden, dass Titanium Desktop tot ist. Also keine Option mehr. Übrigens denke ich darüber nach, etwas mit eingebettetem c # und Chrom zu erstellen, wie es Github in seinem Windows-Tool getan hat
NicoGranelli

6
Titanium Desktop wurde TideSDK tidesdk.org
Peacemoon



3

Mit Adobe AIR können Sie hauptsächlich in HTML, CSS und JavaScript arbeiten und gleichzeitig eine Desktop-Anwendung bereitstellen. (Vorsichtsmaßnahme: Ich habe es selbst nicht benutzt.)


1
Der in AIR integrierte Browser ist alt und wird nie aktualisiert, daher empfehle ich ihn nicht (ich habe ihn in mehr Projekten verwendet)
simion314

@ simion314: Ich bin neugierig, da AIR ein laufendes Projekt ist, warum Sie sagen, dass der Browser darin "nie" aktualisiert wird.
TJ Crowder

siehe forums.adobe.com/message/6177332 Adobe arbeitet mehr für den mobilen Teil von AIR. Auf Mobilgeräten verwenden sie StageWebView und aktualisieren die Webkit-Engine in AIR nicht. Die stagewebview beschränkt sich nur auf die Anzeige von Inhalten, beispielsweise wenn Sie dies tun Versuchen Sie, eine komplexe Javascript-Bibliothek oder -Anwendung wie ckeditor 4 zu laden. Dies schlägt aufgrund einiger Inkompatibilitäten mit der Webkit-Engine fehl (einige hängen mit dem Sandboxing zusammen, aber nicht alle)
simion314


2

Hmmm ... eine virtuelle Maschine für HTML5 / CSS / JS ... klingt wie ein Browser. :) :)

Vielleicht würde Adobe AIR den Trick machen, weil es auf der Idee basiert, umfangreiche Internet-Apps auf den Desktop zu bringen. Ich habe es jedoch nie benutzt.

Eine Möglichkeit besteht darin, eine sehr einfache Desktop-App zu entwickeln, die eine vorgefertigte Webbrowser-Steuerung verwendet (z. B. wenn Sie für einen Mac entwickeln, legen Sie einfach eine WebView im Fenster ab und fügen Sie einen grundlegenden Code hinzu, um Ihr HTML in die App zu laden Anfang).





1

Derzeit lautet die Antwort, dass es für jede Plattform unterschiedliche Lösungen gibt.

  • Für MAC OSX erstellen Sie eine Cocoa Desktop App mit einer UIWebView
  • Für Windows erstellen Sie eine .NET-Desktop-App mit einer Browserkomponente.

Ich denke, als ein Windows mit einer Browserkomponente zu verwenden, hat mehrere Einschränkungen (kann auf Dateisystem zugreifen oder Popup anzeigen?), Kennen Sie ein Projekt als diesen Ansatz zu verwenden? ...
Clagccs

Beste Antwort und niemand erkennt es an. Im Hintergrund verwenden meist alle Hybridlösungen eine Webview-Komponente, die sich wie ein Browser verhält. Dies ist alles, was Sie brauchen, eine Webansicht erstellen, HTML / CSS / JS und Voila laden!
Dan Ochiana

1

Sie können einen eingebetteten Server wie Tomcat oder vielleicht Apache verwenden.

Ich benutze Tomcat für eine vollständige Java-Webanwendung. Im Browser ausführen, aber die Anwendung muss installiert sein. Die Verknüpfung zum Starten der App, Starten des Dienstes und Öffnen des Browsers.

Oder versuchen Sie es mit einem Webkit


1

Ein bisschen spät, aber Sie können eine tragbare Version von Google Chrome verwenden und dann eine kleine Windows-App erstellen, um sie zu installieren, und eine .ink-Verknüpfung zu ihrem --kiosk- und App-Modus erstellen.
Ein bisschen wie Chrome-Anwendungsverknüpfungen, aber wo Sie Chrome für sie installieren.


1

Wenn Sie es nur für Windows benötigen, sollten Sie HTML-Anwendungen (HTA) in Betracht ziehen. Es ist seit IE 5 (über 10 Jahre) Teil von Internet Explorer.

Kein Server erforderlich, vollständige HTML-Formatierung, vollständiger Zugriff auf lokale Ressourcen (sogar COM / USB-Anschlüsse), fantastisch. Auch mit Visual Studio einfach zu debuggen, binden Sie einfach an MSHTA.exe

Sie können HTML 5 in HTAs mit dem folgenden Meta-Tag aktivieren:

<!-- enable html5 features --> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>

+1 Suchen Sie auch nach Linux- und Mac-Unterstützung :)
Bhargav Nanekalva
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.