Using and clearing the Browser Appcache

I’m currently experimenting with the HTML 5 App Cache. It’s important to know that the HTML5 appcache is different from the normal browser cache. Basically you link a manifest appcache file in your html which has instructions on which files the browser should cache and which it should always load new.

<html manifest="cache.appcache">
    Your site goes here.
</html>

Example contents of a cache manifest:

CACHE MANIFEST

# These files will be explicitly cached
CACHE:
index.html
css/styles.min.css
js/scripts.min.js
img/logo.svg

# All other files require the user to be online
NETWORK:
*

In my recent experience the cache works very well, sometimes even too well. It will delete and cache all files new which are otherwise explicitly cached if you change anything in the cache manifest file. You could for example add a timestamp. But this seems to not always work or be at least a little dogged. So if you want to delete the appcache of Chrome for example manually you can do this by going to

chrome://appcache-internals/

and just delete what you don’t need anymore. It’s also just interesting to have a look at what you already gathered while surfing around the web.

In Safari it’s not that easy, but you can find an explanation on stackoverflow.

To have a look at your caches in Firefox you can go to

about:cache?device=offline

But you don’t have the option to delete them there. For that you have can go to Preferences -> Advanced -> Network. Here you find „Offline Web Content and User Data“.

Go ahead and experiment with the HTML5 app cache. It’s pretty cool especially for mobile web apps.

A Follow Up On The Minimal-UI Viewport Meta Tag

My post on the new viewport meta tag minimal-ui was quite popular, but equally controversial. Some love the addition by Apple and some expressed their concerns regarding the users experience.

I for one was pretty excited about minimal-ui at first but after some thinking about it I have to say it might not be the best choice for the average site. And here is why.

It just confuses the user who has no idea what is happening to him and his browser. There is no hint on how you get back the browser ui and if we are honest, you don’t gain that much either. Just a little bit more screen real estate, which – by the way – you’re getting anyway if you start to scroll. But then it’s the known behaviour and you’re initiating it by yourself. That’s much better.

Nevertheless I think minimal-ui can be a used if you’re building a web app and there might be some other edge cases in which it might make sense.

In my opinion this option should be on the client side. It would be a perfect setting for mobile Safari. So the user could switch to minimal-ui-mode on purpose.

Another code-related problem is that Chrome is showing a Javascript error if you use minimal-ui. That doesn’t alter your sites behaviour but is by all means not a nice thing and does actually bother me a lot. And I’m probably not the only dev who thinks that way.

The key "minimal-ui" is not recognized and ignored. 

But the Chrome team is already on that one. Chrome Canary isn’t showing the error any more.

So before blindly adding minimal-ui to you site think about what you gain and what you might lose. Worst case: Your users.

Viewport Meta Tag: Minimal-UI

With the introduction of iOS 7.1 Safari understands a new viewport meta tag which automatically reduces the mobile Safari ui to a minimum. I think it’s a great addition and hope other browsers will support it in the future, too.

<meta name="viewport" content="width=device-width, minimal-ui">

Here is my blog before and after adding minimal-ui:

minimal-ui-example

Hint: As a user you can get the menu bar back by tapping on the url.

Update: I wrote a follow up post explaining why minimal-ui might not be such a good idea.

Web Inspector for iOS 6 Safari

I just installed the iOS6 Developer Beta and found this little gem for Web Developers:

This means that you can connect your Mac Safari to your iOS Safari and use the Developer Tools on your Mac to inspected the Website shown on your iOS device. This will help very much with developing responsive Designs. Love it!

A story about an iPad browser that never was

Sean Sperte:

It turns out that building a browser is curse-word hard, even if you don’t have to worry about the rendering of web pages. At the time, though, we didn’t know this. Well, maybe the other two thirds of our little company did. But they were brave enough to follow me and my naivety into battle anyway

Sean Sperte blickt auf 14 Monate Entwicklung eines iPad Browser zurück, der am Ende doch nie fertig gestellt wurde. Eine etwas traurige Geschichte.

Kindle Cloud Reader

Wupps. Kindle Cloud Reader ist eine Web App mit der man auf die eigenen Kindle eBooks zugreifen und sie lesen kann. Funktioniert in Safari und Chrome am Mac und PC, sowie auch auf dem iPad. Man kann sogar Bücher downloaden und lokal speichern um sie auch ohne Internetverbindung lesen zu können.

