Schnelle, schmerzlose, automatische Updates in Electron

Seien wir ehrlich: Die meisten Benutzer kehren nicht zu Ihrer Website zurück und laden die Updates für Ihre brandneue Electron-App herunter. Stattdessen sollten Sie eine Art automatisches Update-System einrichten.

Leider ist die Online-Dokumentation hierfür weder leicht zu finden noch zu befolgen. Hier werde ich Sie durch einen kurzen Prozess zum Einrichten eines automatischen Updaters mit GitHub als Host führen.

Repository einrichten

Um in Ihrem Namen zu veröffentlichen, benötigt Electron-Builder ein GitHub-Zugriffstoken. Wenn Sie nicht wissen, was dies sind oder wie Sie eine erstellen, lesen Sie die Kurzanleitung von GitHub.

Electron-Builder benötigt ein Token mit Zugriff auf den Repo-Bereich. Erstellen Sie eine wie im Link beschrieben und kopieren Sie sie an einen sicheren Ort (der Token wird nur einmal angezeigt!).

Bibliothek einrichten

Wir werden Electron-Builder verwenden, um unsere App zu verpacken. Beginnen wir also mit der Installation:

npm install electron-builder --save-dev

Lassen Sie uns auch den Elektronen-Updater installieren, um die automatischen Updates durchzuführen:

npm install electron-updater --save

Dann müssen wir unseren Build konfigurieren. In der package.jsonhinzufügen , um dieses Snippet:

Lassen Sie uns dies Stück für Stück analysieren:

  • Der repositoryLink ist ziemlich selbsterklärend - denken Sie daran, ihn durch Ihren zu ersetzen!
  • Das buildSkript erstellt Ihre App lokal, ohne sie zu veröffentlichen.
  • Das shipSkript erstellt und veröffentlicht Ihre App.

Hinweis für React-Entwickler : Electron-Builder und Create- React -App weisen standardmäßig einige Konflikte auf. Ich habe einen Generator erstellt, der eine Elektron + Reakt + Elektronen-Builder-App ohne Konfiguration einrichtet. Sie finden es hier.

Erstellen Sie nun eine Datei electron-builder.ymlmit dem folgenden Inhalt:

  • Dies appIdist der Name Ihrer Anwendung im Betriebssystemregister. Sie können es frei wählen.
  • Auf providerdieser Plattform wird das Installationsprogramm Ihrer Anwendung gespeichert.
  • Das tokenist das GitHub-Zugriffstoken. Ersetzen Sie es durch das zuvor erstellte.

Denken Sie daran, diese Datei hinzuzufügen, .gitignoredamit Sie Ihr Token nicht mit der ganzen Welt teilen! ;)

Umgang mit der Update-Logik

Jetzt müssen wir die Update-Logik in unserer Electron-App konfigurieren. Integrieren Sie dies in Ihre Eingabedatei (normalerweise index.jsoder electron.js). Wenn Sie eine brandneue App erstellen, können Sie den folgenden Code einfach kopieren und einfügen:

IPC-Module sind die Standardmethode zum Senden von Nachrichten zwischen Prozessen in Electron. Hier können Sie mehr darüber erfahren.

Der Code ist ziemlich selbsterklärend und behandelt die Elektronenseite des Updates. Jetzt müssen wir den Benutzer benachrichtigen.

Hier ist ein Beispiel für eine HTML-Seite. Es wird eine Schaltfläche angezeigt, deren Beschriftung entweder "Keine Updates bereit" oder "Neue Version bereit!" Lautet. Wenn Sie auf die Schaltfläche klicken, wird eine Methode aufgerufen, die Electron anweist, die neuen Updates zu beenden und zu installieren.

Und schließlich Schiff

Wenn Sie zur Veröffentlichung bereit sind, bearbeiten Sie das versionFeld in package.jsonund führen Sie den folgenden Befehl aus:

npm run ship

Gehen Sie zur GitHub-Seite Ihres Repositorys und klicken Sie auf "Releases" (in derselben Zeile wie "Commits").und 'Zweig'). Dort finden Sie einen Release-Entwurf. Klicken Sie auf "Bearbeiten".und dann 'Veröffentlichung veröffentlichen'.

Keine Panik, wenn auf der Schaltfläche beim Starten der App "Keine Updates bereit" angezeigt wird. Dies ändert sich erst, nachdem die neue Version heruntergeladen wurde.

Wenn Sie ein funktionierendes Projekt verwenden möchten, um mehr zu erfahren und loszulegen, können Sie dieses Beispiel-Repository klonen.

Wenn Sie diesen Artikel hilfreich fanden, klatschen Sie unbedingt?