5 JavaScript API untuk memperkasakan laman web mudah alih anda

mata utama

API Status Bateri Bateri:

Menyediakan tahap bateri peranti atau maklumat status, membantu menyimpan perubahan lebih kerap apabila paras bateri rendah, mencegah kehilangan data.
• Pemberitahuan Web API:
menormalkan bagaimana pemaju memberitahu pengguna, yang membolehkan makluman (seperti penghantaran e -mel) dikeluarkan di luar konteks laman web. Walau bagaimanapun, gaya paparan pelayar yang berbeza mungkin berbeza -beza.
• sensor proksim API:
Mengesan jarak antara objek dan peranti yang menjalankan laman web, kini hanya disokong oleh Firefox.
• API Getaran:
membolehkan peranti bergetar dan boleh digunakan untuk mensimulasikan kesan khusus dalam permainan. API Arah Peranti
• mengesan arah peranti, yang kondusif untuk aplikasi navigasi dan permainan. Kenyataan seperti "pasaran mudah alih berkembang" dan "pengguna mengakses rangkaian melalui peranti mudah alih (telefon pintar dan tablet, dan lain -lain) akan melebihi mereka yang mengakses rangkaian melalui desktop atau komputer riba" tidak lagi mengagumkan.
Pada masa kini, kita (sekurang -kurangnya harus) menyedari bahawa pasaran mudah alih adalah penting ketika membangunkan apa -apa untuk web.

Selama bertahun -tahun, perbincangan dan pendapat mengenai aplikasi asli dan aplikasi web berbeza -beza, dan ia telah menjadi kontroversi yang lebih baik. Terlepas dari pandangan anda, adalah benar bahawa aplikasi mudah alih asli telah dapat mengakses komponen perkakasan yang tidak dapat diakses oleh laman web pada masa lalu. Tetapi adakah jurang ini masih sah hari ini? Adakah teknologi web telah dibangunkan cukup untuk membolehkan kita, sebagai pemaju, untuk mengekod hanya menggunakan HTML, CSS, dan JavaScript?

Dalam artikel ini, saya akan memperkenalkan beberapa API JavaScript yang membolehkan laman web anda mengakses komponen perkakasan peranti mudah alih anda, atau meningkatkan fungsi aplikasi web anda pada peranti mudah alih anda.

status bateri API

Status Bateri API menyediakan maklumat mengenai tahap bateri atau status sistem. Dengan API ini, anda boleh tahu jika bateri sedang dicas, berapa lama sebelum bateri dilepaskan sepenuhnya, atau hanya kapasiti semasa. Butiran ini boleh diakses melalui empat sifat milik objek . API ini juga mentakrifkan peristiwa yang boleh dicetuskan apabila sifat di atas berubah.

API ini berguna apabila, sebagai contoh, anda (atau pengguna anda) berjuang untuk menggunakan aplikasi web di atas bas dan lupa untuk menyimpan perubahan yang telah anda buat. Tiba -tiba, telefon pintar anda dimatikan dan anda kecewa dengan membuang banyak masa dan semua kerja anda. Dengan API ini, kita boleh membangunkan halaman yang dapat mengesan kuasa bateri semasa dan menyimpan perubahan lebih kerap untuk mengelakkan kehilangan data apabila kuasa bateri rendah atau tidak mencukupi.

window.navigator.battery Sehingga penulisan ini, API status bateri hanya disokong oleh Firefox, tetapi sangat mudah untuk mengesan sokongan untuk API ini, seperti yang ditunjukkan di bawah:

Contoh mudah menggunakan API ini adalah seperti berikut:

if (window.navigator && window.navigator.battery) {
   // API 受支持
} else {
   // 不受支持
}

Jika anda ingin mencuba API ini, kami mempunyai demo untuk anda. Jika anda ingin menyelidik lebih lanjut, kami telah memperkenalkan API Status Bateri di SitePoint di sini.

Pemberitahuan Web API

Pada peranti mudah alih, kami sudah biasa dengan konsep pemberitahuan, dan banyak aplikasi yang telah dipasang pada peranti melaksanakan pemberitahuan. Di web, laman web melaksanakannya dengan cara yang berbeza. Fikirkan tentang Google dan Twitter, kedua -duanya mempunyai mekanisme pemberitahuan, tetapi mereka melaksanakannya secara berbeza.

