apex map rotation

Apex Legends – Kartenrotation

INOFFIZIELLE Apex Legends-Kartenrotationsanwendung, mit der Benutzer die aktuellen und nächsten Karten anzeigen und Benachrichtigungen über Kartenänderungen abonnieren können.

Motivation

Auch wenn Apex Legends Status hinsichtlich der Kartenrotationsfunktion eine tolle Website ist, fehlen Benachrichtigungen. Daher müssten Sie jedes Mal manuell überprüfen, welche Karte aktuell ist.

Apex Legends Map Rotation entstand aus dem Bemühen heraus, zu wissen, welche Karte auf Sie zukommt, damit Sie nie wieder selbst nachsehen müssen.

Merkmale

• Kartenrotation in Echtzeit
• Vordergrundbenachrichtigungen – Hintergrundbenachrichtigungen sind unterwegs!
  • Anpassbare Karten
  • Anpassbarer Schwellenwert
• Installierbare Anwendung (siehe Support)

Beitragen

Willkommen und vielen Dank für Ihren Beitrag zu Apex Legends – Kartenrotation!

Klon-Repository

Klonen Sie zunächst das Repository von GitHub:

 # HTTPS
git clone https://github.com/lgaspari/apex-map-rotation.git && cd apex-map-rotation

# SSH
git clone [email protected]:lgaspari/apex-map-rotation.git && cd apex-map-rotation

Pakete installieren

Verwenden Sie dann npm , um die Abhängigkeiten zu installieren:

npm install

Umgebungsvariablen konfigurieren

Erstellen Sie eine Kopie der .env Datei in .env.local . Füllen Sie leere Umgebungsvariablen wie folgt mit ihrem richtigen Wert:

• VITE_APEX_LEGENDS_API_SECRET_TOKEN : Inoffizielles geheimes Apex Legends-API-Token zur Authentifizierung

Starten Sie die Anwendung im Entwicklungsmodus

In den meisten Fällen verwenden Sie nun diesen Befehl, um die Anwendung auszuführen:

npm run start

Starten Sie die Anwendung im Produktionsmodus

Andernfalls, wenn Sie die Anwendung mit Produktionscode ausführen möchten, verwenden Sie stattdessen Folgendes:

npm run start:production

Linting und Codeformatierung

Wir verwenden ESLint, um Probleme in unserem Code zu finden und zu beheben. Überprüfen Sie Ihren lokalen Code, indem Sie den folgenden Befehl ausführen:

npm run lint

Darüber hinaus können Sie ESLint- und Prettier-Erweiterungen für Visual Studio Code installieren, um Fehler zu erkennen und das Codeformat zu korrigieren.

Tests

Wir verwenden Vitest als Testframework für unsere Anwendung. Überprüfen Sie Ihre lokalen Tests, indem Sie den folgenden Befehl ausführen:

npm run test

Darüber hinaus können Sie die Vitest-Erweiterung für Visual Studio Code installieren, um Tests schnell auszuführen.

Kontinuierliche Integration

Bei jedem Push zum main wird ein kontinuierlicher Integrationsworkflow ausgeführt. Wenn Ihre Änderungen die Lint und Test nicht bestehen, schlägt der Workflow fehl. Bitte stellen Sie sicher, dass Sie diese Probleme in einem separaten Commit beheben.

Bereitstellungen

Derzeit ist keine kontinuierliche Bereitstellung konfiguriert; Sie müssen diesen Befehl manuell ausführen:

npm run deploy

Bitte sehen Sie von einer unangekündigten Bereitstellung in der Produktion ab.

Progressive Webanwendung

Dies ist eine experimentelle Funktion und kann jederzeit deaktiviert werden.

Wir verwenden Vite, um die Anwendung auszuführen und zu erstellen. Daher verwenden wir zum Einrichten der Progressive Web Application das Vite PWA-Plugin, das die Konfiguration nahtlos ermöglicht.

Generierung von PWA-Assets

Um die minimal benötigten PWA-Assets zu generieren, verwenden wir den Vite PWA Assets Generator. Der folgende Befehl generiert die Assets basierend auf der Datei public/logo.svg unter Verwendung der Konfiguration aus pwa-assets.config.ts. Stellen Sie sicher, dass es aktualisiert wurde, bevor Sie es ausführen:

npm run generate-pwa-assets

PWA-Fehlerbehebung

Installation

Wenn Sie Probleme mit der PWA-Installation haben, können Sie Lighthouse aus den Dev Tools verwenden, um zu überprüfen, was fehlt, damit es funktioniert.

Dies sind die Schritte für Chromium-basierte Browser:

1. Öffnen Sie die Entwicklungstools
2. Gehen Sie zur Registerkarte Leuchtturm
3. Überprüfen Sie die Kategorie „Progressive Web App“.
4. Klicken Sie auf die Schaltfläche „Seitenladevorgang analysieren“.
5. Überprüfen Sie die Ergebnisse

Servicemitarbeiter aktualisieren

Die Anwendung sollte Sie fragen, ob es ein Update für den Service Worker gibt. Zur Vereinfachung können Sie jedoch eine Option von Dev Tools aktivieren, um die Servicemitarbeiter beim Neuladen zu aktualisieren:

