Features of the Chrome API You Should Know

Features of the Chrome API You Should Know

7 New Chrome APIs You Should Know. 7 top Chrome features that blur the lines between native apps and web apps.

We love our native apps because they seem to offer a better user-experience — a faster and more reliable one. Still, we wouldn’t like to commit to every web app, the same way we do when we download and install a native app. As the web evolves, we see an increasing blurring of the lines between web apps and native apps — that happens for a good reason 😃

Here, I’ll bring you the latest mind-blowing technologies that are being brought to our browsers. Most of them are already here, some are undergoing origin trials so soon enough (sooner than you think) we will be seeing whole new features in our browsers especially in the chrome browser.

1. Web Bundles

Web Bundles

This API opens the possibility of bundling your full website as a single file. Not only that, you can share the single file over any medium (Bluetooth or Wi-fi Direct) and it can be run offline.

The bundled item is an .wbn extension file. All the HTML pages, CSS, images, videos, etc., are all bundled up in the .wbn file.

Imagine this, you are using a web drawing app on your phone, then you noticed that your data will soon be exhausted. With the data remaining you use the Web Bundle API to bundle the web drawing app to your phone.

Next, you know the data is exhausted, you don’t mind, you open the downloaded web drawing app bundle in your app and continue with your work.

You go hill-climbing with a friend, and on top of the hill there is no network reception, the app still works without hitch. Your friend sees the app and likes it, you send over the .wbn file to him. He opens the .wbn file on his phone and starts drawing without problems.

2. Periodic Background Sync

Periodic Background Sync

Periodic Background Sync is an extension of Background Sync that allows websites to register tasks to be run in a service worker at periodic intervals with network connectivity.

It is incredibly easy and up until now, could only be done in native apps (AsyncTask and Thread for Android, etc.).

It could be very useful for refreshing the contents of the user’s feed ahead of time, or in that PWA news app, we can periodically update the news while the user reads the news without affecting the UX. There is no need for a refresh button (like Twitter does in its pull refresh :))

This API hugely excels in an area of low network bandwidth, poor network reception or glitchy network.

This API is available in Chrome 77.

3. Web Share

This API brings native-like share capabilities that we’re used to seeing only in native apps. With this API, we can share links, text, and files just like we do from our native apps.

We can also use this API to register our web apps (PWAs) to receive shared data.

This API is available from Chrome 68.

4. Web Contact Picker

Web Contact Picker

With this Web Contact API, users are allowed to select entries from their contact list and share limited details of the selected entries with a website.

Here, again, we see a native-only feature introduced to web apps (in Android, you would access the contact list using the Intent.ACTION_PICK)

Web Contact API

With this API, we can have a web app that enables users to select a friend from its contact list to call over the internet. A web app that use the contact list to select a friend to email, or to select a friend to Skype, or use any social networks with.

5. Wake Lock API

Wakey wakey!!!

We see so many native apps using the wake lock feature to prevent our devices from going to sleep after a specified amount of idle time when using the app.

Games are good examples, they prevent the phone from sleeping when the game is on. You are playing Temple Run and you are sent on an errand. Your phone will sit idle on your bed, the Temple Run will use the wake lock to prevent the phone from sleeping, the phone will be awake until you return.

It seemed that only native apps can do this. Now, this Wake Lock feature is coming to our browsers, we will be able to use it feature in our web apps.

With the Wake Lock API, we can prevent our device from sleeping and locking during idle time.

The use cases for this Wake Lock API are endless.

6. getInstalledRelatedApps()

This API allows us to check if the native version of your app is already installed in a device.

7. Shape Detection API

Shape Detection API

This API enables you to detect shapes from your browser.

This API currently supports detecting the following features:

Faces: Through the FaceDetector interface, this API can detect faces in images. Imagine taking a picture and your browser tells you who is who in the image. Most social networks like FaceBook does this, you upload an image it tells you through face detection that this is your friend Frida, this is your friend John.

With this face detection, we can highlight faces in a profile picture and zoom on it.

We can also, add overlays to pictures with this. Overlays like Thor’s beard, sunglasses, emojis, just like Snapchat does.

Barcodes: Through the BarcodeDetector interface, we can read bar codes from our web apps.

Barcodes are majorly used in supermarkets and grocery stores these days. The prices are stored in barcodes in the goods, the grocery tender uses a bar code reader to read the prices and tag each bought item and tells you the prices.

Now, with your browser having capabilities like the grocery sales girl, you can walk about with your phone checking the prices right from your web app!!!

Not only in stores are bar codes used, but also in airports, in books, online payment.

Text: We can detect texts using the TextDetector interface in the Shape Detection API.

You see, this opens up a lot of possibilities. With this text detection, we can use our web app to detect and translate texts to a language we understand.

Conclusion

That’s my list of most exciting features coming out. Comment below and let me know what you think 😃

Cheers!

programming Chrome

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Programming In Acceleration: Levelling Up Programming Skills

Some require and some are not. But acceleration programs might require you to build one. I’ll tell you how I made a computer program for the competition.

Coding 101: Programming Language Building Blocks

This article will introduce the concepts and topics common to all programming languages, that beginners and experts must know!

How to Build Your First Chrome Extension in 5 Minutes

The Chrome web browser is very extensible. It seems like there is a plugin for just about everything you could ever possibly want. Have you ever wanted to create your own Chrome extension? Have you ever wondered how difficult the process would be? Well, it turns out it is a lot easier than you ever imagined. In this tutorial, you'll see How to Build Your First Chrome Extension in 5 Minutes

Guide to Python Programming Language

Guide to Python Programming Language

Functional Programming

Functional Programming: Functional Programming is a Declarative style of Programming Paradigm for writing computer programs.