apex map rotation
1.0.0
사용자가 지도 변경 알림을 구독하는 것 외에도 현재 및 다음 지도를 볼 수 있는 비공식 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우리는 코드에서 문제를 찾고 수정하기 위해 ESLint를 사용합니다. 다음 명령을 실행하여 로컬 코드를 확인하십시오.
npm run lint또한 Visual Studio Code용 ESLint 및 Prettier 확장을 설치하면 오류를 감지하고 코드 형식을 수정하는 데 도움이 될 수 있습니다.
우리는 Vitest를 애플리케이션의 테스트 프레임워크로 사용합니다. 다음 명령을 실행하여 로컬 테스트를 확인하십시오.
npm run test또한 Visual Studio Code용 Vitest 확장을 설치하여 테스트를 빠르게 실행할 수도 있습니다.
지속적인 통합 워크플로는 main 분기에 대한 모든 푸시에서 실행됩니다. 변경 사항이 Lint 및 Test 단계를 통과하지 못하면 워크플로가 실패합니다. 별도의 커밋에서 해당 문제를 수정하시기 바랍니다.
현재 지속적인 배포가 구성되어 있지 않습니다. 이 명령을 수동으로 실행해야 합니다.
npm run deploy예고 없이 프로덕션에 배포하는 것을 삼가해 주시기 바랍니다.
이는 실험적인 기능이며 언제든지 비활성화될 수 있습니다.
우리는 Vite를 사용하여 애플리케이션을 실행하고 빌드합니다. 따라서 Progressive Web Application을 설정하기 위해 구성을 원활하게 만드는 Vite PWA 플러그인을 사용합니다.
필요한 최소한의 PWA 자산을 생성하기 위해 Vite PWA 자산 생성기를 사용합니다. 아래 명령은 pwa-assets.config.ts의 구성을 사용하여 public/logo.svg 파일을 기반으로 자산을 생성합니다. 실행하기 전에 업데이트되었는지 확인하세요.
npm run generate-pwa-assetsPWA 설치에 문제가 있는 경우 개발자 도구에서 Lighthouse를 사용하여 작동에 누락된 부분을 확인할 수 있습니다.
Chromium 기반 브라우저의 단계는 다음과 같습니다.
서비스 워커에 업데이트가 있으면 애플리케이션에 메시지가 표시됩니다. 그러나 작업을 더 쉽게 하기 위해 개발자 도구에서 옵션을 켜서 다시 로드할 때 서비스 워커를 업데이트할 수 있습니다.
CTRL+SHIFT+R 사용하여 탭을 다시 로드하세요.여전히 문제가 발생하는 경우 업데이트 버튼을 눌러 서비스 워커를 직접 업데이트할 수 있습니다.
PWA 자산을 업데이트할 때 로드된 새 자산을 보지 못할 수도 있습니다. 그러한 경우에는 반드시 해당 애플리케이션을 다시 설치하시기 바랍니다.
우리는 알림 API의 알림 인터페이스를 사용하여 데스크톱 알림을 구성하고 사용자에게 표시합니다. MDN 웹 문서에서 알림 API에 대한 자세한 내용을 읽을 수 있습니다.
'Notification' in window을 통해 API 지원을 확인합니다.
| 플랫폼 | 용감한 | 크롬 | 가장자리 | 파이어폭스 | 원정 여행 | 관찰 |
|---|---|---|---|---|---|---|
| macOS | 예 | 예 | 예 | 예 | 예 | - - |
| iOS | 아니요 | 아니요 | 아니요 | 아니요 | 예 ¹ | ¹ 실험적 기능을 활성화해야 합니다. |
| 기계적 인조 인간 | 예 | 예 | 예 | 예 | 해당 없음 | - - |
Promises사용하여Notification.requestPermission()통해 알림 권한을 요청합니다.
| 플랫폼 | 용감한 | 크롬 | 가장자리 | 파이어폭스 | 원정 여행 | 관찰 |
|---|---|---|---|---|---|---|
| macOS | 예 ¹ | 예 ¹ | 예 ¹ | 예 | 예 | ¹ 권한을 부여하려면 추가 수동 단계가 필요할 수 있습니다. |
| iOS | 해당 없음 | 해당 없음 | 해당 없음 | 해당 없음 | 예 ¹ | ¹ PWA만 지원합니다. |
| 기계적 인조 인간 | 예 | 예 | 예 ¹ | 예² | 해당 없음 | ¹ 권한을 부여하려면 추가 수동 단계가 필요할 수 있습니다. ² 자체 서명된 인증서로 인해 비보안 페이지가 표시될 수 있습니다. |
new Notification(title, options);
| 플랫폼 | 용감한 | 크롬 | 가장자리 | 파이어폭스 | 원정 여행 | 관찰 |
|---|---|---|---|---|---|---|
| macOS | 예 | 예 | 예 | 예 | 예 | - - |
| iOS | 해당 없음 | 해당 없음 | 해당 없음 | 해당 없음 | 아니요 ¹ | ¹ PWA에서도 마찬가지입니다. |
| 기계적 인조 인간 | 아니요 | 아니요 | 아니요 | 예 | 해당 없음 | - - |
서비스 워커는 기본적으로 웹 애플리케이션, 브라우저 및 네트워크(사용 가능한 경우) 사이에 있는 프록시 서버 역할을 합니다. MDN 웹 문서에서 Service Worker API에 대한 자세한 내용을 읽을 수 있습니다.
| 플랫폼 | 용감한 | 크롬 | 가장자리 | 파이어폭스 | 원정 여행 | 관찰 |
|---|---|---|---|---|---|---|
| macOS | 예 | 예 | 예 | 예 | 예 | - - |
| iOS | 예 | 예 | 예 | 예 | 예 | - - |
| 기계적 인조 인간 | 예 | 예 | 예 | 예 | 해당 없음 | - - |
PWA(프로그레시브 웹 앱)는 웹 플랫폼 기술을 사용하여 구축되었지만 플랫폼별 앱과 같은 사용자 경험을 제공하는 앱입니다. MDN 웹 문서에서 프로그레시브 웹 앱에 대한 자세한 내용을 읽을 수 있습니다.
| 플랫폼 | 용감한 | 크롬 | 가장자리 | 파이어폭스 | 원정 여행 | 관찰 |
|---|---|---|---|---|---|---|
| macOS | 예 ¹ | 예 ¹ | 예 ¹ | 아니요 | 아니요 | ¹는 주소 표시줄 오른쪽의 Install PWA 버튼 또는 Options > Install app 버튼을 통해 설치할 수 있습니다. |
| iOS | 아니요 | 아니요 | 아니요 | 아니요 | 예 ¹ | ¹는 Share > Add to Home Screen 버튼을 통해 설치할 수 있습니다. |
| 기계적 인조 인간 | 예 ¹ | 예 ¹ | 예 ¹ | 예² | 해당 없음 | ¹은 Add to Home Screen 팝업 또는 Options > Install app 버튼을 통해 설치할 수 있습니다.²는 Options > Add to Home screen 버튼을 통해 설치할 수 있습니다. |
모든 이미지, 아이콘 및 상표는 해당 소유자의 자산입니다. Apex Legends는 EA의 등록 상표입니다. 게임 자산, 자료 및 아이콘은 Electronic Arts에 속합니다. EA와 Respawn은 이 웹사이트의 콘텐츠를 보증하지 않으며 이 웹사이트의 콘텐츠에 대해 책임을 지지 않습니다.
