Permissions API for Web

Permissions API in Web - PranavOn.Net
Till now, when you land on a site that needs your location, Chrome immediately pops up a little request at the top of the browser window, even though you may not even really know what the site is all about. Now, as a developer, if you’ve worked with the Geolocation API before, chances are you’ve wanted to check if you had permission to use Geolocation without causing a prompt. This simply wasn’t possible. You had to request the current position and this would indicate the permission state or cause a prompt to be shown to the user. Similarly for Notifications, you need to check whether notifications are enabled or not. Each API has different (or its own) way of checking if that feature is available/enabled or not. With the increased and growing number of such APIs in there is a necessity for common way of doing this. Chrome is first one to implement this feature called ‘Permissions API’ in its 43 version which is rolled out a couple of days back.
To brief, Permissions API lets developers query and observe changes to their permission status for Geolocation, Push, Notifications, and Web MIDI. Asking for permission in context means fewer unnecessary and untimely prompts for the user.
Before the Permissions API, websites could not determine the permission state of APIs. Sites would thus attempt to use APIs immediately after page load without pre-existing permission, causing users to see confusing permission prompts without an explanation.
You can check the status of a permission using the permissions.query() method. This will return a status of granted (you have permission), denied (you are blocked from accessing the API) or prompt (user needs to be prompted).

// Checking for Geolocation API Permissions  
navigator.permissions.query({name:'geolocation'}).then(function(permissionStatus)
{
  console.log('geolocation permission status is ', permissionStatus.status);
  permissionStatus.onchange = function() {
    console.log('geolocation permission status has changed to ', this.status);
  };
});

For more details on Usage, have a look at Documentation or for a quick glance.
Demo: Permissions API Demo
Resources:

Page Visibility in HTML5

It is quite common for someone to browse web with multiple tabs or its very rare to see people using browser with single Tab. We open different websites in multiple tabs and tend to switch between them based on our interest at that point of time.

It is important for a web developer to consider this behavior of the user especially when you are designing a web application that include processor and memory intensive content like Image Scrollers, Animations, Ajax Polling etc. All these things eat your system resources that can be better utilized elsewhere if your web page isn’t using them when it is not visible. Continue reading “Page Visibility in HTML5”

How to know what HTML5 tags can I use?

While working with HTML5, its quite common to get a doubt about what tags can we use and which tags are implemented/supported by which browsers. Isn’t it cool if we have a tool to provide tag name and get the supported browsers along with their versions? Such tool is Can I Use

caniuse.com is very handy tool to HTML5 developers to check the new tags based on the browsers they mainly target until HTML5 is finalized.

Introducing Myth – New CSS guy in the market!

Myth is a postprocessor that lets you write pure CSS without having to worry about slow browser support, or even slow spec approval. It’s like a CSS polyfill.

It lets you write pure CSS while still giving you the benefits of tools like LESS and Sass. You can still use variables and math functions, just like you do in preprocessors. It’s like a polyfill for future versions of the spec.

Some of the features in CSS require runtime calculations, which neither Myth nor preprocessors handle, but what Myth does is let you write your code today in the future syntax, so that your code is future-proof. When browsers finally support these features you won’t need to rewrite anything, just remove Myth and start using the cascade! Continue reading “Introducing Myth – New CSS guy in the market!”

Using HTML5 Vibration API

Most of the people are using tablets and mobile phones for browsing sites. As per recent survey conducted by a popular internet website, one in every five requests for sites is from mobile device. So, the market is inclined towards mobile applications. But, as there are a bunch of mobile platforms that are available and many are yet to come, it is tough to write app exclusively for each device. So, developers started opting for HTML5 for developing cross-platform apps. Though it has its challenges, there are capabilities which aren’t available on desktops. For example, Vibration feature is a tactile mechanism which alerts user when they got a message or a call, especially when there is a loud noise or quite places where playing sound is a disturbance.

Wouldn’t it be cool if you could use vibration in your HTML5 application? For example, user feeling a gentle kick when the car hits another car in a Racing game, or user feeling a small jerk when a notification is displayed on the corner of app. There are many such use cases where you want to drag the attention of user.
Vibration API allows you to do this using java script. Continue reading “Using HTML5 Vibration API”