apex map rotation

Apex Legends - Rotasi Peta

Aplikasi Rotasi Peta Apex Legends UNDANG yang memungkinkan pengguna melihat peta saat ini dan selanjutnya selain berlangganan pemberitahuan perubahan peta.

Motivasi

Meskipun Status Apex Legends adalah situs web keren dengan fitur rotasi petanya, namun tidak ada notifikasi. Oleh karena itu, Anda harus memeriksa secara manual setiap kali Anda ingin mengetahui peta mana yang saat ini.

Rotasi Map Apex Legends lahir dari upaya untuk dapat mengetahui map apa yang akan muncul sehingga tidak perlu lagi mengecek sendiri.

Fitur

• Rotasi peta waktu nyata
• Notifikasi latar depan — notifikasi latar belakang sedang dikirim!
  • Peta yang dapat disesuaikan
  • Ambang batas yang dapat disesuaikan
• Aplikasi yang dapat diinstal (lihat dukungan)

Menyumbang

Selamat datang, dan terima kasih telah berkontribusi pada Apex Legends - Rotasi Peta!

Repositori kloning

Pertama, kloning repositori dari 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

Instal paket

Kemudian, gunakan npm untuk menginstal dependensi:

npm install

Konfigurasikan variabel lingkungan

Buat salinan file .env ke .env.local . Isi variabel lingkungan yang kosong dengan nilai yang sesuai seperti berikut:

• VITE_APEX_LEGENDS_API_SECRET_TOKEN : Token rahasia API Apex Legends tidak resmi untuk otentikasi

Mulai aplikasi dalam mode Pengembangan

Sekarang, sebagian besar, Anda akan menggunakan perintah ini untuk menjalankan aplikasi:

npm run start

Mulai aplikasi dalam mode Produksi

Jika tidak, jika Anda ingin menjalankan aplikasi menggunakan kode produksi, gunakan ini:

npm run start:production

Linting & Pemformatan Kode

Kami menggunakan ESLint untuk menemukan dan memperbaiki masalah dalam kode kami. Periksa kode lokal Anda dengan menjalankan perintah berikut:

npm run lint

Selain itu, Anda dapat menginstal ekstensi ESLint dan Prettier untuk Visual Studio Code guna membantu Anda mendeteksi kesalahan dan memperbaiki format kode.

Tes

Kami menggunakan Vitest sebagai kerangka pengujian untuk aplikasi kami. Periksa tes lokal Anda dengan menjalankan perintah berikut:

npm run test

Selain itu, Anda dapat menginstal ekstensi Vitest untuk Visual Studio Code untuk menjalankan pengujian dengan cepat.

Integrasi Berkelanjutan

Alur kerja integrasi berkelanjutan berjalan pada setiap dorongan ke cabang main . Jika perubahan Anda tidak lolos langkah Lint dan Test , maka alur kerja akan gagal. Harap pastikan untuk memperbaiki masalah tersebut dalam komitmen terpisah.

Penerapan

Saat ini, tidak ada penerapan berkelanjutan yang dikonfigurasi; Anda harus menjalankan perintah ini secara manual:

npm run deploy

Harap jangan menerapkannya ke dalam produksi tanpa pemberitahuan.

Aplikasi Web Progresif

Ini adalah fitur eksperimental dan dapat dinonaktifkan kapan saja.

Kami menggunakan Vite untuk menjalankan dan membangun aplikasi. Oleh karena itu, untuk menyiapkan Aplikasi Web Progresif, kami menggunakan plugin Vite PWA, yang membuat konfigurasi menjadi lancar.

Pembuatan Aset PWA

Untuk menghasilkan aset PWA minimal yang dibutuhkan, kami menggunakan Vite PWA Assets Generator. Perintah di bawah ini akan menghasilkan aset berdasarkan file public/logo.svg menggunakan konfigurasi dari pwa-assets.config.ts. Pastikan sudah diperbarui sebelum menjalankannya:

npm run generate-pwa-assets

Pemecahan Masalah PWA

Instalasi

Jika Anda mengalami masalah dengan instalasi PWA, Anda dapat menggunakan Lighthouse dari Dev Tools untuk memeriksa apa yang hilang agar bisa berfungsi.

Berikut langkah-langkah untuk browser berbasis Chromium:

1. Buka Alat Pengembang
2. Buka tab Mercusuar
3. Periksa kategori Aplikasi Web Progresif
4. Tekan tombol Analisis memuat halaman
5. Tinjau hasil

Perbarui pekerja layanan

Aplikasi akan menanyakan apakah ada pembaruan pada Service Worker. Namun, untuk mempermudah, Anda dapat mengaktifkan opsi dari Dev Tools untuk memperbarui pekerja layanan saat memuat ulang:

