apex map rotation

Apex Legends - 地图旋转

非官方Apex Legends 地图旋转应用程序，除了订阅地图更改通知之外，还允许用户查看当前和下一张地图。

动机

尽管 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

Linting 和代码格式

我们使用 ESLint 来查找和修复代码中的问题。通过运行以下命令检查您的本地代码：

npm run lint

此外，您可以安装 Visual Studio Code 的 ESLint 和 Prettier 扩展，以帮助您检测错误并纠正代码格式。

测试

我们使用 Vitest 作为我们应用程序的测试框架。通过运行以下命令检查本地测试：

npm run test

此外，您可以安装 Visual Studio Code 的 Vitest 扩展来快速运行测试。

持续集成

每次推送到main分支时都会运行持续集成工作流程。当您的更改未通过Lint和Test步骤时，工作流程将失败。请确保在单独的提交中更正这些问题。

部署

目前没有配置持续部署；您必须手动运行此命令：

npm run deploy

请不要在没有通知的情况下部署到生产中。

渐进式网络应用程序

这是一项实验性功能，可能随时被禁用。

我们使用 Vite 来运行和构建应用程序。因此，为了设置渐进式Web应用程序，我们使用Vite PWA插件，这使得配置无缝。

PWA 资产生成

为了生成所需的最少 PWA 资产，我们使用 Vite PWA 资产生成器。下面的命令将使用 pwa-assets.config.ts 中的配置基于文件public/logo.svg生成资产。运行之前请确保它已更新：

npm run generate-pwa-assets

PWA 故障排除

安装

如果您在安装 PWA 时遇到问题，可以使用开发工具中的 Lighthouse 来检查缺少哪些内容以使其正常工作。

以下是基于 Chromium 的浏览器的步骤：

1. 打开开发工具
2. 转到灯塔选项卡
3. 检查渐进式 Web 应用程序类别
4. 按分析页面加载按钮
5. 审核结果

更新服务人员

如果 Service Worker 有任何更新，应用程序应提示。但是，为了让事情变得更容易，您可以打开开发工具中的一个选项来在重新加载时更新服务工作人员：

1. 打开开发工具
2. 转到应用程序选项卡
3. 检查重新加载时更新选项
4. 使用CTRL+SHIFT+R重新加载选项卡

如果您仍然遇到问题，您可以通过按“更新”按钮自行更新 Service Worker。

更新资产

更新 PWA 资产时，您可能看不到加载的新资产。如果是这种情况，请确保重新安装该应用程序。

跨浏览器兼容性 (HTTPS)

通知

我们使用通知 API 的通知接口来配置并向用户显示桌面通知。您可以在 MDN Web 文档中阅读有关通知 API 的更多信息。

通知API

通过'Notification' in window检查 API 支持。

平台	勇敢的	铬合金	边缘	火狐浏览器	狩猎之旅	观察结果
macOS	是的	是的	是的	是的	是的	- -
iOS系统	不	不	不	不	是的 1	1必须启用实验性功能。
安卓	是的	是的	是的	是的	不适用	- -

提示通知权限

使用Promises通过Notification.requestPermission()请求通知权限。

平台	勇敢的	铬合金	边缘	火狐浏览器	狩猎之旅	观察结果
macOS	是的 1	是的 1	是的 1	是的	是的	¹可能需要额外的手动步骤来授予权限。
iOS系统	不适用	不适用	不适用	不适用	是的 1	仅限PWA 支持。
安卓	是的	是的	是的 1	是 ²	不适用	¹可能需要额外的手动步骤来授予权限。 ²由于自签名证书，可能会显示非安全页面。

发送通知

使用new Notification(title, options);

平台	勇敢的	铬合金	边缘	火狐浏览器	狩猎之旅	观察结果
macOS	是的	是的	是的	是的	是的	- -
iOS系统	不适用	不适用	不适用	不适用	没有 1	甚至 PWA 也没有。
安卓	不	不	不	是的	不适用	- -

Service Workers（需要 HTTPS，本地主机除外）

Service Worker 本质上充当位于 Web 应用程序、浏览器和网络（如果可用）之间的代理服务器。您可以在 MDN Web 文档中阅读有关 Service Worker API 的更多信息。

平台	勇敢的	铬合金	边缘	火狐浏览器	狩猎之旅	观察结果
macOS	是的	是的	是的	是的	是的	- -
iOS系统	是的	是的	是的	是的	是的	- -
安卓	是的	是的	是的	是的	不适用	- -

渐进式 Web 应用程序（需要 HTTPS，本地主机除外）

渐进式 Web 应用程序 (PWA) 是使用 Web 平台技术构建的应用程序，但提供类似于特定于平台的应用程序的用户体验。您可以在 MDN Web 文档中阅读有关渐进式 Web 应用程序的更多信息。

平台	勇敢的	铬合金	边缘	火狐浏览器	狩猎之旅	观察结果
macOS	是的 1	是的 1	是的 1	不	不	1可以通过地址栏右侧的Install PWA按钮或Options > Install app按钮进行安装。
iOS系统	不	不	不	不	是的 1	1可以通过Share > Add to Home Screen按钮安装。
安卓	是的 1	是的 1	是的 1	是 ²	不适用	1可以通过Add to Home Screen弹出窗口或Options > Install app按钮进行安装。 ²可以通过Options > Add to Home screen按钮进行安装。

制作人员

• 感谢 EA 和 Respawn 团队开发了 Apex Legends。
• 感谢非官方 Apex Legends Status API 背后的团队创建了如此出色的 API。
• 感谢 Apex Legends Status 网站提供的地图资源。

免责声明

所有图像、图标和商标均属于其各自所有者。 Apex Legends 是 EA 的注册商标。游戏资产、材料和图标属于艺电公司。请注意，EA 和 Respawn 不认可本网站的内容，也不对此网站的内容负责。