Nykypäivän verkkoselaimet tarjoavat tehokkaita ympäristöjä, jotka voivat suorittaa erilaisia ​​jännittäviä sovelluksia. He voivat todennäköisesti tehdä enemmän kuin luulet.

Internet on kokenut huomattavan evoluution, kun se on siirtynyt staattisista HTML-sivuista dynaamisiin, interaktiivisiin verkkosovelluksiin, jotka tarjoavat käyttäjille yksilöllisiä kokemuksia. Selaimen API-kehityksellä on ollut merkittävä rooli tämän muutoksen aikaansaamisessa.

Selaimen sovellusliittymät ovat verkkoselaimiin integroituja valmiita käyttöliittymiä, jotka auttavat kehittäjiä suorittamaan monimutkaisia ​​toimintoja. Näiden sovellusliittymien ansiosta voit välttää alemman tason koodin käsittelyn ja keskittyä sen sijaan korkealaatuisten verkkosovellusten rakentamiseen.

Tutustu näihin jännittäviin selainsovellusliittymiin ja opi käyttämään niitä verkkosovelluksissasi parhaan tehon saavuttamiseksi.

1. Web Speech API

Web Speech API: n avulla voit integroida puheentunnistuksen ja synteesin verkkosovelluksiisi. Puheentunnistusominaisuuden avulla käyttäjät voivat syöttää tekstiä verkkosovellukseen puhumalla. Sitä vastoin puhesynteesiominaisuuden avulla verkkosovellukset voivat lähettää ääntä vastauksena käyttäjän toimiin.

instagram viewer

Web Speech API on hyödyllinen esteettömyystarkoituksiin. Sen avulla esimerkiksi näkövammaiset käyttäjät voivat käyttää verkkosovelluksia helpommin. Se auttaa myös käyttäjiä, joilla on vaikeuksia kirjoittaa näppäimistöllä tai navigoida hiirellä.

Se tarjoaa myös suoran lähestymistavan nykyaikaisten työkalujen ja teknologioiden rakentamiseen. Voit esimerkiksi käyttää API: ta rakentaa puheesta tekstiksi sovelluksia muistiinpanojen tekemistä varten.

// alusta puheentunnistus
konst tunnustaminen = Uusi webkitSpeechRecognition();
// aseta kieleksi englanti
tunnustaminen.lang = "en-US";


// määritä funktio puheentunnistuksen tuloksen käsittelemiseksi
tunnistus.onresult = toiminto(tapahtuma) {
konst tulos = event.results[event.resultIndex][0].transkriptio;
konsoli.log (tulos)
};
// käynnistä puheentunnistus
tunnustaminen.start();

Tässä on esimerkki puheentunnistusobjektin käyttämisestä puheen muuntamiseen tekstiksi, joka näkyy konsolissa.

2. Vedä ja pudota API

Vedä ja pudota -sovellusliittymän avulla käyttäjät voivat vetää ja pudottaa Web-sivun elementtejä. Tämä API voi parantaa verkkosovelluksesi käyttökokemusta sallimalla käyttäjien siirtää ja järjestää elementtejä helposti. Vedä ja pudota -sovellusliittymä koostuu kahdesta alla luetellusta pääosasta:

  • Vedä lähde on elementti, jota käyttäjä napsauttaa ja vetää.
  • Pudotuskohde on alue, jonne elementti pudotetaan.

Lisää tapahtumaseuraajat vedä lähteeseen ja pudota kohdeelementit käyttääksesi Vedä ja pudota -sovellusliittymää. Tapahtuman kuuntelijat käsittelevät dragstart-, dragenter-, dragleave-, dragover-, drop- ja drag end -tapahtumia.

