apex map rotation

Apex Legends — ротация карт

НЕОФИЦИАЛЬНОЕ приложение Apex Legends Map Rotation, которое позволяет пользователям видеть текущую и следующую карты, а также подписываться на уведомления об изменении карты.

Мотивация

Несмотря на то, что Apex Legends Status — потрясающий веб-сайт с функцией ротации карт, на нем отсутствуют уведомления. Поэтому вам придется проверять вручную каждый раз, когда вам нужно узнать, какая карта текущая.

Ротация карт Apex Legends возникла благодаря попытке узнать, какая карта появится, чтобы вам больше не приходилось проверять ее самостоятельно.

Функции

• Вращение карты в реальном времени
• Уведомления на переднем плане — фоновые уведомления уже в пути!
  • Настраиваемые карты
  • Настраиваемый порог
• Устанавливаемое приложение (см. поддержку)

Способствовать

Добро пожаловать и спасибо за вклад в Apex Legends — ротация карт!

Клонировать репозиторий

Прежде всего клонируйте репозиторий с 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

Установить пакеты

Затем используйте npm для установки зависимостей:

npm install

Настройка переменных среды

Скопируйте файл .env в .env.local . Заполните пустые переменные среды их правильными значениями, как показано ниже:

• VITE_APEX_LEGENDS_API_SECRET_TOKEN : неофициальный секретный токен Apex Legends API для аутентификации.

Запустите приложение в режиме разработки.

Теперь по большей части вы будете использовать эту команду для запуска приложения:

npm run start

Запустить приложение в производственном режиме

В противном случае, если вы хотите запустить приложение с использованием производственного кода, используйте вместо этого следующее:

npm run start:production

Линтинг и форматирование кода

Мы используем ESLint для поиска и устранения проблем в нашем коде. Проверьте свой локальный код, выполнив следующую команду:

npm run lint

Кроме того, вы можете установить расширения ESLint и Prettier для Visual Studio Code, которые помогут вам обнаруживать ошибки и исправлять формат кода.

Тесты

Мы используем Vitest в качестве среды тестирования нашего приложения. Проверьте свои локальные тесты, выполнив следующую команду:

npm run test

Кроме того, вы можете установить расширение Vitest для Visual Studio Code для быстрого запуска тестов.

Непрерывная интеграция

Рабочий процесс непрерывной интеграции запускается при каждом отправке в main ветку. Если ваши изменения не проходят этапы Lint и Test , рабочий процесс завершается сбоем. Пожалуйста, обязательно исправьте эти проблемы в отдельном коммите.

Развертывания

В настоящее время непрерывное развертывание не настроено; вам придется запустить эту команду вручную:

npm run deploy

Пожалуйста, воздержитесь от внедрения в производство без предварительного уведомления.

Прогрессивное веб-приложение

Это экспериментальная функция, и ее можно отключить в любой момент.

Мы используем Vite для запуска и сборки приложения. Поэтому для настройки Progressive Web Application мы используем плагин Vite PWA, который позволяет выполнить настройку без проблем.

Генерация ресурсов PWA

Для создания минимальных необходимых ресурсов PWA мы используем Vite PWA Assets Generator. Команда ниже сгенерирует ресурсы на основе файла public/logo.svg используя конфигурацию из pwa-assets.config.ts. Перед запуском убедитесь, что он обновлен:

npm run generate-pwa-assets

Устранение неполадок PWA

Установка

Если у вас возникли проблемы с установкой PWA, вы можете использовать Lighthouse из инструментов разработчика, чтобы проверить, чего не хватает для его работы.

Вот шаги для браузеров на базе Chromium:

1. Открыть инструменты разработки
2. Перейти на вкладку «Маяк»
3. Проверьте категорию прогрессивных веб-приложений
4. Нажмите кнопку «Анализ загрузки страницы».
5. Обзор результатов

Обновить сервисный работник

Приложение должно запросить наличие обновлений для Service Worker. Однако, чтобы упростить задачу, вы можете включить опцию в Dev Tools для обновления сервис-воркеров при перезагрузке:

1. Открыть инструменты разработки
2. Перейдите на вкладку «Приложение»
3. Проверьте опцию «Обновить при перезагрузке»
4. Обновите вкладку, используя CTRL+SHIFT+R

