Soluzioni per la distribuzione di applicazioni HTML5 come applicazioni desktop? [chiuso]


141

Quali sono alcune soluzioni per distribuire un'applicazione desktop basata su HTML5?

Voglio essere in grado di distribuire la mia app HTML5 come applicazione desktop autonoma su Windows, OSX e Linux. Vorrei che le persone potessero fare doppio clic sul collegamento con l'icona della mia app per eseguire il mio programma.

Non voglio mostrare la finestra del browser, solo la mia app. È possibile?


4
Chrome + Fullscreen funziona bene
PostMan

2
Chrome su Windows ha un'opzione "Crea scorciatoia applicazione" dal menu della chiave inglese. Creerà un collegamento sul desktop che apre la finestra standard senza barra degli indirizzi.
6502

3
Hai altri requisiti, come l'accesso ai file locali o altre cose che normalmente non sono possibili nel browser?
Tiemen,

76
Qualcuno può spiegarmi perché questa domanda è contrassegnata come non costruttiva ? Sta chiedendo se esiste una piattaforma, la risposta è obiettiva: . E potrebbe essere "implementato" con alcune possibilità, quindi perché è segnato in questo modo, davvero.
Francesco Belladonna,

10
Questa domanda è pertinente e attuale - come mostrato da questo recente articolo: clintberry.com/2013/html5-apps-desktop-2013 .
Per Quested Aronsson il

Risposte:


75

App HTML5 nel 2014

Cornici di chrome / webkit

  • Electron (ex Atom Shell)

    Electron è una libreria open source sviluppata da GitHub per la creazione di applicazioni desktop multipiattaforma con HTML, CSS e JavaScript. Electron ottiene questo risultato combinando Chromium e Node.js in un singolo runtime e le app possono essere impacchettate per Mac, Windows e Linux. ( fonte )

    Le persone di github lo usano per fornire il loro editor di codice Atom come app. Ha un'API documentata e un canale di aiuto sui forum atom ufficiali.

  • Node-Webkit , l'approccio più minimale

    node-webkit è un runtime di app basato su Chromium e node.js. Puoi scrivere app native in HTML e JavaScript con node-webkit. Inoltre, consente di chiamare i moduli Node.js direttamente dal DOM e consente un nuovo modo di scrivere applicazioni native con tutte le tecnologie Web.

    Intel è dietro questo (?). Mi è stato detto che è molto ruvido attorno ai bordi.

  • Brackets Shell , la sandbox dell'editor di codice Adobes (e base di Adobe Edge)

    Nota: il brackets-shell è gestito solo per l'uso dal progetto Brackets. Sebbene alcune persone abbiano sicuramente avuto successo nell'usarlo come shell di app per altri progetti, non forniamo alcun supporto ufficiale per questo e non abbiamo fatto un sacco di lavoro per rendere la shell dell'app facilmente riutilizzabile. Molte persone probabilmente troveranno più facile usare un progetto come node-webkit, che è più generico in base alla progettazione.

    dice il readme, ma ci sono un sacco di persone là fuori che lo hanno fatto comunque.

Quadri + strumenti

  • Adobe AIR , come suggerito da un'altra risposta.

    Il runtime Adobe® AIR® consente agli sviluppatori di impacchettare lo stesso codice in app native per desktop Windows e Mac OS, nonché iPhone, iPad, Kindle Fire, Nook Tablet e altri dispositivi Android ™, raggiungendo gli store di app mobili per oltre 500 milioni dispositivi.

  • Sencha è una società che vende strumenti per sviluppatori di app, incluso lo sviluppo e la distribuzione di app html5.

Approcci inattivi


7
Mozilla Prism è inattivo ora
Harshith JV,

8
Solo un avvertimento con Adobe Air. Se stai pensando di utilizzare qualsiasi tipo di soluzione template javascript (ad esempio manubri, baffi) la maggior parte di essi non funziona a causa di errori di sicurezza relativi alle nuove chiamate javascript di function ().
James Parker,

grazie per quel suggerimento molto utile! sfortunatamente non ho avuto l'oppurtinità di provare nessuno degli esempi sopra elencati. Li ho semplicemente raccolti attraverso la ricerca.
Samuel Herzog,

Puoi fare in modo che la tua applicazione venga eseguita fuori misura nella sandbox di sicurezza. Ho avuto questo problema anche con il sistema di template KendoUI e sono stato in grado di risolverlo. In entrambi i casi sono passato da Air a Titanium Desktop, ma attualmente sto cercando alternative poiché l'implementazione del webkit di Windows di TD ha seri problemi con gli elementi del modulo (input / dropdowns ).
Vasco Costa,

Puoi considerare Sentenza Desktop come pacchetto dell'applicazione web HTML5 / CSS3 / JS nell'applicazione Mac OS X (.app). È inoltre disponibile una libreria API. Non richiede alcun framework (come Adobe Air o TideSDK). Implementazione del Mac App Store supportata.
Beny,


10

Potresti voler dare un'occhiata a XULRunner di Mozilla. A un livello di 10000 piedi, il browser FireFox è un'applicazione XULRunner (ovviamente molto sofisticata, ma ...). Ma XULRunner ti consente di utilizzare Javascript e XML per creare applicazioni e la finestra del browser è uno di quei componenti, quindi una volta aperta la finestra di base, puoi probabilmente fare praticamente tutto ciò che desideri.

Inoltre, a seconda della raffinatezza della tua applicazione, esistono diversi framework "widget" (come Dashboard su Mac, Yahoo Widget, Windows Gadgets) che sono sostanzialmente anche runtime HTML.