// Hanki vedettävän ja pudotettavan vyöhykkeen elementit
konst draggableElement = asiakirja.getElementById('vedettävä');
konst dropZone = asiakirja.getElementById("pudotusalue");
// Lisää tapahtumakuuntelijoita tehdäksesi elementistä vedettävän
draggableElement.addEventListener('vetokäynnistys', (tapahtuma) => {
// Aseta tiedot, jotka siirretään, kun elementti pudotetaan
 event.dataTransfer.setData('teksti/plain', tapahtuma.kohde.id);
});


// Lisää tapahtuman kuuntelija salliaksesi pudotuksen pudotusalueelementissä
dropZone.addEventListener("dragover", (tapahtuma) => {
 event.preventDefault();
 dropZone.classList.add('vedä yli');
});
// Lisää tapahtuman kuuntelija käsittelemään pudotustapahtumaa
dropZone.addEventListener('pudota', (tapahtuma) => {
 event.preventDefault();
konst draggableElementId = event.dataTransfer.getData('teksti');
konst draggableElement = asiakirja.getElementById (draggableElementId);
 dropZone.appendChild (draggableElement);
 dropZone.classList.remove('vedä yli');
});

Yllä olevan ohjelman toteuttaminen antaa käyttäjien vetää elementin, jonka tunnus on vedettävä, ja pudottaa sen pudotusalueelle.

3. Screen Orientation API

Screen Orientation API tarjoaa kehittäjille tietoa laitteen näytön nykyisestä suunnasta. Tämä sovellusliittymä on erityisen hyödyllinen verkkokehittäjille, jotka haluavat optimoida sivustonsa eri näyttökokoja ja -suuntia varten. Esimerkiksi, reagoiva verkkosovellus säätää käyttöliittymänsä asettelua ja suunnittelua riippuen siitä, pitääkö käyttäjä laitetta pysty- vai vaaka-asennossa.

Screen Orientation API tarjoaa kehittäjille joitain ominaisuuksia ja menetelmiä, joilla he voivat käyttää tietoja laitteen näytön suunnasta. Tässä on luettelo joistakin API: n tarjoamista ominaisuuksista ja menetelmistä:

  • window.screen.orientation.angle: Tämä ominaisuus palauttaa laitteen näytön nykyisen kulman asteina.
  • window.screen.orientation.type: Tämä ominaisuus palauttaa laitteen nykyisen näytön suunnan tyypin (esim. "pysty-ensisijainen", "vaaka-ensisijainen").
  • window.screen.orientation.lock (suunta): Tämä menetelmä lukitsee näytön suunnan tiettyyn arvoon (esim. "ensisijainen muotokuva").

Näiden ominaisuuksien ja menetelmien avulla voit luoda reagoivia verkkosovelluksia, jotka mukautuvat erilaisiin näytön suuntiin.

Tässä on esimerkkikoodinpätkä, joka näyttää, kuinka Screen Orientation API toimii havaitakseen ja reagoidakseen muutokset laitteen näytön suunnassa:

// Hae nykyinen näytön suunta
konst currentOrientation = ikkuna.screen.orientation.type;
// Lisää tapahtuman kuuntelija havaitaksesi muutokset näytön suunnassa
ikkuna.screen.orientation.addEventListener('muuttaa', () => {
konst uusiOrientaatio = ikkuna.screen.orientation.type;


// Päivitä käyttöliittymä uuden suunnan mukaan
jos (newOrientation 'muotokuva-ensisijainen') {
// Säädä asettelua pystysuuntaan
 } muu {
// Säädä asettelua vaakasuunnassa
 }
});

4. Web Share API

Web Share API: n avulla kehittäjät voivat integroida alkuperäisiä jakamisominaisuuksia verkkosovelluksiinsa. Tämän sovellusliittymän avulla käyttäjät voivat helposti jakaa sisältöä verkkosovelluksestasi suoraan muihin sovelluksiin, kuten sosiaaliseen mediaan tai viestisovelluksiin. Web Share API: n avulla voit tarjota käyttäjillesi saumattoman jakamiskokemuksen, mikä voi auttaa lisäämään sitoutumista ja ohjaamaan liikennettä verkkosovellukseesi.