Если проблемы по-прежнему возникают, вы можете обновить сервис-воркер самостоятельно, нажав кнопку «Обновить».

Обновить ресурсы

При обновлении ресурсов PWA вы можете не увидеть загруженные новые ресурсы. В этом случае обязательно переустановите приложение.

Кроссбраузерная совместимость (HTTPS)

Уведомления

Мы используем интерфейс уведомлений API уведомлений для настройки и отображения уведомлений на рабочем столе пользователю. Подробнее об API уведомлений можно прочитать в веб-документах MDN.

API уведомлений

Проверка поддержки API через 'Notification' in window .

Платформа	Храбрый	Хром	Край	Firefox	Сафари	Наблюдения
macOS	Да	Да	Да	Да	Да	- -
iOS	Нет	Нет	Нет	Нет	Да ¹	¹ должна быть включена экспериментальная функция.
Андроид	Да	Да	Да	Да	Н/Д	- -

Разрешение на быстрое уведомление

Запрос разрешений на уведомления через Notification.requestPermission() с использованием Promises .

Платформа	Храбрый	Хром	Край	Firefox	Сафари	Наблюдения
macOS	Да ¹	Да ¹	Да ¹	Да	Да	¹ для предоставления разрешения могут потребоваться дополнительные действия вручную.
iOS	Н/Д	Н/Д	Н/Д	Н/Д	Да ¹	¹ Поддержка только PWA.
Андроид	Да	Да	Да ¹	Да ²	Н/Д	¹ для предоставления разрешения могут потребоваться дополнительные действия вручную. ² может отображать незащищенную страницу из-за самоподписанного сертификата.

Отправлять уведомления

Создание нового экземпляра уведомления с использованием new Notification(title, options);

Платформа	Храбрый	Хром	Край	Firefox	Сафари	Наблюдения
macOS	Да	Да	Да	Да	Да	- -
iOS	Н/Д	Н/Д	Н/Д	Н/Д	Нет ¹	¹ даже не из PWA.
Андроид	Нет	Нет	Нет	Да	Н/Д	- -

Service Workers (требуется HTTPS, кроме localhost)

Сервис-воркеры по сути действуют как прокси-серверы, которые находятся между веб-приложениями, браузером и сетью (если она доступна). Вы можете прочитать больше об API Service Worker в веб-документах MDN.

Платформа	Храбрый	Хром	Край	Firefox	Сафари	Наблюдения
macOS	Да	Да	Да	Да	Да	- -
iOS	Да	Да	Да	Да	Да	- -
Андроид	Да	Да	Да	Да	Н/Д	- -

Прогрессивное веб-приложение (требуется HTTPS, кроме localhost)

Прогрессивное веб-приложение (PWA) — это приложение, созданное с использованием технологий веб-платформы, но обеспечивающее взаимодействие с пользователем так же, как и приложение для конкретной платформы. Вы можете прочитать больше о прогрессивных веб-приложениях в веб-документах MDN.

Платформа	Храбрый	Хром	Край	Firefox	Сафари	Наблюдения
macOS	Да ¹	Да ¹	Да ¹	Нет	Нет	¹ можно установить, нажав кнопку Install PWA справа от адресной строки или кнопку Options > Install app .
iOS	Нет	Нет	Нет	Нет	Да ¹	¹ можно установить, нажав кнопку Share > Add to Home Screen .
Андроид	Да ¹	Да ¹	Да ¹	Да ²	Н/Д	¹ можно установить из всплывающего окна Add to Home Screen или Options > Install app . ² можно установить, выбрав Options > Add to Home screen .

Кредиты

• Спасибо EA и команде Respawn за разработку Apex Legends.
• Спасибо команде неофициального API статуса Apex Legends за создание такого замечательного API.
• Спасибо веб-сайту Apex Legends Status за ресурсы карты.

Отказ от ответственности

Все изображения, значки и товарные знаки принадлежат их владельцам. Apex Legends является зарегистрированной торговой маркой EA. Игровые ресурсы, материалы и значки принадлежат Electronic Arts. Имейте в виду, что EA и Respawn не одобряют содержимое этого веб-сайта и не несут ответственности за его содержание.