Dzisiejsze przeglądarki internetowe zapewniają potężne środowiska, w których można uruchamiać wiele ekscytujących aplikacji. Prawdopodobnie mogą więcej, niż myślisz.

Internet przeszedł niezwykłą ewolucję, przechodząc od statycznych stron HTML do dynamicznych, interaktywnych aplikacji internetowych, które zapewniają użytkownikom spersonalizowane doświadczenia. Rozwój interfejsów API przeglądarek odegrał znaczącą rolę w doprowadzeniu do tej transformacji.

Interfejsy API przeglądarki to gotowe interfejsy zintegrowane z przeglądarkami internetowymi, które pomagają programistom wykonywać złożone operacje. Dzięki tym interfejsom API można uniknąć zajmowania się kodem niższego poziomu i zamiast tego skupić się na tworzeniu wysokiej jakości aplikacji internetowych.

Poznaj te ekscytujące interfejsy API przeglądarki i dowiedz się, jak używać ich w aplikacjach internetowych, aby uzyskać maksymalny efekt.

1. Internetowy interfejs API mowy

Interfejs Web Speech API umożliwia integrację rozpoznawania i syntezy mowy z aplikacjami internetowymi. Funkcja rozpoznawania mowy umożliwia użytkownikom wprowadzanie tekstu do aplikacji internetowej za pomocą mowy. Natomiast funkcja syntezy mowy umożliwia aplikacjom internetowym generowanie dźwięku w odpowiedzi na działania użytkownika.

instagram viewer

Interfejs API Web Speech jest korzystny ze względu na ułatwienia dostępu. Na przykład umożliwia użytkownikom niedowidzącym łatwiejszą interakcję z aplikacjami internetowymi. Pomaga także użytkownikom mającym trudności z pisaniem na klawiaturze lub poruszaniem się za pomocą myszy.

Zapewnia również bezpośrednie podejście do konstruowania nowoczesnych narzędzi i technologii stosowanych współcześnie. Na przykład możesz użyć interfejsu API do tworzyć aplikacje zamiany mowy na tekst do robienia notatek.

// zainicjuj rozpoznawanie mowy
konst uznanie = nowy webkitRozpoznawanie mowy();
// ustaw język na angielski
rozpoznawanie.język = „en-US”;


// zdefiniuj funkcję do obsługi wyniku rozpoznawania mowy
rozpoznanie.w wyniku = funkcjonować(wydarzenie) {
konst wynik = event.results[event.resultIndex][0].transkrypcja;
konsola.log (wynik)
};
// uruchom rozpoznawanie mowy
rozpoznawanie.start();

Oto przykład użycia obiektu rozpoznawania mowy do konwersji mowy na tekst, który zostanie wyświetlony w konsoli.

2. Przeciągnij i upuść interfejs API

Interfejs API Drag and Drop umożliwia użytkownikom przeciąganie i upuszczanie elementów na stronie internetowej. Ten interfejs API może poprawić komfort korzystania z aplikacji internetowej, umożliwiając użytkownikom łatwe przenoszenie i zmianę kolejności elementów. Interfejs API przeciągania i upuszczania składa się z dwóch głównych części wymienionych poniżej:

  • Źródło przeciągania to element, który użytkownik klika i przeciąga.
  • Cel upuszczania to obszar do upuszczenia elementu.

Dodaj detektory zdarzeń do elementów docelowych przeciągania i upuszczania, aby korzystać z interfejsu API przeciągania i upuszczania. Detektory zdarzeń będą obsługiwać zdarzenia dragstart, dragenter, dragleave, dragover, drop i drag end.

// Pobierz elementy strefy, które można przeciągać i upuszczać
konst przeciągany element = dokument.getElementById(„przeciągany”);
konst Strefa upuszczania = dokument.getElementById('strefa zrzutu');
// Dodaj detektory zdarzeń, aby umożliwić przeciąganie elementu
draggableElement.addEventListener(„przeciąganie”, (zdarzenie) => {
// Ustaw dane, które mają zostać przesłane po upuszczeniu elementu
 event.dataTransfer.setData('Zwykły tekst', zdarzenie.cel.id);
});


