Mūsdienu tīmekļa pārlūkprogrammas nodrošina jaudīgu vidi, kurā var palaist virkni aizraujošu lietotņu. Viņi, iespējams, var darīt vairāk, nekā jūs domājat.

Internets ir piedzīvojis ievērojamu attīstību, pārejot no statiskām HTML lapām uz dinamiskām, interaktīvām tīmekļa lietojumprogrammām, kas lietotājiem nodrošina personalizētu pieredzi. Pārlūkprogrammu API izstrādei ir bijusi nozīmīga loma šīs transformācijas īstenošanā.

Pārlūka API ir iepriekš izveidotas saskarnes, kas integrētas tīmekļa pārlūkprogrammās, lai palīdzētu izstrādātājiem veikt sarežģītas darbības. Šīs API nozīmē, ka varat izvairīties no zemāka līmeņa koda izmantošanas un tā vietā koncentrēties uz augstas kvalitātes tīmekļa lietotņu izveidi.

Izpētiet šīs aizraujošās pārlūkprogrammas API un uzziniet, kā tās izmantot savās tīmekļa lietotnēs, lai iegūtu maksimālu efektu.

1. Web Speech API

Web Speech API ļauj integrēt runas atpazīšanu un sintēzi jūsu tīmekļa lietotnēs. Runas atpazīšanas funkcija ļauj lietotājiem ievadīt tekstu tīmekļa lietotnē, runājot. Turpretim runas sintēzes funkcija ļauj tīmekļa lietotnēm izvadīt audio, reaģējot uz lietotāja darbībām.

instagram viewer

Web Speech API ir noderīga pieejamības nolūkos. Piemēram, tas ļauj lietotājiem ar redzes traucējumiem vieglāk mijiedarboties ar tīmekļa lietotnēm. Tas arī palīdz lietotājiem, kuriem ir grūtības rakstīt uz tastatūras vai pārvietoties ar peli.

Tas arī nodrošina tiešu pieeju mūsdienu moderno instrumentu un tehnoloģiju konstruēšanai. Piemēram, varat izmantot API, lai veidojiet runas pārveidošanas lietotnes piezīmju veikšanai.

// inicializēt runas atpazīšanu
konst atzīšana = jauns webkitSpeechRecognition();
// iestatiet valodu uz angļu valodu
atpazīšana.lang = "lv-ASV";


// definēt funkciju runas atpazīšanas rezultāta apstrādei
atzīšana.rezultātā = funkciju(notikumu) {
konst rezultāts = notikums.results[event.resultIndex][0].stenogramma;
konsole.log (rezultāts)
};
// sākt runas atpazīšanu
atpazīšana.start();

Šeit ir runas atpazīšanas objekta izmantošanas piemērs, lai pārvērstu runu par tekstu, kas tiktu parādīts konsolē.

2. Velciet un nometiet API

Vilkšanas un nomešanas API ļauj lietotājiem vilkt un nomest elementus tīmekļa lapā. Šī API var uzlabot jūsu tīmekļa lietotnes lietošanas pieredzi, ļaujot lietotājiem viegli pārvietot un pārkārtot elementus. Vilkšanas un nomešanas API sastāv no divām tālāk norādītajām galvenajām daļām.

  • Vilkšanas avots ir elements, uz kura lietotājs noklikšķina un velk.
  • Kritiena mērķis ir apgabals, kurā nomest elementu.

Pievienojiet notikumu uztvērējus vilkšanas avotam un nometiet mērķa elementus, lai izmantotu vilkšanas un nomešanas API. Notikuma klausītāji apstrādās dragstart, dragenter, dragleave, dragover, drop un vilkšanas beigu notikumus.

// Iegūstiet vilkšanas un nomešanas zonas elementus
konst draggableElement = dokumentu.getElementById('velkama');
konst dropZone = dokumentu.getElementById("nolaižamā zona");
// Pievienojiet notikumu uztvērējus, lai padarītu elementu velkamu
draggableElement.addEventListener('vilkšana', (notikums) => {
// Iestatiet datus, kas jāpārsūta, kad elements tiek nomests
 event.dataTransfer.setData('teksts/vienkāršs', event.target.id);
});