Besitzt man allerdings ein iPad sehe ich keinen Grund diese Web App zu nutzen. Lesen in der Kindle App funktioniert bestens, auch wenn man nicht mehr von dort aus in den Kindle Store kommt. Den kann man auch ganz gut einfach so im Browser aufrufen. Und eine Web App in diesem Stil fühlt sich für mich am Desktop einfach falsch an.

Amazon sollte lieber mal Zeit und Energie in den Ausbau des „Kindle Social Networks“ investieren. Oder aber das ist ein Anfang und findet eine Integration in eben diesem.

Wie auch immer, Kindle Cloud Reader sieht soweit ich das am MacBook gerade einschätzen kann, gut aus. iPad liegt leider zu Hause.

Wie der Vollbildmodus im Browser eigentlich sein sollte

Henrik Eneroth:

Modern brow­sers will throw a num­ber of things at you to keep in the left hand side of the brow­ser win­dow: history bars, book­mark bars and most recently the rea­ding list in Safari in Lion, but maybe the space would be put to bet­ter use as a tab area. Book­mark bars and what­not are far less com­monly used than tabs. I rea­lize that this is not a new idea, but for some rea­son it doesn’t seem to have caught on.

Die Idee ist, wie Henrik schon selbst sagt, nicht ganz neu und dennoch wurde sie bisher nie wirklich richtig umgesetzt. Entweder es liegt daran, dass es nicht praktikabel ist oder aber es wurde noch nie richtig angegangen. Oder dritte Möglichkeit: Es gab keinen Grunde dafür. Der Einsatz dieses Konzepts im Vollbildmodus vor allem an großen Bildschirmen leuchtet mir aber mehr als ein.
Ich finde die Gedanken sehr gut und hätte wahnsinnig Lust einen solchen Vollbildmodus im Alltag zu nutzen und zu testen. Unbedingt lesen!

via The Brooks Review

YouTube5 Version 2 Safari Extension

Vertical Forest:

A custom designed HTML5 player to replace the usable, but very limited built-in player. Support for Vimeo and Facebook video. The ability to switch video resolutions within the player, without having to access Safari’s preferences. Support for downloading videos from YouTube and Facebook. A fully functional volume control, rather than just a mute button. Support for displaying the video’s title, author, and source, in a video overlay, along with a link back to the video’s page on YouTube, Vimeo, etc.

Ich bin noch immer mit Safari unterwegs und mittlerweile gefällt mir der Browser richtig gut. Gerade habe ich eine sehr coole Extension entdeckt, die gerade in Version 2 geht und YouTube-, Vimeo- und Facebookvideos durch einen sehr schicken und super funktionalen HTML5 Player ersetzt. Funktioniert bestens und schont meinen MacBook-Lüfter.

Aus der Safari Adresszeile bei Google suchen

Ich teste gerade mal wie es sich mit Safari lebt. Installierte schon die ein oder andere Extension, was mir aber wirklich noch fehlte, ist die Möglichkeit direkt aus der Adresszeile mit Google zu suchen oder sogar eigene Suchkürzel einzurichten. Es gibt Extensions, die das machen, allerdings funktioniert irgendwie (noch) keine mit Safari 5.1 unter Lion. Ich habe jetzt die Omnibar gefunden, die immerhin das Suchen bei Google ermöglicht, was schonmal sehr gut ist. Bei Wikipedia oder so könnte ich eigentlich auch mit Alfred suchen.

Flickrlicious aus der visuelleGedanken.de-Gruppe

Nachdem ich heute den ganzen Tag mit Schauen von Lost und dem Entdecken des iPads verbracht habe, möchte ich euch gerne noch ein paar schöne Fotos aus der visuelleGedanken.de-Flickr-Gruppe zeigen.
Heute mal in etwas anderer visueller Form (jedenfalls für diejenigen unter euch mit aktuellen Browsern). Viel Spaß!

Marienkäfer

Buchenwald im Gegenlicht

Eva

at the sunset road

dream in green

caro_1

nice leaf venation

day one hundred twenty-five

May.

Far far away

〜 s e c r e t 〜

Elbtal

#19

Bockig

leichte Brise