apex map rotation

Apex Legends - Rotación del mapa

Aplicación NO OFICIAL de rotación de mapas de Apex Legends que permite a los usuarios ver los mapas actuales y siguientes, además de suscribirse a notificaciones de cambios de mapas.

Motivación

Aunque Apex Legends Status es un sitio web fantástico en cuanto a su función de rotación de mapas, carece de notificaciones. Por lo tanto, tendrías que comprobar manualmente cada vez que necesites saber cuál es el mapa actual.

Apex Legends Map Rotation nació de un esfuerzo por poder saber qué mapa se avecina para que no tengas que volver a comprobarlo tú mismo nunca más.

Características

• Rotación de mapas en tiempo real
• Notificaciones en primer plano: ¡las notificaciones en segundo plano están en camino!
  • Mapas personalizables
  • Umbral personalizable
• Aplicación instalable (ver soporte)

Contribuir

¡Bienvenido y gracias por contribuir a Apex Legends - Rotación de mapas!

Repositorio de clones

En primer lugar, clona el repositorio de 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

Instalar paquetes

Luego, use npm para instalar las dependencias:

npm install

Configurar variables de entorno

Haga una copia del archivo .env en .env.local . Complete las variables de entorno vacías con su valor adecuado de la siguiente manera:

• VITE_APEX_LEGENDS_API_SECRET_TOKEN : token secreto de API de Apex Legends no oficial para autenticación

Iniciar aplicación en modo Desarrollo

Ahora, en su mayor parte, utilizará este comando para ejecutar la aplicación:

npm run start

Iniciar aplicación en modo Producción

De lo contrario, si desea ejecutar la aplicación utilizando código de producción, utilice esto:

npm run start:production

Linting y formato de código

Usamos ESLint para encontrar y solucionar problemas en nuestro código. Verifique su código local ejecutando el siguiente comando:

npm run lint

Además, puede instalar las extensiones ESLint y Prettier para Visual Studio Code para ayudarle a detectar errores y corregir el formato del código.

Pruebas

Utilizamos Vitest como marco de prueba para nuestra aplicación. Verifique sus pruebas locales ejecutando el siguiente comando:

npm run test

Además, puede instalar la extensión Vitest para Visual Studio Code para ejecutar pruebas rápidamente.

Integración Continua

Se ejecuta un flujo de trabajo de integración continua en cada envío a la rama main . Cuando sus cambios no pasan los pasos Lint y Test , el flujo de trabajo falla. Por favor, asegúrese de corregir esos problemas en una confirmación por separado.

Implementaciones

Actualmente, no hay ninguna implementación continua configurada; Tendrás que ejecutar este comando manualmente:

npm run deploy

Por favor, absténgase de implementarlo en producción sin previo aviso.

Aplicación web progresiva

Esta es una función experimental y puede desactivarse en cualquier momento.

Usamos Vite para ejecutar y construir la aplicación. Por lo tanto, para configurar la aplicación web progresiva, utilizamos el complemento Vite PWA, que realiza la configuración sin problemas.

Generación de activos PWA

Para generar los activos PWA mínimos necesarios, utilizamos Vite PWA Assets Generator. El siguiente comando generará los recursos basados ​​en el archivo public/logo.svg usando la configuración de pwa-assets.config.ts. Asegúrese de que esté actualizado antes de ejecutarlo:

npm run generate-pwa-assets

Solución de problemas de PWA

Instalación

Si tiene problemas con la instalación de PWA, puede usar Lighthouse desde las herramientas de desarrollo para verificar qué falta para que funcione.

Estos son los pasos para los navegadores basados ​​en Chromium:

1. Abrir herramientas de desarrollo
2. Ir a la pestaña Faro
3. Consulte la categoría de aplicación web progresiva
4. Presione el botón de carga de página Analizar
5. Revisar resultados

Trabajador del servicio de actualización

La aplicación debería preguntar si hay alguna actualización para Service Worker. Sin embargo, para facilitar las cosas, puede activar una opción desde Dev Tools para actualizar los trabajadores del servicio al recargar:

1. Abrir herramientas de desarrollo
2. Ir a la pestaña Aplicación
3. Marque la opción Actualizar al recargar
4. Vuelva a cargar la pestaña usando CTRL+SHIFT+R