// Pievienojiet notikumu uztvērēju, lai ļautu nomest nomešanas zonas elementu
dropZone.addEventListener('dragover', (notikums) => {
 event.preventDefault();
 dropZone.classList.add("velciet pāri");
});
// Pievienojiet notikumu uztvērēju, lai apstrādātu nomešanas notikumu
dropZone.addEventListener('piliens', (notikums) => {
 event.preventDefault();
konst draggableElementId = event.dataTransfer.getData('teksts');
konst draggableElement = dokumentu.getElementById (draggableElementId);
 dropZone.appendChild (draggableElement);
 dropZone.classList.remove("velciet pāri");
});

Ieviešot iepriekš minēto programmu, lietotāji varēs vilkt elementu ar velkamu ID un nomest to nomešanas zonā.

3. Screen Orientation API

Ekrāna orientācijas API sniedz izstrādātājiem informāciju par ierīces ekrāna pašreizējo orientāciju. Šī API ir īpaši noderīga tīmekļa izstrādātājiem, kuri vēlas optimizēt savas vietnes dažādiem ekrāna izmēriem un orientācijām. Piemēram, adaptīva tīmekļa lietotne pielāgos savas saskarnes izkārtojumu un dizainu atkarībā no tā, vai lietotājs tur savu ierīci portreta vai ainavas orientācijā.

Ekrāna orientācijas API izstrādātājiem nodrošina dažus rekvizītus un metodes, lai piekļūtu informācijai par ierīces ekrāna orientāciju. Šeit ir saraksts ar dažiem API nodrošinātajiem rekvizītiem un metodēm.

  • logs.screen.orientation.leņķis: šis rekvizīts atgriež pašreizējo ierīces ekrāna leņķi grādos.
  • logs.screen.orientation.type: šis rekvizīts atgriež pašreizējo ierīces ekrāna orientācijas veidu (piemēram, "portrets-primary", "scape-primary").
  • window.screen.orientation.lock (orientācija): šī metode bloķē ekrāna orientāciju noteiktai vērtībai (piem., “primārā portrets”).

Varat izmantot šos rekvizītus un metodes, lai izveidotu adaptīvas tīmekļa lietotnes, kas pielāgojas dažādām ekrāna orientācijām.

Tālāk ir sniegts koda fragmenta piemērs, kas parāda, kā darbojas ekrāna orientācijas API, lai noteiktu ierīces ekrāna orientācijas izmaiņas un reaģētu uz tām.

// Iegūstiet pašreizējo ekrāna orientāciju
konst pašreizējāOrientācija = logs.screen.orientation.type;
// Pievienojiet notikumu uztvērēju, lai noteiktu ekrāna orientācijas izmaiņas
logs.screen.orientation.addEventListener('mainīt', () => {
konst jauna Orientācija = logs.screen.orientation.type;


// Atjauniniet lietotāja interfeisu, pamatojoties uz jauno orientāciju
ja (jauna orientācija 'portrets-primary') {
// Pielāgojiet izkārtojumu portreta orientācijai
 } cits {
// Pielāgojiet izkārtojumu ainavas orientācijai
 }
});

4. Web Share API

Web Share API ļauj izstrādātājiem savās tīmekļa lietojumprogrammās integrēt vietējās koplietošanas iespējas. Izmantojot šo API, lietotāji var ērti kopīgot saturu no jūsu tīmekļa lietotnes tieši citās lietotnēs, piemēram, sociālajos saziņas līdzekļos vai ziņojumapmaiņas lietotnēs. Izmantojot Web Share API, varat nodrošināt lietotājiem netraucētu koplietošanas pieredzi, kas var palīdzēt palielināt iesaisti un novirzīt datplūsmu uz jūsu tīmekļa lietotni.

