UNOFFICIAL Apex Legends Map Rotation application that allows users to see the current and next maps in addition to subscribing to map change notifications.
Even though Apex Legends Status is a kick-ass website along its map rotation feature, it lacks notifications. Therefore, you would have to check manually every time you need to know which is the current map.
Apex Legends Map Rotation was born from an effort to be able to know what map is coming up so you don't have to check by yourself ever again.
- Real-time map rotation
- Foreground notifications — background notifications are on the way!
- Customizable maps
- Customizable threshold
- Installable application (see support)
Welcome, and thank you for contributing to Apex Legends - Map Rotation!
First off, clone the repository from GitHub:
# HTTPS
git clone https://github.com/lgaspari/apex-map-rotation.git && cd apex-map-rotation
# SSH
git clone git@github.com:lgaspari/apex-map-rotation.git && cd apex-map-rotationThen, use npm to install the dependencies:
npm installMake a copy of the .env file into .env.local. Fill empty environment variables with their proper value as the following:
VITE_APEX_LEGENDS_API_SECRET_TOKEN: Unofficial Apex Legends API secret token for authentication
Now, for the most part, you will be using this command to run the application:
npm run startOtherwise, if you would like to run the application using production code, use this instead:
npm run start:productionWe use ESLint for finding and fixing problems in our code. Check your local code by running the following command:
npm run lintIn addition, you may install ESLint and Prettier extensions for Visual Studio Code to help you detect errors and correct code format.
We use Vitest as the testing framework for our application. Check your local tests by running the following command:
npm run testIn addition, you may install Vitest extension for Visual Studio Code to run tests quickly.
A continuous integration workflow runs on every push to the main branch. When your changes do not pass the Lint and Test steps, then the workflow fails. Please, make sure to correct those issues in a separate commit.
Currently, there is no continuous deployment configured; you will have to run this command manually:
npm run deployPlease, refrain from deploying into production without notice.
This is an experimental feature and it might be disabled at any time.
We use Vite to run and build the application. Therefore, for setting up the Progressive Web Application, we use the Vite PWA plugin, which makes the configuration seamlessly.
For generating the minimal PWA assets needed, we use Vite PWA Assets Generator. The command below will generate the assets based on the file public/logo.svg using the configuration from pwa-assets.config.ts. Make sure it's been updated before running it:
npm run generate-pwa-assetsIf you're having issues with the PWA installation, you can use Lighthouse from the Dev Tools in order to check what's missing for it to work.
These are the steps for Chromium based browsers:
- Open Dev Tools
- Go to Lighthouse tab
- Check Progressive Web App category
- Press Analyze page load button
- Review results
The application should prompt if there's any update to the Service Worker. However, to make things easier, you can turn on an option from Dev Tools to update the service workers on reload:
- Open Dev Tools
- Go to Application tab
- Check Update on reload option
- Reload the tab using
CTRL+SHIFT+R
If you're still facing issues you can update the service worker yourself by pressing the Update button.
When updating PWA assets, you might not be able to see the new assets loaded. If that's the case, please make sure to re-install the application.
We use the Notification interface of the Notifications API to configure and display desktop notifications to the user. You can read more about the Notifications API in MDN Web Docs.
Checking API support through
'Notification' in window.
| Platform | Brave | Chrome | Edge | Firefox | Safari | Observations |
|---|---|---|---|---|---|---|
| macOS | Yes | Yes | Yes | Yes | Yes | - - |
| iOS | No | No | No | No | Yes ¹ | ¹ experimental feature must be enabled. |
| Android | Yes | Yes | Yes | Yes | N/A | - - |
Asking for Notification Permissions through
Notification.requestPermission()usingPromises.
| Platform | Brave | Chrome | Edge | Firefox | Safari | Observations |
|---|---|---|---|---|---|---|
| macOS | Yes ¹ | Yes ¹ | Yes ¹ | Yes | Yes | ¹ may require additional manual steps to grant permission. |
| iOS | N/A | N/A | N/A | N/A | Yes ¹ | ¹ PWA support only. |
| Android | Yes | Yes | Yes ¹ | Yes ² | N/A | ¹ may require additional manual steps to grant permission. ² may display non-secure page due to self-signed certificate. |
Creating a new Notification instance using
new Notification(title, options);
| Platform | Brave | Chrome | Edge | Firefox | Safari | Observations |
|---|---|---|---|---|---|---|
| macOS | Yes | Yes | Yes | Yes | Yes | - - |
| iOS | N/A | N/A | N/A | N/A | No ¹ | ¹ not even from PWA. |
| Android | No | No | No | Yes | N/A | - - |
Service workers essentially act as proxy servers that sit between web applications, the browser, and the network (when available). You can read more about the Service Worker API in MDN Web Docs.
| Platform | Brave | Chrome | Edge | Firefox | Safari | Observations |
|---|---|---|---|---|---|---|
| macOS | Yes | Yes | Yes | Yes | Yes | - - |
| iOS | Yes | Yes | Yes | Yes | Yes | - - |
| Android | Yes | Yes | Yes | Yes | N/A | - - |
A progressive web app (PWA) is an app that's built using web platform technologies, but that provides a user experience like that of a platform-specific app. You can read more about Progressive Web Apps in MDN Web Docs.
| Platform | Brave | Chrome | Edge | Firefox | Safari | Observations |
|---|---|---|---|---|---|---|
| macOS | Yes ¹ | Yes ¹ | Yes ¹ | No | No | ¹ can be installed from Install PWA button at right of address bar or Options > Install app button. |
| iOS | No | No | No | No | Yes ¹ | ¹ can be installed from Share > Add to Home Screen button. |
| Android | Yes ¹ | Yes ¹ | Yes ¹ | Yes ² | N/A | ¹ can be installed from Add to Home Screen popup or Options > Install app button. ² can be installed from Options > Add to Home screen button. |
- Thanks to EA and the Respawn team for having developed the Apex Legends.
- Thanks to the team behind the Unofficial Apex Legends Status API for creating such a great API.
- Thanks to the Apex Legends Status website for their map assets.
All images, icons, and trademarks belong to their respective owner. Apex Legends is a registered trademark of EA. Game assets, materials, and icons belong to Electronic Arts. Be aware that EA and Respawn do not endorse the content of this website or are responsible for this website's content.