Si aún tiene problemas, puede actualizar el trabajador del servicio usted mismo presionando el botón Actualizar.

Actualizar activos

Al actualizar los activos de PWA, es posible que no pueda ver los nuevos activos cargados. Si ese es el caso, asegúrese de reinstalar la aplicación.

Compatibilidad entre navegadores (HTTPS)

Notificaciones

Usamos la interfaz de notificación de la API de notificaciones para configurar y mostrar notificaciones de escritorio al usuario. Puede leer más sobre la API de notificaciones en MDN Web Docs.

API de notificación

Comprobando el soporte de API a través de 'Notification' in window .

Plataforma	Corajudo	Cromo	Borde	Firefox	Safari	Observaciones
macos	Sí	Sí	Sí	Sí	Sí	- -
iOS	No	No	No	No	Sí ¹	¹ La función experimental debe estar habilitada.
Androide	Sí	Sí	Sí	Sí	N / A	- -

Permiso de notificación inmediata

Solicitar permisos de notificación a través de Notification.requestPermission() usando Promises .

Plataforma	Corajudo	Cromo	Borde	Firefox	Safari	Observaciones
macos	Sí ¹	Sí ¹	Sí ¹	Sí	Sí	¹ puede requerir pasos manuales adicionales para otorgar el permiso.
iOS	N / A	N / A	N / A	N / A	Sí ¹	¹ Solo compatibilidad con PWA.
Androide	Sí	Sí	Sí ¹	Sí ²	N / A	¹ puede requerir pasos manuales adicionales para otorgar el permiso. ² puede mostrar una página no segura debido al certificado autofirmado.

Enviar notificaciones

Crear una nueva instancia de Notificación usando new Notification(title, options);

Plataforma	Corajudo	Cromo	Borde	Firefox	Safari	Observaciones
macos	Sí	Sí	Sí	Sí	Sí	- -
iOS	N / A	N / A	N / A	N / A	No ¹	¹ ni siquiera de PWA.
Androide	No	No	No	Sí	N / A	- -

Trabajadores de servicio (se requiere HTTPS, excepto localhost)

Los trabajadores de servicios actúan esencialmente como servidores proxy que se ubican entre las aplicaciones web, el navegador y la red (cuando esté disponible). Puede leer más sobre la API de Service Worker en MDN Web Docs.

Plataforma	Corajudo	Cromo	Borde	Firefox	Safari	Observaciones
macos	Sí	Sí	Sí	Sí	Sí	- -
iOS	Sí	Sí	Sí	Sí	Sí	- -
Androide	Sí	Sí	Sí	Sí	N / A	- -

Aplicación web progresiva (se requiere HTTPS, excepto localhost)

Una aplicación web progresiva (PWA) es una aplicación creada utilizando tecnologías de plataforma web, pero que proporciona una experiencia de usuario similar a la de una aplicación específica de una plataforma. Puede leer más sobre las aplicaciones web progresivas en MDN Web Docs.

Plataforma	Corajudo	Cromo	Borde	Firefox	Safari	Observaciones
macos	Sí ¹	Sí ¹	Sí ¹	No	No	¹ se puede instalar desde el botón Install PWA a la derecha de la barra de direcciones o desde el botón Options > Install app .
iOS	No	No	No	No	Sí ¹	¹ se puede instalar desde el botón Share > Add to Home Screen .
Androide	Sí ¹	Sí ¹	Sí ¹	Sí²	N / A	¹ se puede instalar desde la ventana emergente Add to Home Screen o desde el botón Options > Install app . ² se puede instalar desde el botón Options > Add to Home screen .

Créditos

• Gracias a EA y al equipo de Respawn por haber desarrollado Apex Legends.
• Gracias al equipo detrás de la API de estado no oficial de Apex Legends por crear una API tan excelente.
• Gracias al sitio web de Apex Legends Status por sus recursos de mapas.

Descargo de responsabilidad

Todas las imágenes, íconos y marcas comerciales pertenecen a sus respectivos dueños. Apex Legends es una marca registrada de EA. Los recursos, materiales e íconos del juego pertenecen a Electronic Arts. Tenga en cuenta que EA y Respawn no respaldan el contenido de este sitio web ni son responsables del contenido de este sitio web.