html - Come posso convertire l'applicazione Web in eseguibile sul desktop?




web-applications converter (6)

(Full disclosure, sono il fondatore di ToDesktop , cercherò di essere obiettivo e imparziale qui.)

Come al solito in Informatica, la risposta è "dipende"!

La prima domanda da porsi è: per chi è utilizzata l'app desktop? Solo tu ? Oppure, stai distribuendo l'app ai clienti ? Perché questi due segmenti hanno esigenze molto diverse.

Solo tu

Ci sono molte opzioni qui (in nessun ordine particolare):

  1. Nativefier : l'opzione ovvia. Molte opzioni di configurazione, molti contributori, open source e regolarmente aggiornati. Questa dovrebbe probabilmente essere l'opzione predefinita se vuoi creare un'app solo per te.
  2. WebDGap - Questo è un bel progetto ma è un po 'vecchio e "dal 13 aprile 2018 WebDGap non è più un progetto attivo". Va anche notato che questo è basato su una vecchia versione di node-webkit e non su Electron.
  3. Web2Desk - Ottima opzione se non vuoi Web2Desk con la riga di comando. Usa Nativefier sotto il cofano. È gratuito con una schermata iniziale o $ 19 con la schermata iniziale rimossa.
  4. Fai da te con l' Electron - Le basi sono state trattate abbastanza bene in questa risposta precedente . Mi piace questa opzione perché ti dà la massima flessibilità per portare il progetto dove vuoi e imparerai anche un po 'di Electron.
  5. Fluid App - Questo è solo Mac, ma per il resto è una soluzione deliziosa e super facile. È gratuito per la versione standard, c'è anche una versione $ 5 che include funzionalità come schermo intero.
  6. Flotato - Mac solo di nuovo ma questo è un approccio davvero interessante. Basta clonare l'app e assegnargli un nome come docs.google.com, che diventerà quindi Google Documenti. Al momento della stesura di questo, è in pre-release (non ancora rilasciato), ma lo osserverò da vicino, è molto bello.
  7. ToDesktop - ToDesktop funzionerà ma probabilmente è un po 'eccessivo se stai creando un'app personale. Inoltre, probabilmente è un po 'troppo costoso per questo caso d'uso. ToDesktop ha come obiettivo la creazione di un'app desktop da distribuire ai clienti (maggiori informazioni di seguito).

Distribuire ai clienti

Ci sono alcune considerazioni aggiuntive che diventano più importanti quando si crea un'app desktop da distribuire ai clienti:

  • Programma di installazione - Gli utenti Mac si aspettano un file DMG "trascina per le applicazioni". Gli utenti di Windows si aspettano un programma di installazione e si aspettano anche di poterlo disinstallare dal pannello di controllo.
  • Firma codice : se la tua app non ha il codice firmato, per impostazione predefinita, Windows Authenticode e Apple Gatekeeper impediranno l'apertura dell'app desktop.
  • Aggiornamento automatico : c'è ancora un browser Web in esecuzione "sotto" l'app desktop, è importante mantenerlo aggiornato per due motivi. 1. Problemi di sicurezza + le vulnerabilità dovrebbero essere riparate nel tempo. 2. Non vuoi rimanere bloccato a supportare un vecchio browser Web tra 5 anni perché il browser dell'app desktop non è stato aggiornato

Gli strumenti di cui sopra non offrono queste funzionalità, quindi non sono realmente adatti per il caso di utilizzo della distribuzione della tua app ai clienti. Queste sono le funzionalità che volevamo aggiungere durante la creazione di ToDesktop , quindi penso che si adatti perfettamente a questa situazione d'uso. Stiamo aggiungendo funzionalità tutte le volte, la scorsa settimana abbiamo aggiunto il supporto per i protocolli delle app e Deeplinks .

Ho creato un'applicazione HTML con AngularJS / jQuery / Bootstrap con API REST AJAX.
È possibile creare eseguibile / installatore per il sistema operativo Windows?

Senza alcun software di terze parti, dovrebbe apparire come un'applicazione nativa, ma HTML.
Ad esempio, Slack messenger ha versioni web / mac / windows e hanno lo stesso aspetto.

Qualche idea?

// UPD

Probabilmente ho bisogno di un wrapper (webview), ma ho bisogno di tutte le funzionalità di EcmaScript5 / CSS3.


Ci sono un sacco di framework là fuori che possono avvolgere l'app Web in un'applicazione nativa che può accedere a cose come l'API di archiviazione file per un sistema operativo. Questa è la guida specifica per Windows .

ATTENZIONE - dovrai dedicare del tempo a test e QA solidi per la tua app nativa in modo che non si senta come un sito web all'interno di un wrapper nativo, oltre a integrarsi perfettamente con tutte le versioni del sistema operativo che desideri siano compatibili con . Tweetdeck per Mac è un esempio di cosa non fare - fondamentalmente un browser web in un wrapper nativo).



Il modo migliore per convertire Web in Exe è l'utilizzo di nativefier:

nativefier --name "Inventory Management System" "http://localhost/php_stock_zip/php_stock_zip/php_stock/" -i ./icon.png -p windows

passi:

  1. Premi Win + x
  2. Premere C
  3. genere
  4. nativefier

Requisiti di installazione * macOS 10.9+ / Windows / Linux * Node.js> = 6 (4.x può funzionare ma non è più testato, si prega di aggiornare) Vedi dipendenze opzionali per più

Passaggio 5: npm install nativefier -g

Finalmente digita "Web Link" nativo


Io stesso stavo cercando una soluzione a tutto tondo per un po '. Ho provato di tutto, da TideSDK, AppJS, Appcelerator Titanium, codice nativo in VB.NET, XCode, Python, C ++, Electron, node-webkit, ecc: in fondo lo si chiama, l'ho provato.

Nota Electron è bello, ma funziona solo con processori a 64 bit. Quindi node-webkit è buono se vuoi eseguire la tua app su processori a 32 bit.

Così ho deciso di creare la mia soluzione open source chiamata WebDGap .

Attualmente WebDGap funziona su Windows, Linux, Mac OS X, Google Chrome e come applicazione web!

Guarda l' How To Video per imparare, bene come usare l'app ovviamente.

Ecco uno screenshot.

Essendo che sei già un utente Mac puoi unire l'app esportata in 1 file .app mac. Questo può essere fatto con Automator (e un piccolo script di shell).

C'è anche un parco giochi di codifica che ho realizzato per gli utenti mobili che ha questa caratteristica chiamata kodeWeave .

Ecco un gioco Tic-Tac-Toe che ho intenzione di esportare come app per Mac:

Ora l'app Web è in esecuzione come applicazione Mac nativa!


L'elettrone è il modo più semplice:

1. Installare l'elettrone

2. Crea e modifica 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. Esegui app desktop:

electron main.js

E per costruire l'app, usa un costruttore come un costruttore di elettroni.

Spero che ti aiuti!





desktop-application