API Pemberitahuan Web adalah API yang dibuat untuk tujuan ini untuk menormalkan bagaimana pemaju memberitahu pengguna. Pemberitahuan membolehkan pengguna mengingatkan pengguna peristiwa di luar konteks halaman web, seperti penghantaran e -mel. Walaupun pemaju membuat pemberitahuan dengan cara yang sama, spesifikasi tidak menggambarkan bagaimana dan di mana UI harus memaparkannya. Ini bermakna kita akan melihat gaya yang berbeza pada pelayar yang berbeza. Sebagai contoh, pada peranti mudah alih, kita mungkin melihatnya di bar pemberitahuan.

API pemberitahuan web

terdedah melalui atribut window objek Notification. Ia adalah pembina yang membolehkan kita membuat contoh pemberitahuan. Untuk membuat pemberitahuan baru, kita boleh menulis kod berikut:

// 打印电池是否正在充电
console.log("电池" + (navigator.battery.charging ? "" : "未") + "充电");

Pada masa ini, Chrome, Firefox, dan Safari menyokong API ini. Pelayar mudah alih yang menyokong API Pemberitahuan Web termasuk Firefox, Android 4.4, dan BlackBerry. Adakah anda pernah melihat sesuatu yang pelik? Chrome Mobile tidak menyokong API ini! Sedih tetapi memang benar.

Oleh kerana pelayar yang menyokong API ini meliputi lebih daripada separuh pasaran, tetapi untuk memastikan bahawa kod JavaScript kami tidak cuba memanggil kaedah yang tidak disokong, kita perlu menguji situasi sokongan. Kita boleh melakukan ini menggunakan coretan kod berikut:

var notification = new Notification('收到电子邮件', {
  body: '您收到了一封电子邮件。立即阅读！'
});

Teruja dengan API ini? Sangat bagus! Anda boleh mengetahui lebih lanjut dalam artikel yang bermula dengan API Pemberitahuan Web, dan anda juga boleh mencuba demo langsung.

sensor proksim API

API Sensor Kedekatan adalah API JavaScript yang boleh kita gunakan untuk mengesan jarak antara objek dan peranti yang menjalankan laman web. Jarak diukur oleh sensor jarak (jika peranti anda mempunyai sensor jarak). API Sensor Kedekatan tidak menyediakan atribut atau kaedah, hanya mencetuskan dua peristiwa pada objek window. Kita boleh mendengar mereka untuk melakukan operasi. Acara pertama deviceproximity memberikan maklumat tentang jarak sebenar antara peranti dan objek berdekatan, sementara peristiwa kedua userproximity hanya menentukan sama ada terdapat objek yang berdekatan.

Satu -satunya penyemak imbas yang menyokong API ini adalah Firefox (desktop dan mudah alih), bermula dengan versi 15. Malangnya, kerana banyak komputer riba dan desktop tidak mempunyai sensor kedekatan, kami terutamanya menargetkan peranti mudah alih.

Pengesanan sokongan untuk API ini:

if ('Notification' in window) {
  // API 受支持
} else {
  // 不受支持
}

Contoh penggunaan mudah adalah seperti berikut:

if ('ondeviceproximity' in window) {
   // API 受支持
} else {
   // 不受支持
}

Jika anda ingin mengetahui lebih lanjut mengenai API Sensor Kedekatan, saya menulis artikel bertajuk "Bermula dengan API Sensor Kedekatan." Jika anda mahu benar -benar melakukan ini, anda boleh menggunakan demo ini.

API Getaran

API getaran

adalah API yang sangat mudah yang mengandungi kaedah yang membolehkan kita membuat peranti bergetar. Satu penggunaan yang jelas adalah dalam permainan di mana kita dapat menghasilkan semula kesan yang diperkenalkan oleh beberapa konsol sedekad yang lalu. Walau bagaimanapun, ini bukan satu -satunya tujuan API ini.

Seperti yang saya nyatakan, API getaran hanya mendedahkan kaedah yang dipanggil vibrate(). Yang terakhir adalah milik objek window.navigator, dalam bentuk yang paling mudah, menerima integer yang menentukan bilangan milisaat peranti harus bergetar.

Selain Internet Explorer dan Safari, API ini disokong oleh semua pelayar utama. Namun, kini mungkin masa yang baik untuk menggunakannya untuk projek anda yang seterusnya. Malah, jika ia disokong, anda akan memberi pengguna pengalaman yang lebih baik (melainkan jika anda menyalahgunakan ciri ini). Sokongan pengesanan sangat mudah, seperti yang ditunjukkan di bawah:

