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.
Tip: one key element of an awsome user-experience is a consistent UI. Use tools like Bit (Github) to share and reuse UI components across your apps. With Bit, keeping a consistent UI becomes a great way to speed up development and minimize errors in code.
1. 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 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.
Check out my demo of the Web Share API:
4. 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)
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.
Available in Chrome 77
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
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! 🍺
