it-swarm.com.de

Wie konvertiere ich eine Webanwendung in eine ausführbare Desktop-Datei?

Ich habe eine HTML-Anwendung mit AngularJS/jQuery/Bootstrap mit der API AJAX REST erstellt.
Ist es möglich, ein ausführbares/Installationsprogramm für das Windows-Betriebssystem zu erstellen?

Ohne Drittanbieter-Software sollte sie wie eine native Anwendung aussehen, jedoch als HTML.
Zum Beispiel hat Slack Messenger eine Web/Mac/Windows-Version und sie sehen gleich aus.

Irgendwelche Ideen?

// UPD

Ich brauche wahrscheinlich einen Wrapper (Webview), aber ich benötige alle Funktionen für EcmaScript5/CSS3.

21
Miraage

Elektron ist der einfachste Weg:

1. Elektron installieren

2. Erstellen und Bearbeiten von main.js:

const electron = require('electron');
const { app, BrowserWindow } = electron;

let mainWindow;

app.on('ready', () => {
    mainWindow = new BrowserWindow({
        width: 1000,
        height: 700
    });

    mainWindow.setTitle('title of the desktop app');
    mainWindow.loadURL('http://www.yourwebpage.com');

    mainWindow.on('closed', () => {
        mainWindow = null;
    });
});

3. Desktop-App ausführen:

electron main.js

Um die App zu erstellen, verwenden Sie einen Builder, z.

Hoffe das hilft dir!

16
Aral Roca

Ich selbst habe für eine Weile nach einer Rundumlösung gesucht. Ich habe alles aus TideSDK, AppJS, Appcelerator Titanium, nativem Code in VB.NET, XCode, Python, C++, Electron, Node-Webkit usw. ausprobiert.

Hinweis Electron ist Nice, läuft jedoch nur auf 64-Bit-Prozessoren. Knoten-Webkit ist also gut, wenn Sie Ihre App auf 32-Bit-Prozessoren ausführen möchten. 

Also beschloss ich, meine eigene Open Source-Lösung namens WebDGap zu erstellen.

Derzeit läuft WebDGap unter Windows, Linux, Mac OS X, Google Chrome und als Webanwendung!

Schauen Sie sich das How To Video an , um zu lernen, wie man die App natürlich benutzt.

Hier ist ein Screenshot .The WebDGap Application

Da Sie bereits ein Mac-Benutzer sind, können Sie Ihre exportierte App in einer .app-Mac-Datei zusammenführen. Dies kann mit Automator (und ein wenig Shell-Scripting) durchgeführt werden.

Es gibt auch einen Kodierungsspielplatz für mobile Benutzer, der diese Funktion namens kodeWeave enthält.

Hier ist ein Tic-Tac-Toe-Spiel, das ich als Mac-App exportieren werde:  kodeWeave App

Jetzt läuft die Web-App als native Mac-Anwendung!  Tic-Tac-Toe is now running as a Mac App

4

Sie müssten Ihre App ein wenig umschreiben, aber Apache Cordova unterstützt die Bereitstellung unter Windows:

https://msopentech.com/blog/2014/09/25/Apache-cordova-gains-windows-8-1-and-windows-phone-8-1-support-2-2/

2
Robert Moskal

(Vollständige Offenlegung, ich bin der Gründer von ToDesktop , ich werde versuchen, hier objektiv und unvoreingenommen zu sein.)

Wie in der Informatik üblich lautet die Antwort "es kommt darauf an"!

Die erste Frage, die Sie sich stellen sollten, lautet: Von wem wird die Desktop-App verwendet? Nur Sie ? Oder verteilen Sie die App an Kunden ? Weil diese beiden Segmente sehr unterschiedliche Bedürfnisse haben.

Nur Sie