1. Öffnen Sie die Entwicklungstools
2. Gehen Sie zur Registerkarte „Anwendung“.
3. Aktivieren Sie die Option „Bei Neuladen aktualisieren“.
4. Laden Sie die Registerkarte mit CTRL+SHIFT+R neu

Wenn weiterhin Probleme auftreten, können Sie den Servicemitarbeiter selbst aktualisieren, indem Sie auf die Schaltfläche „Aktualisieren“ klicken.

Assets aktualisieren

Beim Aktualisieren von PWA-Assets können Sie die neuen geladenen Assets möglicherweise nicht sehen. Wenn dies der Fall ist, installieren Sie die Anwendung bitte erneut.

Cross-Browser-Kompatibilität (HTTPS)

Benachrichtigungen

Wir verwenden die Benachrichtigungsschnittstelle der Benachrichtigungs-API, um Desktop-Benachrichtigungen zu konfigurieren und dem Benutzer anzuzeigen. Weitere Informationen zur Benachrichtigungs-API finden Sie in den MDN-Webdokumenten.

Benachrichtigungs-API

Überprüfung der API-Unterstützung über 'Notification' in window .

Plattform	Mutig	Chrom	Rand	Firefox	Safari	Beobachtungen
macOS	Ja	Ja	Ja	Ja	Ja	- -
iOS	NEIN	NEIN	NEIN	NEIN	Ja¹	¹ Die experimentelle Funktion muss aktiviert sein.
Android	Ja	Ja	Ja	Ja	N / A	- -

Erlaubnis zur sofortigen Benachrichtigung

Anfordern von Benachrichtigungsberechtigungen über Notification.requestPermission() mit Promises .

Plattform	Mutig	Chrom	Rand	Firefox	Safari	Beobachtungen
macOS	Ja¹	Ja¹	Ja¹	Ja	Ja	¹ Möglicherweise sind zusätzliche manuelle Schritte erforderlich, um die Erlaubnis zu erteilen.
iOS	N / A	N / A	N / A	N / A	Ja¹	¹ Nur PWA-Unterstützung.
Android	Ja	Ja	Ja¹	Ja²	N / A	¹ Möglicherweise sind zusätzliche manuelle Schritte erforderlich, um die Erlaubnis zu erteilen. ² Möglicherweise wird aufgrund des selbstsignierten Zertifikats eine nicht sichere Seite angezeigt.

Benachrichtigungen senden

Erstellen einer neuen Benachrichtigungsinstanz mit new Notification(title, options);

Plattform	Mutig	Chrom	Rand	Firefox	Safari	Beobachtungen
macOS	Ja	Ja	Ja	Ja	Ja	- -
iOS	N / A	N / A	N / A	N / A	Nein ¹	¹ nicht einmal von PWA.
Android	NEIN	NEIN	NEIN	Ja	N / A	- -

Servicemitarbeiter (HTTPS erforderlich, außer localhost)

Servicemitarbeiter fungieren im Wesentlichen als Proxyserver, die zwischen Webanwendungen, dem Browser und dem Netzwerk (sofern verfügbar) sitzen. Weitere Informationen zur Service Worker API finden Sie in den MDN-Webdokumenten.

Plattform	Mutig	Chrom	Rand	Firefox	Safari	Beobachtungen
macOS	Ja	Ja	Ja	Ja	Ja	- -
iOS	Ja	Ja	Ja	Ja	Ja	- -
Android	Ja	Ja	Ja	Ja	N / A	- -

Progressive Webanwendung (HTTPS erforderlich, außer localhost)

Eine Progressive Web App (PWA) ist eine App, die mithilfe von Webplattformtechnologien erstellt wurde, aber eine Benutzererfahrung wie eine plattformspezifische App bietet. Weitere Informationen zu Progressive Web Apps finden Sie in den MDN-Webdokumenten.

Plattform	Mutig	Chrom	Rand	Firefox	Safari	Beobachtungen
macOS	Ja¹	Ja¹	Ja¹	NEIN	NEIN	¹ kann über die Schaltfläche Install PWA rechts in der Adressleiste oder über die Schaltfläche Options > Install app installiert werden.
iOS	NEIN	NEIN	NEIN	NEIN	Ja¹	¹ kann über die Schaltfläche Share > Add to Home Screen installiert werden.
Android	Ja¹	Ja¹	Ja¹	Ja²	N / A	¹ kann über das Popup Add to Home Screen oder über die Schaltfläche Options > Install app installiert werden. ² kann über die Schaltfläche Options > Add to Home screen installiert werden.

Credits

• Vielen Dank an EA und das Respawn-Team für die Entwicklung der Apex Legends.
• Vielen Dank an das Team hinter der inoffiziellen Apex Legends Status API für die Erstellung einer so großartigen API.
• Vielen Dank an die Apex Legends Status-Website für ihre Kartenressourcen.

Haftungsausschluss

Alle Bilder, Symbole und Marken gehören ihren jeweiligen Eigentümern. Apex Legends ist eine eingetragene Marke von EA. Spielressourcen, Materialien und Symbole gehören Electronic Arts. Beachten Sie, dass EA und Respawn den Inhalt dieser Website nicht unterstützen oder für den Inhalt dieser Website verantwortlich sind.