// Dodaj detektor zdarzeń, aby zezwolić na upuszczanie elementu strefy upuszczania
dropZone.addEventListener(„drogowiec”, (zdarzenie) => {
 zdarzenie.preventDefault();
 dropZone.classList.add(„przeciąganie”);
});
// Dodaj detektor zdarzeń do obsługi zdarzenia upuszczenia
dropZone.addEventListener('upuszczać', (zdarzenie) => {
 zdarzenie.preventDefault();
konst draggableElementId = event.dataTransfer.getData('tekst');
konst przeciągany element = dokument.getElementById (przeciąganyIdentyfikatorElementu);
 dropZone.appendChild (przeciągany element);
 dropZone.classList.remove(„przeciąganie”);
});

Implementacja powyższego programu pozwoli użytkownikom przeciągnąć element z identyfikatorem, który można przeciągać, i upuścić go w strefie zrzutu.

3. Interfejs API orientacji ekranu

Interfejs API orientacji ekranu zapewnia programistom informacje o bieżącej orientacji ekranu urządzenia. Ten interfejs API jest szczególnie przydatny dla twórców stron internetowych, którzy chcą zoptymalizować swoje witryny pod kątem różnych rozmiarów i orientacji ekranu. Na przykład, responsywna aplikacja internetowa dostosuje układ i wygląd swojego interfejsu w zależności od tego, czy użytkownik trzyma urządzenie w orientacji pionowej czy poziomej.

Interfejs API orientacji ekranu zapewnia programistom pewne właściwości i metody uzyskiwania dostępu do informacji o orientacji ekranu urządzenia. Oto lista niektórych właściwości i metod zapewnianych przez interfejs API:

  • kąt.orientacji.okna.ekranu: Ta właściwość zwraca bieżący kąt ekranu urządzenia w stopniach.
  • typ.orientacji.okna.ekranu: Ta właściwość zwraca bieżący typ orientacji ekranu urządzenia (np. „pionowa-podstawowa”, „pozioma-podstawowa”).
  • window.screen.orientation.lock (orientacja): ta metoda blokuje orientację ekranu na określoną wartość (np. „pionowo-podstawowa”).

Tych właściwości i metod można używać do tworzenia responsywnych aplikacji internetowych, które dostosowują się do różnych orientacji ekranu.

Oto przykładowy fragment kodu, który pokazuje, jak interfejs API orientacji ekranu wykrywa i reaguje na zmiany w orientacji ekranu urządzenia:

// Pobierz bieżącą orientację ekranu
konst bieżąca Orientacja = oknotyp.orientacji.ekranu;
// Dodaj detektor zdarzeń do wykrywania zmian w orientacji ekranu
okno.screen.orientation.addEventListener('zmiana', () => {
konst nowyOrientacja = oknotyp.orientacji.ekranu;


// Zaktualizuj interfejs użytkownika w oparciu o nową orientację
Jeśli (nowaOrientacja „portret-podstawowy”) {
// Dostosuj układ do orientacji pionowej
 } w przeciwnym razie {
// Dostosuj układ do orientacji poziomej
 }
});

4. Interfejs API udostępniania w sieci Web

Web Share API umożliwia programistom zintegrowanie natywnych funkcji udostępniania z ich aplikacjami internetowymi. Ten interfejs API ułatwia użytkownikom udostępnianie treści z Twojej aplikacji internetowej bezpośrednio do innych aplikacji, takich jak media społecznościowe lub komunikatory. Korzystając z interfejsu Web Share API, możesz zapewnić swoim użytkownikom bezproblemowe udostępnianie, co może pomóc zwiększyć zaangażowanie i zwiększyć ruch w Twojej aplikacji internetowej.