if (window.navigator && window.navigator.battery) {
   // API 受支持
} else {
   // 不受支持
}

Penggunaan yang sangat mudah

cara yang sangat mudah untuk menggunakan API adalah seperti berikut:

// 打印电池是否正在充电
console.log("电池" + (navigator.battery.charging ? "" : "未") + "充电");

Untuk mengetahui lebih lanjut mengenai API ini, baca artikel "Cara Menggunakan HTML5 API Getaran" dan jangan lupa untuk mencuba demo.

API Arah Peranti

API terakhir yang ingin saya bincangkan ialah API Arah Peranti. Mengesan orientasi peranti berguna untuk pelbagai situasi, dari aplikasi navigasi ke permainan. API ini mentakrifkan beberapa peristiwa yang memberikan maklumat mengenai orientasi fizikal dan pergerakan peranti. API ini adalah draf kerja W3C, yang bermaksud bahawa spesifikasi tidak stabil dan kami mungkin mengharapkan beberapa perubahan pada masa akan datang.

API mendedahkan tiga peristiwa berikut: deviceorientation, devicemotion dan compassneedscalibration. Acara pertama dicetuskan apabila pecutan mengesan perubahan ke arah peranti. Acara kedua dicetuskan setiap kali peranti mempercepatkan atau menurun. Acara terakhir dicetuskan apabila ejen pengguna menentukan bahawa kompas perlu ditentukur.

Hampir semua pelayar utama (kecuali safari) menyokong API ini, tetapi sokongannya adalah sebahagian atau terdapat ketidakkonsistenan. Sebagai contoh, pada masa penulisan, beberapa pelayar menyokong compassneedscalibration peristiwa. Jadi cadangan saya adalah untuk menguji setiap acara untuk melihat sama ada ia disokong. Untuk menguji kewujudan peristiwa deviceorientation, anda boleh menulis:

var notification = new Notification('收到电子邮件', {
  body: '您收到了一封电子邮件。立即阅读！'
});

atau:

if ('Notification' in window) {
  // API 受支持
} else {
  // 不受支持
}

Sebagai contoh, jika anda ingin menguji acara devicemotion, anda boleh menulis:

if ('ondeviceproximity' in window) {
   // API 受支持
} else {
   // 不受支持
}

Jika anda mahu menggunakan API ini, kami mempunyai demo yang boleh anda gunakan. Jika anda ingin belajar, kami mempunyai artikel "Menggunakan Orientasi Peranti di HTML5".

Kesimpulan

Dalam artikel ini, saya menunjukkan kepada anda beberapa API yang dapat meningkatkan laman web pelawat mudah alih.

Kes penggunaan API ini tidak berkesudahan, semuanya bergantung pada imaginasi anda dan jenis aplikasi atau laman web yang anda sedang membangun. Saya harap anda menikmati siaran ini, sila beritahu saya apa API berguna yang anda fikirkan.

Soalan -soalan yang sering ditanya mengenai Web JavaScript API

Apakah API JavaScript dan bagaimana mereka meningkatkan laman web mudah alih?

API JavaScript (Antara Muka Pengaturcaraan Aplikasi) adalah satu set peraturan dan protokol yang membolehkan aplikasi perisian yang berbeza untuk berkomunikasi antara satu sama lain. Mereka meningkatkan laman web mudah alih dengan membolehkan laman web mudah alih berinteraksi dengan perkakasan peranti dan aplikasi perisian lain, dengan itu meningkatkan fungsi dan pengalaman pengguna mereka. Sebagai contoh, API JavaScript boleh membenarkan laman web mengakses kamera peranti, lokasi geografi, dan juga status bateri. Ini mewujudkan lebih banyak kemungkinan untuk pemaju untuk berinteraksi, melibatkan dan melibatkan dan laman web mudah alih yang mesra pengguna.

Bagaimana menggunakan API Geolokasi di halaman mudah alih saya?

API Geolocation adalah alat yang berkuasa yang membolehkan anda mengakses geolokasi peranti anda. Untuk menggunakannya, anda perlu menyemak sama ada penyemak imbas pengguna menyokongnya. Ini boleh dilakukan dengan menggunakan harta navigator.geolocation. Jika ia kembali true, maka anda boleh menggunakan kaedah getCurrentPosition() untuk mendapatkan lokasi semasa pengguna. Ingatlah untuk sentiasa mendapatkan kebenaran pengguna sebelum mengakses data lokasi pengguna.

