Elettrone è un quadro che, pacchetti della vostra applicazione web con una copia di Chrome, permettendo di eseguire sul desktop di un utente al fianco di applicazioni native. È facile da installare e richiede solo di cadere nel tuo index.html e le altre dipendenze.
Che cosa È l’Elettrone, e Come Funziona?
Elettrone è essenzialmente un contenitore desktop per il tuo web app. Esso è costruito sulla cima di Cromo, che è open-source ramo di Google Chrome senza il Google-caratteristiche specifiche. Ogni volta che si apre un Elettrone app, si apre una nuova finestra del browser, tranne che è bloccato per la tua pagina caricata dall’app del file, e non ha la barra degli URL o altre funzionalità del browser. Anche se, si hanno ancora accesso al Cromo Strumenti di sviluppo per il debug dell’applicazione.
Se l’app è abbastanza scattante, probabilmente non saprei nemmeno si utilizza una pagina web invece di un’applicazione nativa.
Il grande vantaggio di Elettroni è che rende il vostro app cross-platform, fuori dalla scatola. Perché è in esecuzione su una variante di Cromo e Cromo ha versioni per Windows, macOS e Linux, ogni Elettrone applicazione può essere facilmente raggruppati per qualsiasi sistema operativo. Non è necessario preoccuparsi di compatibilità, come l’unica cosa che cambia è la base che l’app viene eseguito su.
Elettrone è comunemente utilizzato insieme ad un web framework come Reagire, Vue, o Angolare di effettuare potenti applicazioni web. Si ha accesso a tutta la npm biblioteca, qualcosa che non si ha con un normale web app. I pacchetti di Elettroni app può anche essere auto-aggiornamento, proprio come un vero e proprio sito web.
Inoltre, poiché gli Elettroni carichi l’applicazione web da un file compresso, piuttosto che il vostro server, i tempi di caricamento possono essere drasticamente diminuito, come non c’è nessun contenuto inviato attraverso la rete (oltre a chiamate API). Inoltre, questo richiede un certo peso il vostro server se la maggior parte del tuo userbase decide di utilizzare l’applicazione desktop.
Il principale difetto di Elettroni rispetto ad una applicazione nativa è la prestazione. Perché è essenzialmente l’apertura di una nuova istanza di Chrome, Elettrone applicazioni in grado di utilizzare molto di più di RAM rispetto alle loro controparti native. Non avete anche la velocità di un basso livello di linguaggi come il C, come tutto ciò che verrà scritto in JavaScript, anche se non sarà più lento rispetto a quello eseguito in un browser, e non è destinato a sostituire le applicazioni che hanno bisogno di fare pieno uso del metallo.
Come iniziare
Elettrone è sorprendentemente facile da impostare. Mentre si potrebbe installare il npm pacchetto e importarlo in un nuovo Nodo di progetto, l’Elettrone team fornisce un rapido avvio del progetto con alcuni standard preconfigurati. È anche possibile ottenere altri modelli, come quello elettronico reagire-standard, che viene fornito con Reagiscono preconfigurato.
Tutto ciò di cui avrete bisogno per l’esecuzione di Elettroni è quello di avere Nodo installato. Quindi, è possibile clonare il repository:
git clone https://github.com/electron/electron-quick-start
cd alla directory del progetto e installazione di Elettroni e relative dipendenze con:
npm install
Da qui, è possibile eseguire npm start per avviare il server di sviluppo, che si aprirà il default index.html con l’Hello World:
È possibile sostituire questo index.html con il tuo sito web, e di spostare tutte le dipendenze in corso. Questo è davvero tutto ci vuole; per esempio, ecco un Bootstrap modello caricato in Elettrone, perfettamente funzionante, senza toccare alcun codice:
Anche se si potrebbe lasciare come questo, Electron offre altre caratteristiche per rendere il desktop per la migliore esperienza che si desidera configurare.
La Speziatura Di Elettroni
Molti Elettroni apps scegliere di ignorare l’impostazione predefinita della barra del tutto, che dà un look più pulito. Per esempio, il margine di flessibilità (che utilizza Elettroni e Reagire) non ha la barra in alto, invece, il contenuto raggiunge tutto il senso alla parte superiore della finestra, e uno spazio per il macOS controlli della finestra.
Questo non funziona bene su Windows, anche se è ancora possibile nascondere la barra del titolo con il telaio: false, ma si nasconde anche la finestra di controlli del tutto, rendendo difficile per uscire dall’app nativa.
Su macOS tuttavia, è possibile ottenere questo effetto modificando la funzione di inizializzazione in main.js dove la finestra del browser che viene creato, e specificando titleBarStyle: ‘nascosto’. Questa proprietà sarà ignorato da Windows.
mainWindow = new BrowserWindow({
titleBarStyle: ‘nascosto’,
larghezza: 800,
altezza: 600,
webPreferences: {
precarico: percorso.join(__dirname, ‘preload.js’)
}
})
Inoltre, è possibile utilizzare hiddenInset di creare un’imbottitura tra i controlli di finestra e il bordo della finestra. In ogni modo, probabilmente si dovrebbe avere qualcosa di statico in quell’angolo (come una barra laterale) per evitare di guardare strano durante lo scorrimento.
Questo non disattivare trascinando la finestra, ma è possibile aggiungere manualmente creando un invisibile div messo assolutamente in cima alla schermata e -webkit-app-regione: trascinare; proprietà.
Inoltre, si può fare uso di altri sistemi di integrazione come custom menu del desktop, macOS Dock, TouchBar, e la Barra delle applicazioni di Windows integrazioni, e file drag & drop. Tutte queste integrazioni accadere attraverso l’Elettrone API e di non toccare il codice dell’app meno che non si desidera.
Costruire La Vostra App
Effettivamente il pacchetto di app per la produzione, ti consigliamo di fare uso di uno strumento come elettrone-builder. Si potrebbe anche scaricare manualmente Elettroni di binari precompilati e il pacchetto con la tua app, ma il costruttore è molto più facile.
Aggiungere al progetto:
filato aggiungere elettrone-builder –dev
Specificare una configurazione di costruzione nel pacchetto.json (documentazione di tutte le opzioni):
“costruire”: {
“appId”: “il tuo.id”,
“mac”: {
“category”: “il tuo.app.categoria.digitare”
}
}
Aggiungi la tua app icone, e aggiungere l’elettrone-generatore di script per il vostro pacchetto.json per un facile utilizzo:
“script”: {
“pack”: “electron-builder –dir”,
“dist”: “electron-builder”
}
Ora, quando si esegue npm dist, l’app sarà confezionato in un distribuibile formato.
Una cosa che si desidera aggiungere (e verificare che funziona) è la funzione di aggiornamento automatico. In caso contrario, non hanno un modo per spingere i cambiamenti per gli utenti, come se fosse una normale applicazione web. È possibile aggiungere questa funzionalità con l’aggiornamento-elettrone-app library.