Lai ieviestu Web Share API, izmantosit navigator.share metodi. Lai to īstenotu, izmantosit asinhrona JavaScript funkcija, kas atgriež solījumu. Šis solījums tiks atrisināts ar a ShareData objekts, kas satur koplietotos datus, piemēram, nosaukumu, tekstu un URL. Kad jums ir ShareData objektu, varat zvanīt uz navigator.share metode, lai atvērtu vietējo koplietošanas izvēlni un ļautu lietotājam izvēlēties lietotni, ar kuru viņš vēlas kopīgot saturu.

// Iegūstiet kopīgošanas pogu
konst ShareButton = dokumentu.getElementById('share-poga');
// Pievienojiet notikumu klausītāju, lai kopīgotu pogu
shareButton.addEventListener('klikšķis', asinhrons () => {
mēģināt {
konst shareData = {
 virsraksts: "Apskatiet šo lielisko tīmekļa lietotni!",
 teksts: "Es tikko atklāju šo apbrīnojamo lietotni, kas jums ir jāizmēģina!",
 url: ' https://example.com'
 };
gaidīt navigator.share (shareData);
 } noķert (kļūda) {
konsole.error("Kļūda koplietojot saturu:", kļūda);
 }
});

5. Ģeolokācijas API

Ģeolokācijas API ļauj tīmekļa lietojumprogrammām piekļūt lietotāja atrašanās vietas datiem. Šī API nodrošina tādu informāciju kā platums, garums un augstums, lai lietotājiem nodrošinātu uz atrašanās vietu balstītus pakalpojumus. Piemēram, tīmekļa lietojumprogrammas var izmantot ģeogrāfiskās atrašanās vietas noteikšanas API, lai nodrošinātu personalizētu saturu vai pakalpojumus, pamatojoties uz lietotāja atrašanās vietu.

Lai ieviestu ģeogrāfiskās atrašanās vietas noteikšanas API, izmantosit navigators.ģeolokācija objektu. Ja ir pieejams API atbalsts, varat izmantot metodi getCurrentPosition, lai iegūtu lietotāja pašreizējo atrašanās vietu. Šai metodei ir divi argumenti: veiksmīga atzvanīšanas funkcija, kas tiek izsaukta, lai izgūtu atrašanās vietu, un kļūdas atzvanīšanas funkcija, kas tiek izsaukta, ja atrašanās vietas izgūšanā ir kļūda.

// Iegūstiet atrašanās vietas pogu un izvades elementu
konst atrašanās vietaButton = dokumentu.getElementById('location-button');
konst izvades elements = dokumentu.getElementById('izejas elements');
// Pievienot notikumu klausītāju atrašanās vietas pogai
locationButton.addEventListener('klikšķis', () => {
// Pārbaudiet, vai tiek atbalstīta ģeogrāfiskā atrašanās vieta
ja (navigator.geolocation) {
// Iegūt lietotāja pašreizējo atrašanās vietu
 navigator.geolocation.getCurrentPosition((pozīciju) => {
 outputElement.textContent = `Platuma grāds: ${position.coords.latitude}, garums: ${position.coords.longitude}`;
 }, (kļūda) => {
konsole.error("Kļūda, iegūstot atrašanās vietu:", kļūda);
 });
 } cits {
 outputElement.textContent = "Šī pārlūkprogramma neatbalsta ģeogrāfisko atrašanās vietu.";
 }
});

Izmantojot pārlūkprogrammas API, varat izveidot labākas tīmekļa lietotnes

Izmantojot pārlūkprogrammas API, var patiesi pārveidot tīmekļa lietotnes lietotāja pieredzi. No jaunu funkcionalitātes līmeņu pievienošanas līdz personalizētākas pieredzes radīšanai šīs API var palīdzēt jums atvērt jaunus radošuma un inovācijas līmeņus. Eksperimentējot ar šīm API un izpētot to potenciālu, varat izveidot saistošāku, visaptverošāku un dinamiskāku tīmekļa lietotni, kas izceļas pārpildītajā digitālajā vidē.

Pārlūkprogrammu API izmantošana dažādu tehnoloģiju izstrādē skaidri parāda to plašo pielietojumu un nozīmi.