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.

Kick starting with Windows Store App Development using HTML, CSS and JavaScript

A huge opportunity is opened for web developers with the release of Windows 8. Microsoft allows various development options like C#, C++ and JavaScript for developing apps for Windows. Any one with HTML, CSS and JavaScript knowledge can now use that skills to develop apps for Windows 8. Here is a small video which helps you understand how these HTML apps are different from Web Sites and Continue reading “Kick starting with Windows Store App Development using HTML, CSS and JavaScript”

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!”