2
Consiglio vivamente di guardare XULRunner. Per quello che descrivi, è l'ideale e ben documentato. Anche Chrome funzionerebbe altrettanto, suppongo, ma non ci ho pensato.
Jared Farrish,

XUL Runner è un framework fantastico e molto flessibile, ma non ben documentato come dici tu. Un principiante dovrà soffrire molto per iniziare.
esafwan

10

Scopri sicuramente Titanium . Proprio oggi ho preso un'app HTML5 funzionale e con poche modifiche sono stata in grado di rilasciarla in Titanium e impacchettarla per Mac, Windows e Linux.

Supporta inoltre PHP, Python e Ruby se l'app richiede l'elaborazione "lato server".


Se vuoi una soluzione preconfezionata, penso che questa sia la risposta.
Dylanized il

15
Le mie esperienze con Titanium sono state terribili - ha un bell'aspetto all'esterno ma è pieno di bug e diventa un inferno da usare molto rapidamente. Non posso raccomandarlo.
Damian,

3
Ho anche pensato che sarebbe stata una buona scelta ma: 1) Non sono riuscito a far funzionare un semplice "crea-nuovo-progetto / esegui" in Linux (Ubuntu 11.10) 2) Titanium Desktop si sta trasformando in un progetto basato su COmmunity ( ciò significa che, a meno che qualcuno prenda il loro codice, morirà)
Luis Lobo Borobia,

4
So che questo è vecchio, ma ho appena letto questa risposta e ho trascorso un po 'di tempo fino a quando ho capito che Titanium Desktop è morto. Quindi, non più un'opzione. A proposito, sto pensando di creare qualcosa con c # e chromium incorporati, come ha fatto
Github

6
Titanium Desktop è diventato TideSDK tidesdk.org
Peacemoon il

5

Chrome può fare ciò che fa il prisma Vedi - Strumenti-> Crea scorciatoia applicazione


Non sapevo che ... +1
arg20

Sfortunatamente, i collegamenti alle applicazioni non sono disponibili su Mac.
Shane Holloway,


3

Adobe AIR è pensato per consentirti di lavorare principalmente in HTML, CSS e JavaScript fornendo al contempo un'applicazione desktop. (Avvertenza: non l'ho usato da solo.)


1
il browser integrato in AIR è vecchio e non verrà mai aggiornato, quindi non lo consiglio (l'ho usato in più progetti)
simion314

@ simion314: Sono curioso, dato che AIR è un progetto in corso, perché dici che il browser in esso "non" sarà mai aggiornato.
TJ Crowder,

vedi forums.adobe.com/message/6177332 Adobe funziona di più per la parte mobile di AIR e sui dispositivi mobili utilizza StageWebView e non aggiornerà il motore webkit in AIR, stagewebview è limitato alla sola visualizzazione di materiale, ad esempio se si prova a caricare una libreria javascript complessa o un'applicazione come ckeditor 4 fallirà a causa di alcune incompatibilità con il motore webkit (alcune sono correlate al sandboxing ma non tutte)
simion314


2

Hmmm ... una macchina virtuale per HTML5 / CSS / JS ... sembra un browser. :)

Forse Adobe AIR farebbe il trucco, perché si basa sull'idea di portare sul desktop app Internet ricche. Non l'ho mai usato, comunque.

Una cosa che potresti fare è sviluppare un'app desktop di base che utilizza una sorta di controllo del browser Web preconfezionato (ad esempio, se stai sviluppando per un Mac, trascina semplicemente un WebView nella finestra e aggiungi un codice di base per caricare il tuo HTML sull'app avviare).





1

Attualmente la risposta è che sono diverse soluzioni per ciascuna piattaforma.

  • Per MAC OSX Creerai un'app desktop Cocoa con UIWebView
  • Per Windows realizzerai un'app desktop .NET con un componente browser.

Penso che l'utilizzo di Windows con un componente del browser abbia diverse limitazioni (è possibile accedere al filesystem o mostrare popup?), Conosci qualche progetto che utilizzare questo approccio? ...
clagccs

La migliore risposta e nessuno lo riconosce. Nella parte posteriore, per lo più tutte le soluzioni ibride utilizzano un componente webview che si comporta proprio come un browser. Questo è tutto ciò che serve, ottenere una visualizzazione Web, caricare l'html / css / js e voilà!
Dan Ochiana,

1

È possibile utilizzare un server incorporato come Tomcat o forse Apache.

Uso Tomcat per un'applicazione Web Java completa. Esegui all'interno del browser, ma l'applicazione deve essere installata. Il collegamento per avviare l'app, avviare il servizio e aprire il browser.

Oppure prova a utilizzare webkit


1

Un po 'in ritardo, ma puoi utilizzare una versione portatile di google chrome, quindi creare una piccola app di Windows per installarla e creare un collegamento .ink alla sua modalità --kiosk e app.
Un po 'come le scorciatoie dell'applicazione di Chrome, ma dove installi Chrome per loro.


1

Se ne hai solo bisogno per Windows, dovresti considerare le applicazioni HTML (HTA), fa parte di Internet Explorer da IE 5 (oltre 10 anni).

Nessun server richiesto, formattazione HTML completa, pieno accesso alle risorse locali (anche porte COM / USB), fantastico. Inoltre, è facile eseguire il debug con Visual Studio, basta collegarlo a MSHTA.exe

È possibile abilitare HTML 5 in HTA con il seguente meta tag:

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

+1 Cerca anche il supporto per Linux e Mac :)
Bhargav Nanekalva,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.