1. Buka Alat Pengembang
2. Buka tab Aplikasi
3. Centang opsi Perbarui saat memuat ulang
4. Muat ulang tab menggunakan CTRL+SHIFT+R

Jika Anda masih menghadapi masalah, Anda dapat memperbarui sendiri pekerja layanan dengan menekan tombol Perbarui.

Perbarui aset

Saat memperbarui aset PWA, Anda mungkin tidak dapat melihat aset baru dimuat. Jika demikian, pastikan untuk menginstal ulang aplikasi tersebut.

Kompatibilitas Lintas-browser (HTTPS)

Pemberitahuan

Kami menggunakan antarmuka Notifikasi dari API Notifikasi untuk mengonfigurasi dan menampilkan notifikasi desktop kepada pengguna. Anda dapat membaca selengkapnya tentang API Notifikasi di Dokumen Web MDN.

API Pemberitahuan

Memeriksa dukungan API melalui 'Notification' in window .

Platform	Berani	krom	Tepian	Firefox	Safari	Pengamatan
macOS	Ya	Ya	Ya	Ya	Ya	- -
iOS	TIDAK	TIDAK	TIDAK	TIDAK	Ya ¹	¹ fitur eksperimental harus diaktifkan.
Android	Ya	Ya	Ya	Ya	T/A	- -

Izin Pemberitahuan Segera

Meminta Izin Notifikasi melalui Notification.requestPermission() menggunakan Promises .

Platform	Berani	krom	Tepian	Firefox	Safari	Pengamatan
macOS	Ya ¹	Ya ¹	Ya ¹	Ya	Ya	¹ mungkin memerlukan langkah manual tambahan untuk memberikan izin.
iOS	T/A	T/A	T/A	T/A	Ya ¹	¹ Hanya dukungan PWA.
Android	Ya	Ya	Ya ¹	Ya ²	T/A	¹ mungkin memerlukan langkah manual tambahan untuk memberikan izin. ² mungkin menampilkan halaman tidak aman karena sertifikat yang ditandatangani sendiri.

Kirim Pemberitahuan

Membuat instance Notifikasi baru menggunakan new Notification(title, options);

Platform	Berani	krom	Tepian	Firefox	Safari	Pengamatan
macOS	Ya	Ya	Ya	Ya	Ya	- -
iOS	T/A	T/A	T/A	T/A	Tidak ¹	¹ bahkan tidak dari PWA.
Android	TIDAK	TIDAK	TIDAK	Ya	T/A	- -

Service Worker (diperlukan HTTPS, kecuali localhost)

Pekerja layanan pada dasarnya bertindak sebagai server proxy yang berada di antara aplikasi web, browser, dan jaringan (bila tersedia). Anda dapat membaca selengkapnya tentang Service Worker API di MDN Web Docs.

Platform	Berani	krom	Tepian	Firefox	Safari	Pengamatan
macOS	Ya	Ya	Ya	Ya	Ya	- -
iOS	Ya	Ya	Ya	Ya	Ya	- -
Android	Ya	Ya	Ya	Ya	T/A	- -

Aplikasi Web Progresif (diperlukan HTTPS, kecuali localhost)

Aplikasi web progresif (PWA) adalah aplikasi yang dibuat menggunakan teknologi platform web, namun memberikan pengalaman pengguna seperti aplikasi khusus platform. Anda dapat membaca lebih lanjut tentang Aplikasi Web Progresif di MDN Web Docs.

Platform	Berani	krom	Tepian	Firefox	Safari	Pengamatan
macOS	Ya ¹	Ya ¹	Ya ¹	TIDAK	TIDAK	¹ dapat diinstal dari tombol Install PWA di sebelah kanan bilah alamat atau tombol Options > Install app .
iOS	TIDAK	TIDAK	TIDAK	TIDAK	Ya ¹	¹ dapat diinstal dari tombol Share > Add to Home Screen .
Android	Ya ¹	Ya ¹	Ya ¹	Ya ²	T/A	¹ dapat diinstal dari popup Add to Home Screen atau tombol Options > Install app . ² dapat diinstal dari tombol Options > Add to Home screen .

Kredit

• Terima kasih kepada EA dan tim Respawn yang telah mengembangkan Apex Legends.
• Terima kasih kepada tim di balik API Status Apex Legends Tidak Resmi yang telah menciptakan API hebat ini.
• Terima kasih kepada situs Status Apex Legends untuk aset peta mereka.

Penafian

Semua gambar, ikon, dan merek dagang adalah milik pemiliknya masing-masing. Apex Legends adalah merek dagang terdaftar EA. Aset, materi, dan ikon game adalah milik Electronic Arts. Perlu diketahui bahwa EA dan Respawn tidak mendukung konten situs web ini atau bertanggung jawab atas konten situs web ini.