web-dev-qa-db-ger.com

Lösungen zum Verteilen von HTML5-Anwendungen als Desktop-Anwendungen?

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 vertreiben 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?

140
foreyez

HTML5 Apps im Jahr 2014

Rahmen von Chrome/Webkit

  • Elektron (früher Atom Shell)

    Electron ist eine Open-Source-Bibliothek, die von GitHub entwickelt wurde, um plattformübergreifende Desktop-Anwendungen mit HTML, CSS und JavaScript zu erstellen. Electron erreicht dies durch die Kombination von Chromium und Node.js in einer einzigen Laufzeit und Apps können für Mac, Windows und Linux gepackt werden. ( Quelle )

    Die Leute bei Github verwenden dies, um ihr Code-Editor Atom als App bereitzustellen. Es hat eine dokumentierte API und einen Hilfekanal in den offiziellen atom Foren.

  • 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. Sie können damit auch Node.js-Module direkt aus dem DOM aufrufen und auf neue Weise native Anwendungen mit allen Webtechnologien schreiben.

    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 zur Verwendung durch das Brackets-Projekt verwaltet. Obwohl einige Leute definitiv Erfolg damit hatten, es als App-Shell für andere Projekte zu nutzen, bieten wir keinen offiziellen Support dafür an und haben nicht viel Arbeit geleistet, um die App-Shell einfach wiederverwendbar zu machen. Viele Menschen werden es wahrscheinlich einfacher finden, ein Projekt wie Node-Webkit zu verwenden, das von Natur aus allgemeiner ist.

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

Frameworks + Tools

  • Adobe AIR , wie eine andere Antwort nahelegt.

    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 erreichen so die mobilen App Stores für über 500 Millionen Geräte.

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

Inaktive Ansätze

73
Samuel Herzog

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

14
Morteza Milani

Auf jeden Fall auschecken Titan . Erst heute habe ich eine funktionierende HTML5-App genommen und konnte sie mit ein paar kleinen Änderungen in Titanium ablegen und für Mac, Windows und Linux packen.

Und es unterstützt auch PHP, Python und Ruby wenn Ihre App "serverseitige" Verarbeitung erfordert.

10
ggutenberg

Vielleicht möchten Sie sich XULRunner von Mozilla ansehen. Auf einer Höhe von 300 Metern 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, und das Browserfenster ist eine dieser Komponenten. Wenn Sie also Ihr grundlegendes Fenster geöffnet 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), die im Grunde auch HTML-Laufzeiten sind.

10
Will Hartung

chrome kann tun, was Prisma tut. Siehe - Extras -> Anwendungsverknüpfung erstellen

5
user822746

Sie können Phonegap ausprobieren, es gibt einen Windows Desktop Port: https://github.com/davejohnson/phonegap-windows

Ich habe den Mac-Port ausprobiert, er hat gut funktioniert. Ich habe die Windows-Version noch nicht ausprobiert.

4

Adobe AIR soll Sie hauptsächlich in HTML, CSS und JavaScript arbeiten lassen, während Sie eine Desktop-Anwendung bereitstellen. (Warnung: Ich habe es selbst nicht benutzt.)

3
T.J. Crowder

[Nur unter Windows] Versuchen Sie es mit einem HTML-Anwendungsansatz (HTA). Speichern Sie einfach Ihre HTML-Datei mit der Erweiterung .hta. Es bietet auch einige zusätzliche Einstellungen, um das Browserfenster zu entfernen, das Vertrauensniveau für die App festzulegen usw. Lesen Sie hier mehr: http://en.wikipedia.org/wiki/HTML_Application und hier - http://technet.Microsoft.com/en-ca/scriptcenter/dd742317.aspx

3
Vik

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.

Sie können eine sehr einfache Desktop-App entwickeln, die eine Art vorgefertigtes Webbrowser-Steuerelement verwendet (z. B. wenn Sie für einen Mac entwickeln, legen Sie einfach eine WebView im Fenster ab und fügen Sie einen Basiscode hinzu, um Ihre HTML-Datei in die App zu laden Anfang).

2
Jeff

Überprüfen Sie dieses neue Projekt von Mozilla. Sie können auch Desktop-Apps erstellen: https://developer.mozilla.org/en/Apps

Details hier: http://hacks.mozilla.org/2012/05/desktop-apps-with-html5-and-the-mozilla-web-runtime/

2
Peacemoon

Sie können einen eingebetteten Server wie Tomcat oder 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 verwenden Sie das Webkit

1
Bruno Tafarelo
1
athanis

Wenn Sie es nur für Windows benötigen, sollten Sie HTML-Anwendungen (HTA) in Betracht ziehen. Seit IE 5 (10+ Jahre)) ist es Teil des Internet Explorers.

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

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
William Walseth

Für Mobiltelefone können Sie PhoneGap http://www.phonegap.com/ verwenden. Wahrscheinlich können Sie es mit etwas mehr Codierung für den Desktop verwenden.

1
user977828

Derzeit lautet die Antwort: Es gibt unterschiedliche Lösungen für jede Plattform.

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

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 Verknüpfung mit .ink zu ihrem --kiosk- und App-Modus erstellen.
Ein bisschen wie chrome Anwendungsverknüpfungen, aber wo Sie chrome für sie installieren.

1
Frank