Elektronen är ett ramverk som paket för din webbapplikation med en kopia av Chrome, som gör det möjligt att köra på användarens dator tillsammans med övriga applikationer. Det är lätt att installera och kräver endast att du ska släppa din index.html och andra beroenden.
Vad Är en Elektron, och Hur Fungerar Det?
Elektronen är i huvudsak en stationär behållare för din web app. Det är byggt på toppen av Krom, som är öppen gren av Google Chrome utan Google-specifika funktioner. Varje gång du öppnar en Elektron app, det öppnar ett nytt fönster i webbläsaren, förutom att det är låst till din sida laddas från app-filer, och inte har URL-fältet eller andra webbläsare funktioner. Men du har fortfarande tillgång till Krom är Utvecklare av Verktyg för felsökning av din ansökan.
Om appen är kvick nog, du skulle förmodligen inte ens vet att du använder en webbsida istället för en native-app.
Den stora fördelen av Elektron är att det gör din app cross-plattform ur lådan. Eftersom det är alla kör på en variant av Krom och Krom har versioner för Windows, macOS och Linux, något Electron app kan vara lätt buntas för alla OPERATIVSYSTEM. Du behöver inte oroa dig om kompatibilitet, eftersom det enda som ändras är den bas som din app körs på.
Elektron används ofta tillsammans med en web framework som Reagerar, Vue, eller Kantiga att skapa kraftfulla webbapplikationer. Har du tillgång till hela npm bibliotek, något du inte har med en vanlig web app. Den paketerade Electron app kan även vara auto-uppdaterad-precis som en riktig webbplats.
Plus, eftersom Elektronen laddar din web app från en paketerad filen snarare än era servrar laddningstider kan vara minskat dramatiskt, är det inte innehållet som skickas över nätverket (förutom API-anrop). Dessutom, detta tar en viss last av dina servrar om de flesta av dina userbase bestämmer sig för att använda desktop app.
Den största nackdelen av en Elektron jämfört med en native-app är prestanda. Eftersom det är i huvudsak öppna en ny instans av Chrome, Electron appar kan använda mycket mer RAM-minne än sina inhemska kollegor. Du behöver inte hastigheten på låg nivå språk som C, så kommer allt att skrivas i JavaScript, men det kommer inte att vara något långsammare än något som körs i en webbläsare, och det är inte avsedda att ersätta det program som behöver göra fullständig användning av metall.
Hur att Komma Igång
Elektronen är förvånansvärt lätt att ställa upp. Samtidigt som du kan installera npm paket och importera den till en ny Nod-projektet, Elektron-teamet ger ut en quick-start projektet med några av de standardiserade förkonfigurerade. Du kan också få andra mallar, såsom elektron-reagera-boilerplate, som kommer med att Reagera förkonfigurerade.
Allt du behöver för att köra Elektron är att ha Node installerat. Då kan du klona den reporäntan:
git clone https://github.com/electron/electron-quick-start
cd projekt katalog och installera Elektronen och dess relaterade beroenden med:
npm install
Härifrån kan du köra npm start för att starta utveckling server, som kommer att öppna upp i den standard index.html med Hello World:
Du kan ersätta denna index.html med din hemsida, och att flytta alla dina beroenden över. Det är verkligen alla tar det, till exempel, här är en Bootstrap-mallen laddas in Electron, fungerar perfekt utan att röra någon kod:
Även om du skulle lämna det så här, Electron erbjuder andra funktioner som gör att desktop experience bättre som du vill konfigurera.
Krydda Electron
Många Electron appar väljer att avstå från standard topp bar helt och hållet, vilket ger programmet en renare utseende. Till exempel, ” Slack (som använder Elektron och Reagera) inte har den översta raden, kommer i stället att innehållet når hela vägen till toppen av fönstret, och rymden är gjord för macOS-fönster kontroller.
Det fungerar inte bra på Windows, men du kan fortfarande dölja rubrikfältet med ram: false, men det döljer också fönster som styr helt och hållet, vilket gör det svårt att gå ur appen direkt.
På macOS men du kan uppnå denna effekt genom att redigera initiering funktion i main.js där fönster är skapade, och ange titleBarStyle: “gömda”. Denna fastighet kommer att ignoreras av Windows.
huvudfönster = new BrowserWindow({
titleBarStyle: ‘gömt’,
bredd: 800,
höjd: 600,
webPreferences: {
preload: väg.gå med(__dirname, ‘preload.js’)
}
})
Dessutom kan du använda hiddenInset att sätta mer utfyllnad mellan fönster kontroller och kanten av fönstret. Hursomhelst, du bör nog ha något statiskt i det hörnet (som en sidebar) för att förhindra det från att titta konstigt när du bläddrar.
Detta gör inaktivera fönster runt om, men du kan lägga till det manuellt genom att skapa en osynlig div placeras helt i toppen av skärmen, och ge det -webkit-app-regionen: dra; egendom.
Du kan dessutom göra användning av andra system integrationer som anpassade stationära menyer, macOS Dock, TouchBar, och i Aktivitetsfältet i Windows integrationer, och fil dra & släpp. Alla dessa integrationer ske genom Elektron API och inte röra din app är koden om du vill ha det till.
Bygga Din App
Att faktiskt paketera din app för produktion, kommer du vill använda ett verktyg som elektron-builder. Du kan också manuellt ladda ner Elektronens förkompilerade binärer och paketera det med din app byggmästare, men den är mycket lättare.
Lägga till det i ditt projekt:
garn lägg till elektron-builder-dev
Ange en build i ditt paket.json (dokumentation av alla alternativ):
“bygga”: {
“appId”: “er.id”,
“mac”: {
“kategori”: “er.app.kategori.typ”
}
}
Lägg till din app ikoner, och lägga till elektron-builder skript på ditt paket.json för enkel användning:
“skript”: {
“pack”: “elektron-builder-dir”,
“dist”: “elektron-byggare”
}
Nu, när du kör npm dist, du app kommer att vara förpackad i ett fritt format.
En sak som du vill lägga till (och kontrollera att det fungerar) är auto-uppdatering. Annars kommer du inte har ett sätt att driva förändringar för användare som du gör med en vanlig webbapplikation. Du kan lägga till denna funktion i och med uppdateringen-elektron-app-bibliotek.