• 8 Unheard of Browser APIs You Should Be Aware of
  • By Mahdhi Rezvi
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: zenblo
  • Proofreader: Onlinelei, Inchill

Describe the use of the Web API in eight browsers

There is a growing trend for browser developers to introduce apis that enable complex functionality that is sometimes only available through native applications. At this point in time, it’s hard to find a Web application that uses only one or two browser apis.

As the Web development landscape continues to evolve, browser vendors are trying to keep up. They are constantly developing updated apis that can bring native-like new functionality to your Web applications. Although these apis are now fully supported by many major browsers, they are not well understood.

You should be aware of these apis as they will play a crucial role in the future.

The Web lock API

This API allows you to run Web applications on multiple tabs to access and coordinate resource sharing. While it’s not common for a simple everyday Web application to run on multiple tabs, in some advanced use cases, your Web application running on multiple tabs in your browser needs to be synchronized. In these cases, this API may come in handy.

Although apis such as SharedWorker, BroadcastChannel, localStorage, sessionStorage, postMessage and Unload Handler are available To manage option messages and synchronization, but each has its drawbacks and is in dire need of a solution, which reduces the maintainability of the code. The Web lock API attempts to simplify this process by introducing a more standardized solution. You can use shared workers, broadcast channels, localStorage, sessionStorage, postMessage, etc.

Although this feature is enabled by default in Chrome 69, it is still not supported by major browsers such as Firefox and Safari.

Tip: You should be aware of concepts such as “deadlocks” to avoid confusion when using the API.

Shape detection API

As a Web developer, you’ve probably come across many instances where you need to install third-party libraries to handle element detection, such as recognition of faces, text, and bar codes. This is because there was no standard API for developers to use before.

So the Google Chrome team is trying to change that and make it a Web standard by offering an experimental shape-detection API in the Chrome browser.

Although this feature is experimental at the moment, it can be done by enabling chrome://flags#enable-experimental-web-platform-featuresFlag to access locally.

Payment request API

The payment request API can help consumers and merchants make the checkout process smoother. This new approach eliminates checkout forms and fundamentally improves the user’s checkout experience. With support for Apple Pay and Google Pay, the API is expected to become a major part of the e-commerce space.

In addition, because credentials are managed in the browser, users can more easily switch from a mobile browser to a desktop browser and still get their bank card information. The API also allows customization from the merchant side. You can provide supported payment methods and supported bank card types, and even offer shipping options based on shipping address.

Page visibility API

It’s not uncommon for you to occasionally come across a computer with 20 strange tabs open. I once had a friend who closed about 100 + tabs after fixing a bug. Browsers have even started to implement features that group tabs to make them more organized.

With the page visibility API, you can detect if a web page is idle. In other words, you can detect whether the TAB containing your web page is being viewed by a user.

While this sounds simple, it can be very effective in improving the user experience of your site. You can use this API in any of the following situations.

  • When the browser TAB is inactive, the remaining application bundle resources and media resources are downloaded. This will help you use your free time very efficiently.
  • Pause the video when the user minimizes or switches to another TAB.
  • Pauses image slide rotation while the TAB is inactive.

Although developers have used events like “blur” and “focus” on Windows in the past, they haven’t told you whether your page is actually hidden from the user. The page visibility API helps solve this problem.

The browser API is compatible with most browsers.

Share the Web API

This Web sharing API lets you share links, text, and files to your native application just like you would with a native application. This API can help increase user engagement with Web applications. You can read Joe Medley’s blog post to learn more about this cool API.

As of mid-2020, the API is only available on Safari and Android in Chromium Fork. See MDN for more browser compatibility information.

Shared target API

Progressive Web applications are changing the way we understand applications by providing an application-like experience in Web forms. According to the StateOfJS website, about 48.2 percent of users use PWA, while 45.5 percent know what PWA is, indicating the impact of PWA. You can read more about PWA here.

Although PWA has many native-like features, they lack a way to receive files from native applications. Using this API, you can receive links, text, and files from other native applications. Chrome 76 and later only supports Android. You can read more about this API here.

Push the API

This Push API allows Web applications to receive messages pushed to them from the server, regardless of whether the application is in the foreground. It works even if the application is not loaded in the browser. This allows developers to deliver asynchronous notifications to users in a timely manner. But for this to work, you should get user permission before using the API.

You can read more about the Push API in Flavio’s excellent article.

Cookie cache API

Cookies are notoriously slow to use because they are synchronized. But the Cookie caching API provides asynchronous access to HTTP cookies. In addition, the API exposes these HTTP cookies to service workers.

Although there are helper libraries that help with all the usual cookie operations, it is made easier and more efficient with the help of the Cookie Store API. This API is sometimes called the Async Cookies API.

You can learn more about this API here.

conclusion

When I tried these apis, I was amazed at how cool they were to use. As mentioned earlier, the only disappointing aspect of the API above is the lack of support from major browsers. This means that using them in production is not simple. But there is no doubt that these apis will play a vital role in browsers and Web development.

The resources

  • MDN web docs
  • SitePen
  • StateOFJS
  • Creative Bloq

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.