Storage Events

Whenever a localStorage object is changed using the setItem(), removeItem(), or clear() functions, the storage event is fired (across multiple windows of the same origin) by the browser, we can trap this event and use it to share messages or data across windows. Check the following demo to see how this works in a simple case.

The above example works by using the storage event of the Window object. So whenever the localStorage object is modified, the storage event is fired and we use it to update the window content.

window.addEventListener("storage", displayStorageEvent, true);

Below is the skeleton code for the demo example.

// Input element
var data = document.getElementById('data');
// Element to display the updated data
var output = document.getElementById('event-data');
 
function displayStorageEvent(e) {
    if (e.key == 'storage-event') {
        output.innerHTML = e.newValue;
    }
}
 
function updateStorageEvent() {
    localStorage.setItem('storage-event', this.value);
}
 
window.addEventListener("storage", displayStorageEvent, true);
data.addEventListener("keyup", updateStorageEvent, true);

Sharing messages

Although in the above example we are sharing data across windows, we can use the same mechanism to share messages. In the above example we are using the ‘storage-event’ key to store the data we type in the input box. Instead we can pass a simple message. The syntax remains the same, only the semantics changes.

/* Store the 'checkPassword' message in the 'app.message.auth' key */
localStorage.setItem('app.message.auth', "checkPassword");
 
/* Store the 'dataSave' message in the 'app.message.status' key */
localStorage.setItem('app.message.status', "dataSave");

Security concerns

As the communication can only happen between windows with the same origin, there is little risk of data leak between sites. Still you should refrain from storing sensitive information in the storage.

Possible applications

Now that we have seen a simple proof of concept of ‘cross window messaging and data sharing’, what are the potential use cases of the same. An idea without a concrete and useful application is useless. Although many people will have good ideas for the above concept, I presently lack one. So if you can think of some nice use cases for this, please voice your ideas in the comments section.

Installing MozRepl

Before proceeding you need to first install MozRepl which comes as a Firefox extension. Head over to github to download and install. Once you have installed it, go to Firefox Tools menu and select MozLab → Start MozRepl. MozRepl will now be listening for connections on the default port 4242.

Connecting to MozRepl

Now that we have MozRepl up and running we can easily connect to it using Telnet. By default MozRepl listens on port 4242, which however you can change to your liking from the MozRepl menu.

C:\> telnet localhost 4242

You will get the following response if you are correctly connected to MozRepl.

Welcome to MozRepl.
 - If you get stuck at the "...>" prompt, enter a semicolon (;) 
at the beginning of the line to force evaluation.
 - If you get errors after every character you type, see http://github.c
om/bard/mozrepl/wikis/troubleshooting (short version: stop using 
Microsoft telnet, use netcat or putty instead)
Current working context: chrome://browser/content/browser.xul
Current input mode: syntax
 
repl>

If you have trouble connecting using Windows telnet or encounter some inconsistent behavior, you can use Putty instead. A typical putty connection setup is shown below, note the ‘telnet’ radio selection:

Also make sure you check the ‘Implicit CR in every LF’ check box.

Once you are connected to the server you will be presented with the following prompt:

repl>

Lets try a standard greeting.

repl> window.alert("Hello World!")

MozRepl is now ready to accepts your commands. Lets try a simple one given below. The first line is the command we send to MozRepl to get the title of the current open Firefox window, while the second line is the response.

repl> document.title
"Tutorial - mozrepl - GitHub - Mozilla Firefox"

Lets try changing the document title of the current Firefox window:

repl> document.title = "hello"

Use the following to get all the function and variables in Firefox:

repl> repl.look()

This is just a sampler, you can do a whole lot of things using MozRepl, check this video for some more examples.

Connecting to MozRepl with PHP

As MozRepl creates a server on port 4242, we can easily connect to it via PHP and send commands to it. A small example is given below which you will need to run from the command line. The following code sends 3 commands to the MozRepl server and prints the responses. It uses the socketHelper class to do the dirty work of socket processing.

<?php
 
require_once('socketHelper.php');
 
/* Commands to send to  MozRepl */
 
$commands=<<<EOD
repl.whereAmI()
content.location.href = 'http://google.com'
repl.quit()
EOD;
 
$firefox_socket = new SocketHelper;
if(!$firefox_socket->connect()) exit;
 
foreach(explode("\n",$commands) as $command){
    if($command=='')continue; //Skip blank lines
    echo $firefox_socket->send_command($command);
}
 
?>

Code for socketHelper class

<?php
 
/* socketHelper.php */
 
class SocketHelper
{
 
    private $address = "127.0.0.1";
    private $port    = "4242";
    private $socket  = null;
 
    public function connect()
    {
        $this->socket=socket_create(AF_INET,SOCK_STREAM,SOL_TCP);
        if(!$this->socket){
            socket_strerror($this->socket)."\n";
            return false;
        }
 
        $result=socket_connect($this->socket,$this->address,$this->port);
 
        if(!$result){
            socket_strerror($result)."\n";
            socket_close($this->socket);
            return false;
        }
 
        $this->read();
        return true;
    }
 
    /** Send a command to MozRepl */
    public function send_command($command){
        $command.="\n";
        socket_write($this->socket,$command);
        return $this->read();
    }
 
 
    /* 
        Read from the Socket until we get a "repl>" prompt, 
        or loop forever.
     */
    private function read(){
        $response = '';
        while(1){
            $chunk = socket_read($this->socket,65536,PHP_BINARY_READ);
            if($chunk === false){
                echo "Error reading from socket\n";
                break;
            }
            if($chunk === "") break; //No more data
 
            if(preg_match('|^(.*)\s*repl\d*>\s*$|s',$chunk,$match)){
                $response .= $match[1];
                break;
            }
 
            $response .= $chunk;
        }
        return $response;
    }
}
?>

Security Warning

Because MozRepl can directly poke inside FireFox it can practically work with anything – your bookmarks, cookies, cache etc, so security should be your prime concern. So do not ever allow outside connections in MozRepl (Tools menu → MozLab → Allow outside connections), unless you are sure what you are doing.

I’m still investigating the things I can do with MozRepl. If you have done some cool things of your own using it, please post your ideas here.

The following two videos provide a stark reminder, that for most of the time these are the people we develop software for.

Although the above videos are in the context of the users familiarity with the concept of a browser, it brings home the point that for the user the interface is everything, which most of us developers give little thought. Most users don’t care what browser or the version thereof they are using, they just need to get the work done somehow.

People are not idiots as the above videos may have you believe, on the contrary we developers are not smart enough to create usable software.

Writing software, once we become comfortable with the language and environment is easy. But crafting software that the user will love and admire is a lot harder, which in the end is what really matters. Not that I’m downplaying the importance of good code – testing, security, code efficiency are all important elements of a good product. But for the user, the interface is the product. Apple seems to get it, so why can’t everyone.

The path out of this quandary is to really understand usability. If you are a freelancer developer get some good books on interface design and usability, read them, try to implement as much good interface designs into your current project as you possibly can. Over time this will become almost second nature to you. Below are some of the books related to good interface designs that I personally like:

Many readers will be surprised by the absence of Coopers’ About Face 3 here. Coopers’ is a decent book, but I somehow do not like it. It is a tad wordy and preachy, most of which I do not agree on.

1. Browsers Quirks – Despite the standardization in browsers, there will remain some quirks in various browsers that you will need to iron out on a regular basis.
2. Personalize Content – It may be required to deliver different type of content depending on the browser type (although it is usually not recommended); whether mobile or otherwise.
3. Illegal Access – Prevent bandwidth hogging bots and poorly programmed clients from downloading your content.

Below is a sample header for my site when using Firefox.

http://www.codediesel.com/
 
GET / HTTP/1.1
Host: www.codediesel.com
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.0.6)
Gecko/2009011913 Firefox/3.0.6 FirePHP/0.2.4
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive

PHP already has a builtin function – get_browser() that lets you determine the capabilities of the user’s browser, but it requires a browscap.ini to be installed, which sadly is not bundled with PHP, and also the function can slow down your php script. The other way to get a user agent is to use php server variables like below,

echo $_SERVER['HTTP_USER_AGENT'];

In this post we will use the Net_UserAgent_Detect Pear package to determine user agents.

Installation

Net_UserAgent_Detect being a Pear package we will use the Pear installer as below. I recommend to always use the Pear installer to download packages rather than downloading it manually as the Pear installer automatically downloads any dependent packages.

pear install Net_UserAgent_Detect-2.5.1

Usage

Usage is quite simple. For example the following code:

<?php
 
require_once 'Net/UserAgent/Detect.php';
 
echo Net_UserAgent_Detect::getUserAgent();
 
?>

will return the following string on Firefox 3.0.6: This can be quite useful if you need to log the users browser or OS type.

Mozilla/5.0 (Windows; U; Windows NT 5.1; 
en-US; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6 FirePHP/0.2.4

getUserAgent() is only one of the many methods available in the class.

<?php
 
require_once 'Net/UserAgent/Detect.php';
 
echo('Browser String: '.Net_UserAgent_Detect::getBrowserString())."<br>";
echo('OS String: '.Net_UserAgent_Detect::getOSString())."<br>";
echo('Javascript: '.Net_UserAgent_Detect::getFeature('javascript'));
 
?>

Some other useful functions to directly test the type of browser are:
isIE()
isNavigator( )
isNetscape( )

So to detect if the user is running Firefox:

$browser = Net_UserAgent_Detect::isNetscape();

Basic Works
Opera Unite works by using a proxy server (operaunite.com) between the opera server and the various clients. This means besides your login credentials it takes zero configuration to connect to the outside world. There have been various attempts before for such collaborative tools, but the seamless integration provided by Unite makes it very easier for people to collaborate and share content with other people.

So what can you do with Unite:
1. You could play interactive games with your friends.
2. Share photos, music and videos with other people, straight off your hard drive.
3. You can work collaboratively with others on documents with your peers.
or create whatever collaborative application you like using the Unite API.

The default Unite services shipped with Opera are as follows:

a. File Sharing
Securely share a file from your personal computer without waiting to upload it. First select the folder from which you would like to share files. Opera Unite then generates a direct URL to that folder. By giving that link to your friends, you can share files without routing through a third-party Web service.

b.Web Server
Run entire Web sites from your local computer with the Opera Unite Web Server. After selecting the folder containing your Web site, you can share and host it from the given Opera Unite URL. Opera Unite will automatically recognize index files and create the Web site as you designed it.

c.Media Player
Rock out wherever you are by accessing your MP3s and playlists from any machine. After selecting the folder containing your playlist, use the Opera Unite direct link to play your tracks directly in any modern Web browser.

d.Photo Sharing
Share your photos direct from your PC, without uploading them online. Once you select your photo folder, the photo-sharing service will create a thumbnail image gallery of your photos. Clicking the thumbnail will present the photo in its original resolution.

e.The Lounge
The Lounge is a self-contained chat service running on your computer. Your friends can access the chat room via the direct link, which will not require them to sign into any service. Depending on your privacy settings, you need only provide the generated password to your service in order for people to log in to your chatroom.

f.Fridge
Post a note on your friends’ virtual refrigerators. By sharing the direct link to your refrigerator, you and your friends, family or colleagues can exchange notes securely and privately in real time.

Security
Unite provides nice and simple security features when sharing your content with the outside world. Naturally there still will be debates on the security implications of Unite; but leaving that aside Opera, by embedding a webserver in the browser, has dared to change more then a decade old model of a web browser.

Now you can create a toolbar for your own blog or site. The source for the toolbar can be downloaded from below after which you can edit the code to suit your site; to help you there is a nice reference for XUL elements here. The idea for the post was inspired by david.

AddType application/x-xpinstall .xpi

But the problem was that my server (godaddy) for some mysterious reasons was not recognizing the above directive. Searching around I found that godaddy has some restrictions on the various htaccess directives (yuck!). After fiddling for some time I finally had to try another solution.

What the Apache ‘AddType’ directive does is that it maps the given filename extension onto the specified MIME content type, so that the browser can understand what it is supposed to do with the content. If we could replicate that in PHP than we are good. A possible solution that worked for me is shown below. You can also use the idea for other MIME types.

<?php
 
 
/* File we want to send to the browser */
$filename = "codediesel.xpi";
 
 
/**
 * The following header is required for browsers that do not
 * recognize the xpi extension. i.e all browsers other than Firefox.
 * This will display the familiar 'save/open' dialog if the xpi
 * extension is not supported.
 */
header("Content-Disposition: filename={$filename}");
 
 
/* Tell the browser that the content that is coming is an xpinstall */
header('Content-type: application/x-xpinstall');
 
 
/* Also send the content length */
header('Content-Length: ' . filesize($filename));
 
 
/* readfile reads the file content and echos it to the output */
readfile($filename);
 
?>

Of course if the filesize is large the readfile function could possibly incur a performance hit. But for small files it works good.

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

In the same way specify IE=5, IE=7, or IE=8 to select one of those compatibility modes. A complete table is given below.

Default Rendering in IE8

So how does IE8 render pages by default. According to the Microsoft documentation, when Internet Explorer 8 encounters a Web page that does not contain an X-UA-Compatible header, it uses the DOCTYPE directive to determine how to display the page. If the directive is missing or does not specify a standards-based document type, Internet Explorer 8 displays the page in IE5 mode (quirks mode).

If the directive specifies a standards-based document type, Internet Explorer 8 displays the page in IE8 mode, except in the following cases:

· Compatibility View is enabled for the page.

· The page is loaded in the Intranet zone and Internet Explorer 8 is configured to pages in the Intranet zone in Compatibility View.

· Internet Explorer 8 is configured to display all Web sites in Compatibility View.

· Internet Explorer 8 is configured to use the Compatibility View List, which specifies a set of Web sites that are always displayed in Compatibility View.

· The Developer Tools are used to override the settings specified in the Web page.

· The Web page encountered a page layout error and Internet Explorer 8 is configured to automatically recover from such errors by reopening the page in Compatibility View.