Web Share API: n käyttöönottamiseksi käytät navigator.share menetelmä. Käytät sen toteuttamiseksi asynkroninen JavaScript-funktio, joka palauttaa lupauksen. Tämä lupaus ratkaistaan ​​a ShareData objekti, joka sisältää jaetut tiedot, kuten otsikon, tekstin ja URL-osoitteen. Kun sinulla on ShareData esine, voit soittaa navigator.share tapa avata natiivi jakamisvalikko ja antaa käyttäjän valita sovellus, jonka kanssa hän haluaa jakaa sisällön.

// Hanki jakamispainike
konst shareButton = asiakirja.getElementById("jaa-painike");
// Lisää tapahtuman kuuntelija jakamispainikkeeseen
shareButton.addEventListener('klikkaus', asynk () => {
yrittää {
konst shareData = {
 otsikko: "Katso tämä hieno verkkosovellus!",
 teksti: "Löysin juuri tämän upean sovelluksen, jota sinun täytyy kokeilla!",
 url: ' https://example.com'
 };
odottaa navigator.share (shareData);
 } ottaa kiinni (virhe) {
konsoli.virhe("Virhe sisällön jakamisessa:", virhe);
 }
});

5. Geolocation API

Geolocation API mahdollistaa verkkosovellusten pääsyn käyttäjän sijaintitietoihin. Tämä API tarjoaa tietoja, kuten leveysasteen, pituusasteen ja korkeuden, sijaintipohjaisten palvelujen tarjoamiseksi käyttäjille. Esimerkiksi verkkosovellukset voivat käyttää Geolocation API -sovellusta tarjotakseen räätälöityä sisältöä tai palveluita käyttäjän sijainnin perusteella.

Geolocation API: n käyttöönottamiseksi käytät navigator.gelocation esine. Jos API tukee, voit käyttää getCurrentPosition-menetelmää saadaksesi käyttäjän nykyisen sijainnin. Tämä menetelmä käyttää kahta argumenttia: onnistunut takaisinsoittotoiminto, joka kutsutaan hakemaan sijainnin, ja virhekutsutoiminto, jota kutsutaan, jos sijainnin noutamisessa on virhe.

// Hanki sijaintipainike ja tulostuselementti
konst sijaintipainike = asiakirja.getElementById("sijaintipainike");
konst outputElement = asiakirja.getElementById("lähtöelementti");
// Lisää tapahtuman kuuntelija sijaintipainikkeeseen
locationButton.addEventListener('klikkaus', () => {
// Tarkista, onko maantieteellistä sijaintia tuettu
jos (navigator.geolocation) {
// Hae käyttäjän nykyinen sijainti
 navigator.geolocation.getCurrentPosition((asema) => {
 outputElement.textContent = `Leveysaste: ${position.coords.latitude}, Pituusaste: ${position.coords.longitude}`;
 }, (virhe) => {
konsoli.virhe('Virhe haettaessa sijaintia:', virhe);
 });
 } muu {
 outputElement.textContent = "Tämä selain ei tue maantieteellistä sijaintia.";
 }
});

Voit luoda parempia verkkosovelluksia selaimen sovellusliittymien avulla

Selaimen sovellusliittymien käyttäminen voi todella muuttaa verkkosovelluksen käyttökokemusta. Näiden sovellusliittymien avulla voit avata uusia luovuuden ja innovoinnin tasoja uusien toimintotasojen lisäämisestä yksilöllisempien kokemusten luomiseen. Kokeilemalla näitä sovellusliittymiä ja tutkimalla niiden potentiaalia voit luoda mukaansatempaavamman, mukaansatempaavamman ja dynaamisemman verkkosovelluksen, joka erottuu joukosta täpötäydessä digitaalisessa ympäristössä.

Selainsovellusliittymien hyödyntäminen eri teknologioiden kehittämisessä on selkeä osoitus niiden laaja-alaisista sovelluksista ja merkityksestä.