Thank You Google! Thank You Apple!

A bookmarklet is a special bookmark in your browser whose URL field contains JavaScript code and not a URL. When you click on this “bookmark” the JavaScript code will run. It’s that simple. Quite a few web applications use bookmarklets to extend their functionalities. Bookmark Ninja also uses bookmarklet to invoke the “Add Bookmark” dialog when you want to bookmark the actual page in your browser. The installation is pretty easy in desktop browsers, you just drag and drop the bookmarklet “button” from the website to the bookmark bar of your browser.

Bookmarklets in mobile browsers

Unfortunately in mobile browsers the installation of a bookmarklet is not that simple, you can’t drag and drop it. You have to create a dummy bookmark then have to replace the content of its URL field with the JavaScript code with a copy/paste. This is an accepted solution, this installation process is recommended by the big web sites, too.

Last year I started to implement the “Add Bookmark” feature for the mobile browsers using a bookmarklet, the same way as in the desktop browsers, but soon ran into 2 issues.

Issue with mobile Safari on iPhone

If you tapped on the “Add to Ninja” bookmarklet the “Add Bookmark” window opened behind the active browser window. I tried everything, there was no way to bring it to the front. I spent a lot of time with trying to understand why it works this way then finally found a weird workaround: if I added a 1.1 second delay before opening the window, then it came to the front. Adding a 1.0 second delay didn’t work, only 1.1 seconds or higher. This seemed to be a kind of a timing issue in Safari.

Issue with mobile Chrome

After you created the bookmarklet with the above described copy/paste method, the bookmarklet was not accessible anymore, it disappeared from the browser’s favorites list. This meant that you couldn’t invoke the “Add Bookmark” window by tapping on the bookmarklet. I searched the net and it turned out that that this is “as designed”. In mobile Chrome you have to run a bookmarklet in a different way: start typing its name in the browser’s address field, suggestions of bookmarks/bookmarklets will popup, then tap on the bookmarklet you want to run.

This really sucks

Let’s see what we have on mobile devices:

  1. The installation of the bookmarklet is not a simple drag and drop as on desktop (you have to manually copy/paste the JavaScript code)
  2. In Safari you have to wait for the “Add Bookmark” window more than 1 second after you tapped on the bookmarklet
  3. In Chrome you have to start typing the name of the bookmarklet (“Add to Ninja”) to access and to tap on the bookmarklet

I think #1 (the bookmarklet installation) is kind of acceptable, you have to do it only once. But #2 and #3 can definitely lead to bad user experience. The whole thing sucks especially if you consider that Safari and Chrome are the 2 most used browsers on mobile devices. Finally I decided not to release the bookmarklet version of the “Add Bookmark” feature on mobile, rather I implemented the “email sending” version: in the mobile browser you tap on share, then email the website to a dedicated email address to add the link to Bookmark Ninja. But this lacks the possibility to set the category and to add tags. But at least it works decently.

One year later

A year later I decided to develop native mobile apps to get around the mobile browser bookmarklet problems. I already wrote about my adventure with Swift and Xcode, this was not a successful attempt, either. Then I started to think about how I could get the maximum out from the mobile bookmarklet mess. And then came the pleasant surprise: a year later both the Safari and Chrome issues were fixed, everything worked as expected! Wow!

Last week the mobile bookmarklet support in Bookmark Ninja went live. I’m happy that finally the bookmarklet version has been implemented over the native mobile app, because the former one is much easier to maintain and it also runs faster than a mobile share extension app.

Thank you Google and Apple for the fixes!

Advertisements

12 comments

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s