As developers, you often use Web apis to easily implement complex functions or create them to abstract away the complexity. Web apis allow services to talk to each other, share information to moments or display maps.

The Web apis used to build client-side Web applications can be divided into two categories:

  • The browser API: is a normal API for JavaScript, allowing developers to easily implement functionality. For example,DOM,Fetch, audio, video,WebGL,notifications, etc.
  • Third party development API: These interfaces are usually not built into the browser, but are provided by third party platforms that can be used in a specific environment, such as wechat, Weibo sharing, etc

Here’s a summary of the apis that you often encounter in Web projects:

  • Geolocation API: Allows access to retrieve location information for host devices
  • Document Object Model API: DOM is the API of HTML documents. It is the interface between JavaScript and HTML documents. It has a large list of interfaces, such as Document object interface, Window object interface and so on
  • History API: Abstract in most router implementations. The API is capable of tracking and modifying browser urls and history, as well as accessing browsing history through JavaScript
  • The canvas API: Allowed to pass use<canvas>The element displays different visual graphics on the page, useful for HTML games and diagrams
  • Animation API: Supports coordinated visual changes on the page, combining the best of CSS transitions/animation with javascript-based animation.

In this article, you’ll explore some of the apis that provide mobile-friendly functionality, from social media sharing and clipboard manipulation to contact selectors, voice, and notification capabilities. Here’s a summary of the apis commonly used for mobile WEB development.

Share the API

Sharing features can be implemented on websites, giving it the feel of mobile local sharing, sharing text, files, and links to other applications on the device.

It can be accessed via the navigator.share method:

If (navigator. Share) {navigator. Share ({title: "DevPoint ", text: "DevPoint ", url: "Https://www.devpoint.cn"}). Then (() = > console. The log (" share successful ")). The catch ((error) = > console. The log (share "failure", the error)); }Copy the code

The above code snippet demonstrates how to share text using plain JavaScript. Let’s define a method that returns the button and completes the binding of the onclick event:

import React from "react"; function ShareButton({ label, text, title }) { const shareDetails = { title, text }; const handleSharing = async () => { if (navigator.share) { try { await navigator .share(shareDetails) .then(() => Console. log(" Shared successfully ")); } catch (error) {console.log(' share failed: ${error} '); }} else {console.log(" this browser is not currently supported "); }}; return ( <button onClick={handleSharing}> <span>{label}</span> </button> ); } export default ShareButton;Copy the code

Contact selector API

Most mobile applications probably involve accessing contact information, which can be implemented using navigator.contacts, which takes two parameters: properties, an array containing the properties to be accessed, and options.

const props = ["name", "tel"];
const opts = { multiple: true };

async function getContacts() {
    try {
        const contacts = await navigator.contacts.select(props, opts);
        handleResults(contacts);
    } catch (ex) {
        // 错误
    }
}
Copy the code

Clipboard API

Clipboard operations, such as copy, cut, and paste, are the most common features in mobile applications. The Clipboard API allows Web users to access the system clipboard and perform basic clipboard operations.

In the past, you could use the DOCUMENT. execCommand of DOM objects to interact with the system clipboard. However, the latest asynchronous Clipboard API provides access to read and write clipboard content directly, as described in The Use of WEB clipboard operations navigator.clipboard.

Speech API

Speech recognition and text-to-speech capabilities are now added to most mobile applications to improve ease of use and user experience, and voice apis bring these capabilities to browsers. In this article, I only discuss the SpeechRecognition interface, using the SpeechRecognition interface for SpeechRecognition, and using the device’s default SpeechRecognition system:

const SpeechRecognition = SpeechRecognition || webkitSpeechRecognition; const recognition = new SpeechRecognition(); // new SpeechRecognition object recognition.continuous = false; recognition.lang = "cn-ZH"; recognition.interimResults = false; Recognition. Onstart = function () {console.log(" Please speak into the microphone "); }; Text.onspeechend = function () {// When the user finishes speech text.stop (); }; // Run recognization. onResult = function (event) {var transcript = event.results[0][0]. var confidence = event.results[0][0].confidence; }; // start recognition. Start ();Copy the code

Notify API

The Notification API is often interchanged with the Push API, but they are different. The goal of the Notification API is to display information to the user, while the Push API allows the service worker to handle Push messages from the server even when the device is inactive.

This approach is now widely used by blogs and Web applications to notify users when a service changes or is updated. A common case of this API is when the application is PWA and requires the user to refresh the browser to get new application updates.

JavaScript has a Notification constructor:

Const message = "Upgrade for new functionality "; Const notification = new notification (" Save PWA ", {body: text});Copy the code

conclusion

In this article, I briefly summarized the common apis for Web project development and those related to mobile application development.