SECRET OF CSS

Make Your WebApps Like Native Apps | by Kesk -*- | Oct, 2022


Blurs the boundary between native and hybrid with JavaScript

Photo by Pixabay from Pexels: https://www.pexels.com/photo/facebook-application-icon-147413/

When developing a mobile application, we have two main options: to create it native or hybrid. If your application does not require a lot of hardware power, it is usually better to create a hybrid app. This way, using just JavaScript and HTML, we can have an application that will serve both the web and mobile.

This post will show you ten APIs available in most modern browsers that will blur the border between native and hybrid apps.

These APIs are not 100% compatible with all web browsers, but they work well in most cases.

This API offers WebApps the ability to access the vibration hardware of the device if it exists and does nothing if the device doesn’t support it. You can use this API to make a device vibrate when you need it.

Vibration API js example.

This API is used to display desktop notifications to the user and is a way to alert the user of significant events in the application.

To use it, the first thing you have to check is whether you have permission to do so. You can see how to do this with the following code:

Notification API js example.

If you do not have permission, you can request it from the user with Notification.requestPermission():

Notification API js example.

Once permission is granted, you can create notifications using this code:

Notification API js example.

The battery API can monitor the device’s battery level and notify when the battery level or charging status changes.

The battery API exposes event handlers for handling changes in the battery level.

Useful, for example, to provide a low-power mode of your WebApp or to warn the user (using the notifications API) that they are running out of battery power so they can take the appropriate actions, such as saving what they are doing.

Battery API js example.

The Geolocation API is a browser-based API that allows websites to request information on users’ physical location (latitude and longitude).

The Geolocation API is accessed via a call to navigator.geolocation; this will cause the user’s browser to ask them for permission to access their location data.

All major browsers support the Geolocation API.

Here’s an example:

Geolocation API js example.

The Gamepad API is a way for the browser to access and respond to signals from the gamepad or other controller devices, usually connected via USB.

The Gamepad API introduces events on the Window object for reading the gamepad and controller state. In addition to these events, the API also adds a Gamepad object, which you can use to query the state of a connected gamepad.

What to do when connecting to a GamePad:

The gamepad events include a <gamepad> property on the event object, which returns a <GamePad> object.

Gamepad API js example.

How to disconnect a GamePad:

Gamepad API js example.

A basic example to get an idea of how it can be used to start a game when the first button is pressed is the following:

Gamepad API js example.

We keep the first GamePad connected ([0]) and query if the first button (gp.buttons[0].pressed) of the GamePad has been pressed.

The Page Visibility API detects whether a page is visible or in focus to the user.

It is helpful in different scenarios, such as stopping requesting data from the server when a particular page isn’t visible. When the user minimizes the webpage or moves to a different tab. In these cases, the API sends a visibilityChange event.

The possible values are:

  • visible
  • hidden
  • prerender
  • unloaded

In the following example, you can see how to detect visibility changes:

Page Visibility API js example.

The Web Bluetooth API is a way to connect to Bluetooth Low Energy devices from a web browser. This API can help connect a wide variety of devices.

This API is quite complex and powerful, so I leave you a link to its official documentation in case you need to use it, as it is beyond the scope of this post that pretends to be straightforward and easy to read.

https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API

The Screen Capture API provides access to the device’s screen, enabling the ability to take screenshots of the current screen. In addition, this API allows you to select a screen or portion of a screen (such as a window) to capture as a media stream.

This API is straightforward to use. It has only a method: MediaDevices.getDisplayMedia(), whose job is to query the user to select a screen or portion of a screen to capture in the form of a MediaStream.

Screen Capture API js example.

This async method returns a promise that resolves to a MediaStream, which streams the captured media.

This API provides a simple interface for capturing photos and videos from a camera or the user’s photo library.

The API is designed to be simple and easy to use. For example, it can capture photos or videos from a camera or the user’s photo library.

The MediaDevices.getUserMedia() method prompts the user for permission to use a media input, producing a MediaStream with tracks containing the requested media types. That stream can include, for example, a video track (produced by either a hardware or virtual video source such as a camera, video recording device, screen sharing service, and so forth.)

Here’s an example of how to use it:

Image Capture API js example.

The WebXR Device API exposes the capabilities of VR and AR devices to the Web. This feature is experimental and is only in contexts (like HTTPS, in some or all supporting browsers.)

For more information:

https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API

I hope this selection of APIs will give you an idea of how powerful this set of APIs is and what you can do with it. For more information, I leave below the official documentation where you have available all the APIs of the browser available today.

https://developer.mozilla.org/en-US/docs/Web/API



News Credit

%d bloggers like this: