Ernest Delgado on web.dev

Using the Notifications API

2010-02-24T00:00:00Z

Introduction #

The Notifications API allows you to display notifications to the user for given events, both passively (new emails, tweets or calendar events) and on user interactions regardless of which tab has focus. There is draft spec but it is not currently in any standard.

You can follow these simple steps to implement notifications in just a few minutes:

Step 1: Check for Notifications API support #

We check if webkitNotifications is supported. Note that the name of webkitNotifications is because it's part of a draft spec. The final spec will have a notifications() function instead.

// check for notifications support
// you can omit the 'window' keyword
if (window.webkitNotifications) {
console.log("Notifications are supported!");
}
else {
console.log("Notifications are not supported for this Browser/OS version yet.");
}

Step 2: Let the user grant permissions to a website to show notifications #

Any of the constructors we mentioned will throw a security error if the user hasn't manually granted permissions to the website to show notifications. To handle the exception you can use a try-catch statement but you can also use the checkPermission method for the same purpose.

document.querySelector('#show_button').addEventListener('click', function() {
if (window.webkitNotifications.checkPermission() == 0) { // 0 is PERMISSION_ALLOWED
// function defined in step 2
window.webkitNotifications.createNotification(
    'icon.png', 'Notification Title', 'Notification content...');
} else {
window.webkitNotifications.requestPermission();
}
}, false);

If the web application doesn't have permissions to show notifications then the requestPermission method will show an infobar:

The notifications permission infobar in Google Chrome.

However, it's very important to remember that the requestPermission method only works in event handlers triggered by a user action, like mouse or keyboard events, in order to avoid unsolicited infobars. In this case, the user action is the click on the button with id "show_button". The snippet above will never work if the user hasn't explicitly clicked on a button or link that triggers the requestPermission at some point.

Step 3: Attach listeners and other actions #

document.querySelector('#show_button').addEventListener('click', function() {
  if (window.webkitNotifications.checkPermission() == 0) { // 0 is PERMISSION_ALLOWED
    // function defined in step 2
    notification_test = window.webkitNotifications.createNotification(
      'icon.png', 'Notification Title', 'Notification content...');
    notification_test.ondisplay = function() { ... do something ... };
    notification_test.onclose = function() { ... do something else ... };
    notification_test.show();
  } else {
    window.webkitNotifications.requestPermission();
  }
}, false);

At this point, you might want to encapsulate all these events and actions creating your own Notification class to keep the code cleaner, although this is beyond the scope of this tutorial.

Using the Page Visibility API

2010-02-24T00:00:00Z

Introduction #

As Web developers, we tend to get excited by new technologies that enable us to create ever more engaging, interactive Web pages. 3D graphics with WebGL? Absolutely. Advanced audio capabilities with WebAudio? Sure thing. Real-time collaboration applications using the Web camera and microphone? Sign me up!

Less exciting, though equally important, are the technologies that allow us to build applications that run more efficiently and provide a better overall user experience. This is where an API like PageVisibility comes in.

The Page Visibility API performs a simple but important function – it lets your application know when a page is visible to the user. This basic piece of information enables the creation of Web pages that behave differently when they are not being viewed. Consider a few examples:

A Web page that retrieves information from a server can slow down its update cycle when not being actively viewed
A page that displays a rotating image carousel or video/audio content can pause until the user displays the page again
An application can decide to display notifications to the user only when it is hidden from view

At first, this API may not seem very useful beyond user convenience, but considering the huge increase in mobile Web browsing, anything that helps save the device's battery power becomes very important. By using the PageVisibility API, your site can help the user's device consume less power and last longer.

Browser support

Chrome 33, Supported 33
Firefox 18, Supported 18
Edge 12, Supported 12
Safari 7, Supported 7

Source

The API specification, which as of this writing is in the Candidate Recommendation stage, provides both properties for detecting the document's visibility state as well as an event for responding to visibility changes.

In this tutorial, I'll cover the basics of the API and show how to apply it to some practical examples (feel free to skip ahead to them if you're the impatient type).

Document Visibility Properties #

The current version of the PageVisibilityAPI spec defines two document properties: the boolean hidden and the enumeration visibilityState. The visibilityState property currently has four possible values: hidden, visible, prerender, and unloaded.

As you might expect, the hidden attribute returns true when the document is not visible at all. Typically, this means that the document is either minimized, on a background tab, the OS's lock screen is up, etc. The attribute is set to false if any part of the document is at least partially visible on at least one display. In addition, to accommodate accessibility tools, the hidden attribute can be set to false when a tool such as a screen magnifier completely obscures the document, but is showing a view of it.

Dealing with vendor prefixes #

To keep the focus on the code instead of all the vendor-specific prefixing, I’m going to use some helper functions to isolate the browser-specifics. As soon as you drop support for Android 4.4 Browser you can remove this part and stick to the standard names.

function getHiddenProp(){
    var prefixes = ['webkit','moz','ms','o'];

    // if 'hidden' is natively supported just return it
    if ('hidden' in document) return 'hidden';

    // otherwise loop over all the known prefixes until we find one
    for (var i = 0; i < prefixes.length; i++){
        if ((prefixes[i] + 'Hidden') in document)
            return prefixes[i] + 'Hidden';
    }

    // otherwise it's not supported
    return null;
}

Document Properties Example #

Now we can write a cross-browser function, isHidden(), to see if the document is visible.

function isHidden() {
    var prop = getHiddenProp();
    if (!prop) return false;

    return document[prop];
}

For a more granular view of the document's visibility, you can use the visibilityState property. This property returns one of four values:

hidden: the document is completely hidden from view
visible: the document is at least partially visible on at least one display device
prerender: the document is loaded off-screen and not visible (this value is optional; not all browsers will necessarily support it)
unloaded: if the document is to be unloaded, then this value will be returned (this value is optional; not all browsers will necessarily support it)

The VisibilityChange Event #

In addition to the visibility properties, there is a visibilitychange event that fires whenever the document's visibility state changes. You can register an event listener for this event directly on the document object:

Event Example #

// use the property name to generate the prefixed event name
var visProp = getHiddenProp();
if (visProp) {
  var evtname = visProp.replace(/[H|h]idden/,'') + 'visibilitychange';
  document.addEventListener(evtname, visChange);
}

function visChange() {
   var txtFld = document.getElementById('visChangeText');

   if (txtFld) {
      if (isHidden())
         txtFld.value += "Tab Hidden!\n";
      else
         txtFld.value += "Tab Visible!\n";
   }
}

Summary #

Building a great Web application involves far more than just using the whiz-bang, eye catching features that users can see and interact with. A truly great application makes considerate use of the user's resources and attention, and the Page Visibility API is an important piece of that puzzle. To learn more about building resource-conscious Web applications, check out our other performance-related articles.

External References #

Quick guide to implementing the HTML5 audio tag

2010-02-05T00:00:00Z

Step 1: Wrap your Flash object with the audio tag #

Those browsers that don't recognize the audio tag will load the Flash content instead.

<audio>
</span><span class="old">
    <object class="playerpreview" type="application/x-shockwave-flash"
            data="player_mp3_mini.swf" width="200" height="20">
      <param name="movie" value="player_mp3_mini.swf" />
      <param name="bgcolor" value="#085c68" />
      <param name="FlashVars" value="mp3=test.mp3" />
      <embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200"
             height="20" name="movie" align=""
             type="application/x-shockwave-flash" flashvars="mp3=test.mp3">
      </embed>
    </object>
</span><span class="new">
</audio>

Step 2: Add the source reference #

We can add as many "source" lines and formats as we want. If the browser doesn't support one specific format it will fallback to the next one and so forth.

<span class="old"><audio></span>
  <span class="new"><source src="test.mp3" type="audio/mpeg" />
  <source src="test.ogg" type="audio/ogg" /></span><span class="old">

  <object class="playerpreview" type="application/x-shockwave-flash"
          data="player_mp3_mini.swf" width="200" height="20">
    <param name="movie" value="player_mp3_mini.swf" />
    <param name="bgcolor" value="#085c68" />
    <param name="FlashVars" value="mp3=test.mp3" />
    <embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200"
           height="20" name="movie" align=""
           type="application/x-shockwave-flash" flashvars="mp3=test.mp3">
    </embed>
  </object>