Apakah API Status Bateri dan cara menggunakannya?

Status Bateri API menyediakan maklumat mengenai status bateri peranti tuan rumah. Ini sangat berguna untuk mengoptimumkan prestasi laman web berdasarkan tahap bateri peranti. Sebagai contoh, apabila bateri rendah, anda boleh menurunkan kekerapan kemas kini atau melumpuhkan ciri -ciri tertentu untuk menjimatkan kuasa. Untuk menggunakan API ini, anda boleh menggunakan kaedah navigator.getBattery(), yang mengembalikan janji yang menyelesaikan objek BatteryManager.

Bagaimana menggunakan API Getaran di laman web mudah alih saya?

API getaran

membolehkan anda mengawal mekanisme getaran peranti tuan rumah. Ini sangat berguna untuk memberikan maklum balas sentuhan kepada pengguna. Untuk menggunakan API ini, anda boleh menggunakan kaedah navigator.vibrate(). Anda boleh lulus satu nilai untuk bergetar masa tertentu, atau lulus satu siri nilai untuk membuat mod getaran dan jeda.

Apakah API sensor cahaya ambien dan bagaimana menggunakannya?

API sensor cahaya ambien memberikan maklumat mengenai tahap cahaya ambien peranti. Ini berguna untuk menyesuaikan kecerahan atau kontras laman web untuk meningkatkan kebolehbacaan di bawah keadaan pencahayaan yang berbeza. Untuk menggunakan API ini, anda perlu membuat contoh objek AmbientLightSensor baru dan kemudian mula merasakan tahap cahaya menggunakan kaedah start().

Bagaimana menggunakan API Maklumat Web di laman web mudah alih saya?

Maklumat Rangkaian API menyediakan maklumat mengenai sambungan rangkaian peranti. Ini sangat berguna untuk mengoptimumkan prestasi laman web berdasarkan status rangkaian. Sebagai contoh, apabila sambungan rangkaian lambat, anda boleh mengurangkan kualiti imej atau video anda untuk memastikan pemuatan lancar. Untuk menggunakan API ini, anda boleh menggunakan harta navigator.connection, yang mengembalikan objek NetworkInformation.

Apakah API orientasi peranti dan cara menggunakannya?

API Arah Peranti memberikan maklumat mengenai orientasi fizikal peranti. Ini sangat berguna untuk mewujudkan pengalaman interaktif yang bertindak balas terhadap pergerakan peranti. Untuk menggunakan API ini, anda boleh menambah pendengar acara ke acara

, yang kebakaran apabila orientasi peranti berubah. deviceorientation

Bagaimana menggunakan API Penglihatan Halaman di laman web mudah alih saya?

API Keterlihatan Halaman membolehkan anda mengesan apabila laman web dapat dilihat atau tersembunyi. Ini berguna untuk menjeda atau menyambung semula aktiviti berdasarkan penglihatan halaman. Sebagai contoh, apabila pengguna beralih ke tab lain, anda boleh menjeda video dan meneruskan video apabila mereka kembali. Untuk menggunakan API ini, anda boleh menggunakan atribut

dan acara document.visibilityState. visibilitychange

Apakah API skrin penuh dan cara menggunakannya?

API skrin penuh membolehkan anda memaparkan elemen dalam mod skrin penuh. Ini sangat berguna untuk memberikan pengalaman yang lebih mendalam untuk video atau permainan, dll. Untuk menggunakan API ini, anda boleh menggunakan kaedah

untuk mana -mana elemen untuk menjadikannya muncul dalam skrin penuh. requestFullscreen()

Bagaimana menggunakan API Pemberitahuan Web di halaman mudah alih saya?

API Pemberitahuan Web membolehkan anda memaparkan pemberitahuan kepada pengguna. Ini sangat berguna untuk mengingatkan pengguna peristiwa penting, walaupun halaman anda tidak mempunyai tumpuan. Untuk menggunakan API ini, anda perlu meminta kebenaran pengguna menggunakan kaedah

. Jika pengguna memberi kebenaran, anda boleh membuat objek pemberitahuan baru untuk memaparkan pemberitahuan. Notification.requestPermission()

Atas ialah kandungan terperinci 5 JavaScript API untuk memperkasakan laman web mudah alih anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!