apex map rotation
1.0.0
Application NON OFFICIELLE de rotation de cartes Apex Legends qui permet aux utilisateurs de voir les cartes actuelles et suivantes en plus de s'abonner aux notifications de modification de carte.
Même si Apex Legends Status est un site Web génial avec sa fonction de rotation de carte, il manque de notifications. Par conséquent, vous devrez vérifier manuellement chaque fois que vous aurez besoin de savoir quelle est la carte actuelle.
Apex Legends Map Rotation est né d'un effort pour pouvoir savoir quelle carte est à venir afin que vous n'ayez plus jamais à vérifier par vous-même.
Bienvenue et merci d'avoir contribué à Apex Legends - Map Rotation !
Tout d'abord, clonez le référentiel depuis 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 Ensuite, utilisez npm pour installer les dépendances :
npm install Faites une copie du fichier .env dans .env.local . Remplissez les variables d'environnement vides avec leur valeur appropriée comme suit :
VITE_APEX_LEGENDS_API_SECRET_TOKEN : jeton secret non officiel de l'API Apex Legends pour l'authentificationMaintenant, pour la plupart, vous utiliserez cette commande pour exécuter l'application :
npm run startSinon, si vous souhaitez exécuter l'application en utilisant le code de production, utilisez plutôt ceci :
npm run start:productionNous utilisons ESLint pour rechercher et résoudre les problèmes dans notre code. Vérifiez votre code local en exécutant la commande suivante :
npm run lintDe plus, vous pouvez installer les extensions ESLint et Prettier pour Visual Studio Code pour vous aider à détecter les erreurs et à corriger le format du code.
Nous utilisons Vitest comme framework de test pour notre application. Vérifiez vos tests locaux en exécutant la commande suivante :
npm run testDe plus, vous pouvez installer l'extension Vitest pour Visual Studio Code pour exécuter des tests rapidement.
Un workflow d'intégration continue s'exécute à chaque poussée vers la branche main . Lorsque vos modifications ne réussissent pas les étapes Lint et Test , le flux de travail échoue. Veuillez vous assurer de corriger ces problèmes dans un commit séparé.
Actuellement, aucun déploiement continu n’est configuré ; vous devrez exécuter cette commande manuellement :
npm run deployVeuillez vous abstenir de déployer en production sans préavis.
Il s'agit d'une fonctionnalité expérimentale et elle peut être désactivée à tout moment.
Nous utilisons Vite pour exécuter et créer l'application. Par conséquent, pour configurer l'application Web progressive, nous utilisons le plugin Vite PWA, qui effectue la configuration de manière transparente.
Pour générer les actifs PWA minimaux nécessaires, nous utilisons Vite PWA Assets Generator. La commande ci-dessous générera les actifs basés sur le fichier public/logo.svg en utilisant la configuration de pwa-assets.config.ts. Assurez-vous qu'il a été mis à jour avant de l'exécuter :
npm run generate-pwa-assetsSi vous rencontrez des problèmes avec l'installation de PWA, vous pouvez utiliser Lighthouse depuis les outils de développement afin de vérifier ce qui manque pour que cela fonctionne.
Voici les étapes pour les navigateurs basés sur Chromium :
L'application devrait vous demander s'il existe une mise à jour du Service Worker. Cependant, pour faciliter les choses, vous pouvez activer une option de Dev Tools pour mettre à jour les service Workers lors du rechargement :
CTRL+SHIFT+RSi vous rencontrez toujours des problèmes, vous pouvez mettre à jour le technicien de service vous-même en appuyant sur le bouton Mettre à jour.
Lors de la mise à jour des actifs PWA, vous ne pourrez peut-être pas voir les nouveaux actifs chargés. Si tel est le cas, assurez-vous de réinstaller l'application.
Nous utilisons l'interface de notification de l'API Notifications pour configurer et afficher les notifications de bureau à l'utilisateur. Vous pouvez en savoir plus sur l'API Notifications dans MDN Web Docs.
Vérification de la prise en charge de l'API via
'Notification' in window.
| Plate-forme | Courageux | Chrome | Bord | Firefox | Safari | Observations |
|---|---|---|---|---|---|---|
| macOS | Oui | Oui | Oui | Oui | Oui | - - |
| IOS | Non | Non | Non | Non | Oui¹ | ¹ la fonctionnalité expérimentale doit être activée. |
| Androïde | Oui | Oui | Oui | Oui | N / A | - - |
Demander des autorisations de notification via
Notification.requestPermission()à l'aidePromises.
| Plate-forme | Courageux | Chrome | Bord | Firefox | Safari | Observations |
|---|---|---|---|---|---|---|
| macOS | Oui¹ | Oui¹ | Oui¹ | Oui | Oui | ¹ peut nécessiter des étapes manuelles supplémentaires pour accorder l'autorisation. |
| IOS | N / A | N / A | N / A | N / A | Oui¹ | ¹ Prise en charge PWA uniquement. |
| Androïde | Oui | Oui | Oui¹ | Oui ² | N / A | ¹ peut nécessiter des étapes manuelles supplémentaires pour accorder l'autorisation. ² peut afficher une page non sécurisée en raison d'un certificat auto-signé. |
Création d'une nouvelle instance de notification à l'aide de
new Notification(title, options);
| Plate-forme | Courageux | Chrome | Bord | Firefox | Safari | Observations |
|---|---|---|---|---|---|---|
| macOS | Oui | Oui | Oui | Oui | Oui | - - |
| IOS | N / A | N / A | N / A | N / A | Non ¹ | ¹ même pas de PWA. |
| Androïde | Non | Non | Non | Oui | N / A | - - |
Les techniciens de service agissent essentiellement comme des serveurs proxy situés entre les applications Web, le navigateur et le réseau (le cas échéant). Vous pouvez en savoir plus sur l'API Service Worker dans MDN Web Docs.
| Plate-forme | Courageux | Chrome | Bord | Firefox | Safari | Observations |
|---|---|---|---|---|---|---|
| macOS | Oui | Oui | Oui | Oui | Oui | - - |
| IOS | Oui | Oui | Oui | Oui | Oui | - - |
| Androïde | Oui | Oui | Oui | Oui | N / A | - - |
Une application Web progressive (PWA) est une application créée à l'aide de technologies de plate-forme Web, mais qui offre une expérience utilisateur similaire à celle d'une application spécifique à une plate-forme. Vous pouvez en savoir plus sur les applications Web progressives dans MDN Web Docs.
| Plate-forme | Courageux | Chrome | Bord | Firefox | Safari | Observations |
|---|---|---|---|---|---|---|
| macOS | Oui¹ | Oui¹ | Oui¹ | Non | Non | ¹ peut être installé à partir du bouton Install PWA à droite de la barre d'adresse ou du bouton Options > Install app . |
| IOS | Non | Non | Non | Non | Oui¹ | ¹ peut être installé à partir du bouton Share > Add to Home Screen . |
| Androïde | Oui¹ | Oui¹ | Oui¹ | Oui ² | N / A | ¹ peut être installé à partir de la fenêtre contextuelle Add to Home Screen ou du bouton Options > Install app .² peut être installé à partir du bouton Options > Add to Home screen . |
Toutes les images, icônes et marques appartiennent à leurs propriétaires respectifs. Apex Legends est une marque déposée d'EA. Les ressources, matériaux et icônes du jeu appartiennent à Electronic Arts. Sachez qu'EA et Respawn n'approuvent pas le contenu de ce site Web et ne sont pas responsables du contenu de ce site Web.