</audio></span>

Step 3: Add fallback to Flash #

To be safe, we need to add the fallback to a Flash audio player, in case the browser doesn't support any of the formats we specified. For instance, Firefox 3.5 only supports the audio tag with Ogg format, but we might only have the mp3 file available.

<span class="old"><audio></span>
<span class="new"><source src="test.mp3" type="audio/mpeg" /></span><span class="old">

<object class="playerpreview" type="application/x-shockwave-flash"
        data="player_mp3_mini.swf" width="200" height="20">
<param name="movie" value="player_mp3_mini.swf" />
<param name="bgcolor" value="#085c68" />
<param name="FlashVars" value="mp3=test.mp3" />
<embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200"
        height="20" name="movie" align=""
        type="application/x-shockwave-flash" flashvars="mp3=test.mp3">
</embed>
</object>

</audio>
</span><span class="new">
<div id="player_fallback"></div>
<script>
if (document.createElement('audio').canPlayType) {
if (!document.createElement('audio').canPlayType('audio/mpeg')) {
    swfobject.embedSWF(
    "player_mp3_mini.swf",
    "player_fallback",
    "200",
    "20",
    "9.0.0",
    "",
    {"mp3":"test.mp3"},
    {"bgcolor":"#085c68"});
}
}
</script></span>

To make it easier, we are using the SWFObject library to insert the Flash player via JavaScript. To include the library you can simply use the Google AJAX Libraries API inserting these two lines in your header:

<span class="new"><script src="http://www.google.com/jsapi"></script>
<script>google.load("swfobject", "2.2");</script></span></pre>

Step 4: Add the default controls to show the player #

These controls are not customizable (see examples at the end). Since these default controls will show up regardless of the supported format we will need to handle its visibility with the conditional we previously created.

<span class="old"><audio </span><span class="new">id="audio_with_controls" controls</span><span class="old">></span>
<span class="old"><source src="test.mp3" type="audio/mpeg" /></span><span class="old">

<object class="playerpreview" type="application/x-shockwave-flash"
        data="player_mp3_mini.swf" width="200" height="20">
<param name="movie" value="player_mp3_mini.swf" />
<param name="bgcolor" value="#085c68" />
<param name="FlashVars" value="mp3=test.mp3" />
<embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200"
        height="20" name="movie" align=""
        type="application/x-shockwave-flash" flashvars="mp3=test.mp3">
</embed>
</object>

</audio>
</span><span class="old">
<div id="player_fallback"></div>
<script>
if (document.createElement('audio').canPlayType) {
if (!document.createElement('audio').canPlayType('audio/mpeg')) {
    ... SWFObject script line here ...
    </span><span class="new">document.getElementsById('audio_with_controls').style.display = 'none';</span><span class="old">
}
}
</script></span>

Alternatively, you can create your own player using JavaScript and CSS.

<span class="old"><audio </span><span class="new">id="audio"</span><span class="old">></span>
<span class="old"><source src="test.mp3" type="audio/mpeg" /></span><span class="old">

<object class="playerpreview" type="application/x-shockwave-flash"
        data="player_mp3_mini.swf" width="200" height="20">
<param name="movie" value="player_mp3_mini.swf" />
<param name="bgcolor" value="#085c68" />
<param name="FlashVars" value="mp3=test.mp3" />
<embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200"
        height="20" name="movie" align=""
        type="application/x-shockwave-flash" flashvars="mp3=test.mp3">
</embed>
</object>

</audio>
</span><span class="old">
<div id="player_fallback"></div>
<span class="new"><div id="player" style="display: none">
<button onClick="document.getElementById('audio').play()">Play</button>
<button onClick="document.getElementById('audio').pause()">Pause</button>
</div></span>

<script>
if (document.createElement('audio').canPlayType) {
if (!document.createElement('audio').canPlayType('audio/mpeg')) {
    ... SWFObject script lines here ...
} </span><span class="new">else { // HTML5 audio + mp3 support
    document.getElementById('player').style.display = 'block';
}</span><span class="old">
}
</script></span>