Hier gibt es viele Optionen (in keiner bestimmten Reihenfolge):

  1. Nativefier - Die naheliegende Option. Viele Konfigurationsoptionen, viele Mitwirkende, Open Source und regelmäßig aktualisiert. Dies sollte wahrscheinlich die Standardoption sein, wenn Sie eine App nur für sich selbst erstellen möchten.
  2. WebDGap - Dies ist ein schönes Projekt, aber es ist ein bisschen alt und "seit dem 13. April 2018 ist WebDGap kein aktives Projekt mehr." Es sollte auch beachtet werden, dass dies auf einer alten Version von Node-Webkit und nicht auf Electron basiert.
  3. Web2Desk - Eine großartige Option, wenn Sie nicht mit der Befehlszeile herumspielen möchten. Es verwendet Nativefier unter der Haube. Es ist kostenlos mit einem Begrüßungsbildschirm oder $ 19 bei entferntem Begrüßungsbildschirm.
  4. Do-it-yourself mit Electron - Die Grundlagen wurden ziemlich gut abgedeckt in dieser früheren Antwort . Diese Option gefällt mir, weil Sie so völlig flexibel mit dem Projekt arbeiten können, wo immer Sie möchten, und auch ein bisschen Electron lernen.
  5. Fluid App - Dies ist nur Mac aber ansonsten ist es eine schöne Lösung und super einfach. Es ist kostenlos für die Standardversion, es gibt auch eine 5-Dollar-Version, die Funktionen wie Vollbild enthält.
  6. Flotato - nur Mac wieder, aber das ist ein wirklich interessanter Ansatz. Klonen Sie die App einfach und geben Sie ihr einen Namen wie docs.google.com. Daraufhin wird sie zu Google Text & Tabellen. Zum Zeitpunkt des Schreibens ist es in der Vorveröffentlichung (noch nicht veröffentlicht), aber ich werde das genau beobachten, es ist sehr cool.
  7. ToDesktop - ToDesktop funktioniert, aber es ist wahrscheinlich etwas übertrieben, wenn Sie eine persönliche App erstellen. Außerdem ist es für diesen Anwendungsfall wahrscheinlich etwas zu teuer. ToDesktop zielt darauf ab, eine Desktop-App für die Verteilung an Kunden zu erstellen (mehr dazu weiter unten).

Verteilen an Kunden

Beim Erstellen einer Desktop-App für die Verteilung an Ihre Kunden sind einige zusätzliche Überlegungen von größerer Bedeutung:

  • Installer - Mac-Benutzer erwarten eine DMG-Datei "Drag to Applications". Windows-Benutzer erwarten ein Installationsprogramm und auch, dass sie es über die Systemsteuerung deinstallieren können.
  • Codesignatur - Wenn Ihre App nicht mit Code signiert ist, verhindern standardmäßig Windows Authenticode und Apple Gatekeeper Ihren Desktop App wird nicht geöffnet.
  • Auto-Update - Es gibt immer noch einen Webbrowser, der "unter" Ihrer Desktop-App ausgeführt wird. Es ist aus zwei Gründen wichtig, diesen zu aktualisieren. 1. Sicherheitsprobleme und Sicherheitslücken sollten im Laufe der Zeit behoben werden. 2. Sie möchten nicht länger daran gehindert sein, einen alten Webbrowser in 5 Jahren zu unterstützen, da der Browser Ihrer Desktop-App nicht aktualisiert wurde

Die oben genannten Tools bieten diese Funktionen nicht, sodass sie nicht für den Anwendungsfall der Verteilung Ihrer App an Kunden geeignet sind. Dies sind die Funktionen, die wir beim Erstellen von ToDesktop hinzufügen wollten, daher finde ich, dass sie gut zu diesem Anwendungsfall passen. Wir fügen die ganze Zeit neue Funktionen hinzu, letzte Woche haben wir die Unterstützung für App-Protokolle und Deeplinks hinzugefügt.

1
DaveJ

Verwenden Sie Web2Desk : Wenn Sie nach einer kostenlosen und einfachen Lösung suchen. 

 Convert webapp to desktop app using web2desk

sie müssen lediglich die URL der Web-App (oder Website) eingeben, und die Desktop-App für Mac, Windows und Linux wird in kürzester Zeit erstellt.

 Desktop App for Mac, Linux and Windows platforms

1
Felix josemon

Es gibt eine Menge Frameworks, die Ihre Web-App in eine native Anwendung einbinden können, die auf Dinge wie die Dateispeicher-API für ein Betriebssystem zugreifen kann. Dies ist die spezifische Anleitung für Windows .

BEWARE THOUGH - Sie müssen einige Zeit damit verbringen, solide Tests und QS-Arbeit für Ihre native App durchzuführen, so dass Sie sich nicht wie eine Website in einem systemeigenen Wrapper fühlen und sich gut in alle Versionen des Betriebssystems integrieren lassen, die Sie möchten kompatibel sein mit. Tweetdeck für Mac ist ein Beispiel dafür, was nicht zu tun ist (im Wesentlichen ein Webbrowser in einem systemeigenen Wrapper).

0
Ben Rondeau

Der einfachste und schnellste Weg, den ich kenne, ist die Verwendung der nativefier-Bibliothek von nodejs/npm, die den Elektronjs zugrunde liegt. Es dauert nur 5 Minuten, um eine ausführbare Datei für Windows zu erstellen. Sogar eine Person, die keine Programmiererfahrung hat, kann eine Desktopanwendung aus einer Webanwendung erstellen. Im Folgenden werden die Schritte zum Konvertieren von Webanwendungen in Desktopanwendungen beschrieben. Muss lesen !

Konvertieren Sie eine beliebige Webanwendung in 2 Minuten in eine Desktopanwendung mit dem nativefier von npm.

0
Vishwas