Aby zaimplementować interfejs Web Share API, użyjesz navigator.share metoda. Aby go zaimplementować, użyjesz asynchroniczna funkcja JavaScript, która zwraca obietnicę. Ta obietnica rozwiąże się z Udostępnij dane obiekt zawierający udostępnione dane, takie jak tytuł, tekst i adres URL. Gdy masz Udostępnij dane obiekt, możesz nazwać navigator.share metoda, aby otworzyć natywne menu udostępniania i pozwolić użytkownikowi wybrać aplikację, której chce udostępnić zawartość.

// Uzyskaj przycisk udostępniania
konst przycisk udostępniania = dokument.getElementById(„przycisk udostępniania”);
// Dodaj detektor zdarzeń do przycisku udostępniania
shareButton.addEventListener('Kliknij', asynchroniczny () => {
próbować {
konst udostępnij dane = {
 tytuł: „Sprawdź tę fajną aplikację internetową!”,
 tekst: „Właśnie odkryłem tę niesamowitą aplikację, którą musisz wypróbować!”,
 Adres URL: ' https://example.com'
 };
czekać na navigator.share (udostępnij dane);
 } złapać (błąd) {
konsola.błąd(„Błąd podczas udostępniania treści:”, błąd);
 }
});

5. API geolokalizacji

Interfejs API geolokalizacji umożliwia aplikacjom internetowym dostęp do danych o lokalizacji użytkownika. Ten interfejs API udostępnia informacje, takie jak długość i szerokość geograficzna oraz wysokość nad poziomem morza, w celu świadczenia użytkownikom usług opartych na lokalizacji. Na przykład aplikacje internetowe mogą korzystać z interfejsu API geolokalizacji w celu dostarczania spersonalizowanych treści lub usług w oparciu o lokalizację użytkownika.

Aby zaimplementować interfejs API geolokalizacji, użyjesz nawigator.geolokalizacja obiekt. Jeśli istnieje obsługa interfejsu API, możesz użyć metody getCurrentPosition, aby uzyskać bieżącą lokalizację użytkownika. Ta metoda przyjmuje dwa argumenty: powodzenie funkcji wywołania zwrotnego wywoływanej w celu pobrania lokalizacji oraz funkcji wywołania zwrotnego błędu wywoływanej, jeśli wystąpił błąd podczas pobierania lokalizacji.

// Pobierz przycisk lokalizacji i element wyjściowy
konst przycisk lokalizacji = dokument.getElementById(przycisk lokalizacji);
konst element wyjściowy = dokument.getElementById(„element wyjściowy”);
// Dodaj detektor zdarzeń do przycisku lokalizacji
locationButton.addEventListener('Kliknij', () => {
// Sprawdź, czy obsługiwana jest geolokalizacja
Jeśli (navigator.geolokalizacja) {
// Pobierz aktualną pozycję użytkownika
 navigator.geolocation.getCurrentPosition((pozycja) => {
 element wyjściowy.tekstZawartość = `Szerokość geograficzna: ${pozycja.współrzędne.szerokość geograficzna}, długość geograficzna: ${pozycja.współrzędne.długość geograficzna}`;
 }, (błąd) => {
konsola.błąd(„Błąd pobierania lokalizacji:”, błąd);
 });
 } w przeciwnym razie {
 element wyjściowy.tekstZawartość = „Geolokalizacja nie jest obsługiwana przez tę przeglądarkę”.;
 }
});

Możesz tworzyć lepsze aplikacje internetowe za pomocą interfejsów API przeglądarki

Korzystanie z interfejsów API przeglądarki może naprawdę zmienić sposób korzystania z aplikacji internetowej przez użytkownika. Od dodawania nowych poziomów funkcjonalności po tworzenie bardziej spersonalizowanych doświadczeń, te interfejsy API mogą pomóc odblokować nowe poziomy kreatywności i innowacji. Eksperymentując z tymi interfejsami API i odkrywając ich potencjał, możesz stworzyć bardziej wciągającą, wciągającą i dynamiczną aplikację internetową, która wyróżnia się w zatłoczonym cyfrowym krajobrazie.

Wykorzystanie interfejsów API przeglądarek w rozwoju różnych technologii służy jako wyraźna demonstracja ich szerokiego zastosowania i znaczenia.