Web application mode in GNOME 3.2
August 31, 2011 8:15 pm Blogroll, GeneralIf you attended either of my talks at the Desktop Summit or COSCUP (or both! Although I think only the British Citizen Bastien Nocera might have done so, assuming he was sober enough to go to the former) you might remember my somewhat failed attempts at demoing the new web application mode in Epiphany. Although there are still some improvements to do I’ve landed the bulk of the code for the upcoming 3.1.90 release, so I figured it would be useful to give a brief overview of how this thing works for the global audience of the intertubes.
The main idea here, to give a bit of context, is that some of us use a certain number of web pages as if they were applications: we open them the minute we open the browser, keep them open all the time, check on them periodically, etc. Once you figure this out, the next logical step (sort of “independently discovered” by pretty much anyone doing browsers) is: well, if you use them as applications shouldn’t you try to make them a bit more like actual applications? Right. So let’s see how we have done this in GNOME.
Let’s say you are using a certain micro-blogging service with a blue logo and a tendency to break down from time to time. At some point you figure you use this thing so much that you might as well create an app for it. Press Ctrl-Shift-A, or access the File menu and select “Save as Web Application…”:
Now a small dialog pops up. It will present you the icon to be used for the new application and a tentative title, which you can edit. If the page is providing a specific high-resolution icon (usually meant for touch devices like the iPhone) we’ll use that, otherwise we fall back to a screenshot that will hopefully be recognizable enough. There’s lots of smalll improvements to do here, from overlaying the normal favicon on top of the screenshot to allowing the user to select the region to snapshot (or even scrapping the page trying to see if we can find the logo somewhere), but those can come later.
We click “Create”, and the system informs us that the application is ready to be used.
If you click “Launch”, or access the newly created application from the Shell, you’ll get a new browser instance in the so called “application mode”.
Very briefly:
- There’s absolutely no UI chrome other than the title bar.
- The application is sandboxed to a given domain. If you try to go somewhere else, say by clicking a link, the petition will be forwarded to a normal browser instance.
- The existing cookies for the application domain are inherited from the main browser profile (so that you don’t have to login again), but other than that this is a completely fresh profile.
- Finally, this is running in a different process. If you crash your main browser your Twitter app will still be there.
And that’s pretty much it! I have been using this intensively for a while now, and I must say it feels totally natural and, for me at least, it provides a much more convenient way of using the web applications that I’ve come to rely on. I’m eager to get feedback from the early adopters using 3.1.90, and with a bit of luck even patches fixing the low hanging fruit!
Until the next time, happy hacking!
Edit: a bunch of people are asking whether the apps show up in the overview, in the dash, whether they can be pinned, etc. The answer to all of that is: yes. The web apps created through Epiphany behave just like normal apps. You can launch them from the shell, they show up in the dash and you can pin them there as favorites if you want.
August 31st, 2011 at 8:37 pm
wow this looks amazing
very clever
[WORDPRESS HASHCASH] The poster sent us ’0 which is not a hashcash value.
August 31st, 2011 at 8:37 pm
This is super !!!! Waiting for 3.2 for having web apps in my GNOME desktop
[WORDPRESS HASHCASH] The poster sent us ’0 which is not a hashcash value.
August 31st, 2011 at 9:26 pm
Very cool. I presume these web shortcuts appear in the Activities app grid like normal apps and also be pinned to the dock?
[WORDPRESS HASHCASH] The poster sent us ’0 which is not a hashcash value.
August 31st, 2011 at 9:42 pm
Awesome work!
This post reminded me of this paper about compact visual representations for websites, it might be interesting:
“Visual snippets: summarizing web pages for search and revisitation” – J. Teevan et al.
http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.153.4941&rep=rep1&type=pdf
[WORDPRESS HASHCASH] The poster sent us ’0 which is not a hashcash value.
August 31st, 2011 at 9:47 pm
How does shell handle these launchers?
Can I pin this as a favorite in the sidebar?
And can I somehow save the “web application” as a launcher that will show up in the applications search even if I haven’t pinned it as a favorite?
-jef
[WORDPRESS HASHCASH] The poster sent us ’0 which is not a hashcash value.
August 31st, 2011 at 10:15 pm
First off, i love this!
But a little suggestion (of course i had to “but” you right?
I really think it’s very cool you take advantage of the bigger Apple Icons (which i desperately miss in Chrome), but it’s just not common enough for sites to use them, so if you use a lot of Webapps you’ll most likely end up with a lot of Screenshots. Why not use the Google CLI in the background to suggest several Icons for the User to pick from? Just issue a Google Image Search with the domain name, append “icon” to the search string and fetch the first 5 results? Chances you’re gonna end up with an Icon that is at least better than the usual fav.ico are pretty high!
Thanks for the great work!
[WORDPRESS HASHCASH] The poster sent us ’0 which is not a hashcash value.
August 31st, 2011 at 10:38 pm
Looking good- a lot better than I expected it to come out, that’s for sure. It works logically and cleanly from what I can see. It will be nice to have a favicon/mobile icon instead of a thumbnail in the future, but for now this is still very nice. It’ll be great for the very desktopish websites I use, like Grooveshark, YouTube, GMail, etc.
I wonder if this will win out over pinned tabs, for me. I need to catch up a bit on Epiphany development and the roadmap for 3.2, as I’m sure this isn’t the only feature coming to Epiphany. I’m very excited to switch to it full time if possible.
[WORDPRESS HASHCASH] The poster sent us ’0 which is not a hashcash value.
August 31st, 2011 at 10:43 pm
Now, this is really cool! Great work!
[WORDPRESS HASHCASH] The poster sent us ’0 which is not a hashcash value.
August 31st, 2011 at 11:18 pm
This. Is. Awesome.
[WORDPRESS HASHCASH] The poster sent us ’0 which is not a hashcash value.
August 31st, 2011 at 11:24 pm
Any way/place to show the http/https status?
[WORDPRESS HASHCASH] The poster sent us ’0 which is not a hashcash value.
September 1st, 2011 at 12:21 am
All the more reason to love Epiphany
!
[WORDPRESS HASHCASH] The poster sent us ’0 which is not a hashcash value.
September 1st, 2011 at 1:14 am
Really looking forward trying this in action!
Found a list of apps that supports big-ass website icons here: http://twitter.com/#!/appletouchicon
[WORDPRESS HASHCASH] The poster sent us ’0 which is not a hashcash value.
September 1st, 2011 at 1:30 am
Looks very slick. Running as a separate process and limiting the cookies available to the app may be a privacy benefit that’s not available with pinned tabs.
The wording “save as web application” sounds wrong, though. Maybe “Bookmark as Web application”?
[WORDPRESS HASHCASH] The poster sent us ’0 which is not a hashcash value.
September 1st, 2011 at 2:22 am
[...] original post here: Iocane powder » Blog Archive » Web application mode in GNOME 3.2 This entry was posted in Uncategorized and tagged blue-logo, break-down, from-time, gnome, [...]
September 1st, 2011 at 2:27 am
You just made me want to move to 3.1.90 as soon as possible.
[WORDPRESS HASHCASH] The poster sent us ’0 which is not a hashcash value.
September 1st, 2011 at 2:38 am
Great idea! Now, it would be perfect if, in this mode, web apps could be allowed to override keyboard shortcuts that area already used in the web browser (https://bugzilla.gnome.org/show_bug.cgi?id=657889).
[WORDPRESS HASHCASH] The poster sent us ’0 which is not a hashcash value.
September 1st, 2011 at 3:02 am
This is frickin’ awesome! Cooler than cool! Go, Epiphany! =D
[WORDPRESS HASHCASH] The poster sent us ’0 which is not a hashcash value.
September 1st, 2011 at 5:52 am
I really like that Gnome are trying to move the Linux desktop forwards. This is the way to go!
I also find it interesting that Google et. al. are trying to put all your computer usage inside a browser, while you’re trying to take the web out of it
[WORDPRESS HASHCASH] The poster sent us ’0 which is not a hashcash value.
September 1st, 2011 at 6:51 am
Wow, this is totally awesome! As a long-time Epiphany user I’m glad to see this feature (and the nice integration with the GNOME desktop) which will hopefully help Epiphany gain some traction vs. other brothers.
[WORDPRESS HASHCASH] The poster sent us ’0 which is not a hashcash value.
September 1st, 2011 at 7:30 am
Well done! When you say it uses a fresh profile, does that also mean that it doesn’t share the file cache? It would be great if it can still share the cache for best performance.
[WORDPRESS HASHCASH] The poster sent us ’0 which is not a hashcash value.
September 1st, 2011 at 8:15 am
@Luca: not at the moment no, but we should somehow.
@Wolff: an http cache is used for each web app, but not the one from the main profile. So it will have to be repopulated, but once that’s done the performance should be exactly the same.
[WORDPRESS HASHCASH] The poster sent us ’0 which is not a hashcash value.
September 1st, 2011 at 9:22 am
In Gnome Shell’s overview you can drag a window into the dash and the window’s application will be added to the dash. For Epiphany it would be cool if the open web application was added. Or a bubble would pop up and the user could choose either the browser itself or the running web app to add.
[WORDPRESS HASHCASH] The poster sent us ’0 which is not a hashcash value.
September 1st, 2011 at 9:23 am
Some deeper integration may be really cool.
Epi-webapps can also integrate menus and webpage actions (like ‘Post new tweet’). Some XML (for menus) and JS (for call actions) can do the work, may be DnD directly, etc… With gobject-introspection and JS it can be possible, GNOME (or the user) can provide some ‘add-on’ (xml+js) to webapp depending on the domain.
Great work
[WORDPRESS HASHCASH] The poster sent us ’0 which is not a hashcash value.
September 1st, 2011 at 9:45 am
Does the domain restriction restrict the “app” to the same FQDN or just the same second-level domain?
[WORDPRESS HASHCASH] The poster sent us ’0 which is not a hashcash value.
September 1st, 2011 at 10:02 am
[...] | locane powder L'aplicació al llançador L'aplicació al canviador [...]
September 1st, 2011 at 11:02 am
[...] Info and screenshots via Iocane powder [...]
September 1st, 2011 at 11:36 am
@Nick: we use the FQDN, since in some cases there’s multiple web apps for a given second-level domain (think *.google.com).
[WORDPRESS HASHCASH] The poster sent us ’0 which is not a hashcash value.
September 1st, 2011 at 12:00 pm
My suggestions:
Let the screenshot icons have rounded corners with the same radius as the selectors in overview mode or the task switcher.
And the vertical alignment of the text entry widget in the dialog looks out of place. And maybe add more spacing between the icon and the text entry field.
[WORDPRESS HASHCASH] The poster sent us ’0 which is not a hashcash value.
September 1st, 2011 at 12:39 pm
1) Why do you display only the top left corner of the application in the overview? it should display the whole page, so it’ll feel just like a real application.
2) Although it’s really cool, I’m not going to give up Firefox just because of this feature
[WORDPRESS HASHCASH] The poster sent us ’0 which is not a hashcash value.
September 1st, 2011 at 12:49 pm
[...] grafica, dal web trapelano alcune indiscrezioni davvero interessanti; a quanto pare Gnome 3.2 supporterà le applicazioni web. La notizia, arriva direttamente dal blog di Xan, noto sviluppatore [...]
September 1st, 2011 at 12:50 pm
[...] l’interfaccia grafica, dal web trapelano alcune indiscrezioni davvero interessanti; a quanto pare Gnome 3.2 supporterà le applicazioni web. La notizia, arriva direttamente dal blog di Xan, noto sviluppatore [...]
September 1st, 2011 at 1:32 pm
[...] l’interfaccia grafica, dal web trapelano alcune indiscrezioni davvero interessanti; a quanto pare Gnome 3.2 supporterà le applicazioni web. La notizia, arriva direttamente dal blog di Xan, noto sviluppatore [...]
September 1st, 2011 at 1:47 pm
Next stop: gnome-webapp-store ?
[WORDPRESS HASHCASH] The poster sent us ’0 which is not a hashcash value.
September 1st, 2011 at 4:39 pm
[...] Icon an, wird dieses genutzt, sonst wird ein Screenshot der Website verwendet. Lopez hat in einem Blog die neue Funktion [...]
September 1st, 2011 at 7:23 pm
This is really cool! Thanks a lot.
elad: the neat thing is you don’t have to give up Firefox – I’m running Firefox as my browser and using Epiphany’s webapp mode to access my mytinytodo task list. Works great, only burns an extra 50MB of RAM or so. (yes, that’s ridiculous for a todo list, but I have 16GB, what the hell do I care). This is a really slick implementation too – I can treat it just like an app as far as Shell is concerned. very very cool, thanks xan!
[WORDPRESS HASHCASH] The poster sent us ’0 which is not a hashcash value.
September 1st, 2011 at 11:10 pm
[...] Icon an, wird dieses genutzt, sonst wird ein Screenshot der Website verwendet. Lopez hat in einem Blog die neue Funktion [...]
September 1st, 2011 at 11:21 pm
[...] Возможность интеграции часто используемых сайтов на рабочий стол. Сайт может быть добавлен под видом web-приложения и затем вызван тем же методом, что вызываются обычные программы. Для сохранения web-приложений в Epiphany добавлен пункт сохранения страницы как web-приложения («Save as Web Application»). Например, можно сохранить Twitter или Facebook как web-приложение и в дальнейшем вызывать его через стандартное меню, при этом сайт будет открываться в окне без элементом управления с использованием отдельного браузерного процесса; [...]
September 2nd, 2011 at 12:23 am
There is Mozilla’s Prism that does exactly the same. I’m pleased to see you’ve implemented the idea too!
[WORDPRESS HASHCASH] The poster sent us ’0 which is not a hashcash value.
September 2nd, 2011 at 2:58 am
[...] Возможность интеграции часто используемых сайтов на рабочий стол. Сайт может быть добавлен под видом web-приложения и затем вызван тем же методом, что вызываются обычные программы. Для сохранения web-приложений в Epiphany добавлен пункт сохранения страницы как web-приложения («Save as Web Application»). Например, можно сохранить Twitter или Facebook как web-приложение и в дальнейшем вызывать его через стандартное меню, при этом сайт будет открываться в окне без элементом управления с использованием отдельного браузерного процесса; [...]
September 2nd, 2011 at 4:39 am
There is a firefox extension doing exactly the same.
It’s called WebRunner. (predecessor of prism)
I love it very much
[WORDPRESS HASHCASH] The poster sent us ’0 which is not a hashcash value.
September 2nd, 2011 at 5:36 am
[...] Возможность интеграции часто используемых сайтов на рабочий стол. Сайт может быть добавлен под видом web-приложения и затем вызван тем же методом, что вызываются обычные программы. Для сохранения web-приложений в Epiphany добавлен пункт сохранения страницы как web-приложения («Save as Web Application»). Например, можно сохранить Twitter или Facebook как web-приложение и в дальнейшем вызывать его через стандартное меню, при этом сайт будет открываться в окне без элементом управления с использованием отдельного браузерного процесса; [...]
September 2nd, 2011 at 9:42 am
[...] More information on this feature, along with credit for the images used above, can be found @ blogs.gnome.org [...]
September 2nd, 2011 at 10:17 am
Yes, it’s a good feature, but the web application can not notify nothing.
In the Twitter example, the application can not notify new tweets, a feature very important.
A big lack…
[WORDPRESS HASHCASH] The poster sent us ’0 which is not a hashcash value.
September 2nd, 2011 at 10:19 am
@44: they actually can, using the new HTML5 notification system. We’ll support that really soon, perhaps in time for GNOME 3.2 too.
[WORDPRESS HASHCASH] The poster sent us ’0 which is not a hashcash value.
September 2nd, 2011 at 10:25 am
[...] More information on this feature, along with credit for the images used above, can be found @ blogs.gnome.org [...]
September 2nd, 2011 at 12:29 pm
Can it use the favicon of the website rather than a screenshot? Excellent work!
[WORDPRESS HASHCASH] The poster sent us ’0 which is not a hashcash value.
September 2nd, 2011 at 7:40 pm
[...] More information on this feature, along with credit for the images used above, can be found @ blogs.gnome.org [...]
September 2nd, 2011 at 10:10 pm
Excellent work, thanks
[WORDPRESS HASHCASH] The poster sent us ’0 which is not a hashcash value.
September 3rd, 2011 at 1:30 am
[...] GNOME.org saiba [...]
September 4th, 2011 at 2:10 pm
[...] Info and screenshots via Iocane powder [...]
September 5th, 2011 at 1:50 am
http://www.chromeoslounge.com/general-chrome-os/3063-chrome-os-merge-android-picture-revealed-2.html#post17877
[WORDPRESS HASHCASH] The poster sent us ’0 which is not a hashcash value.
September 5th, 2011 at 1:52 am
My point: Chrome 15 already has this functionality (and yes, it does open in standalone “application mode”-like windows)…
[WORDPRESS HASHCASH] The poster sent us ’0 which is not a hashcash value.
September 5th, 2011 at 9:42 am
@Kenny: I don’t think I’ve said Epiphany was the only browser doing (something more or less similar to) this. In fact pretty much the opposite.
[WORDPRESS HASHCASH] The poster sent us ’0 which is not a hashcash value.
September 5th, 2011 at 10:46 am
Xan, I have two question about this:
- Can web applications trigger desktop notifications?
- Can web applications catch clicks? E.g. if I click a link to a sandboxed domain from Epiphany, will it open in Epiphany or in its own web-app window?
[WORDPRESS HASHCASH] The poster sent us ’0 which is not a hashcash value.
September 6th, 2011 at 7:19 am
[...] Il tutto, ovviamente, tramite il browser predefinito dell’ambiente desktop, Epiphany, e la combinazione di tasti CTRL+SHIFT+A. Dopo aver salvato una web app, sarà possibile ritrovarla sul proprio desktop con un’icona identificativa, integrata con Shell e visualizzabile sempre tramite Epiphany (senza interfaccia utente). La nuova funzionalità diventerà parte integrante del desktop a partire della release GNOME 3.2. Maggiori informazioni sono disponibili su questa pagina. [...]
September 6th, 2011 at 1:22 pm
Great! It took you only 15 years after Windows 95 to implement this feature. It was called Active Desktop.
Anyway, nice to see it.
[WORDPRESS HASHCASH] The poster sent us ’0 which is not a hashcash value.
September 6th, 2011 at 1:45 pm
@David:
Notifications are being worked on. Not sure if it will make it for 3.2, but surely for 3.4.
About the main instance detecting navigations to domains that have a web app, no, that does not happen. It wouldn’t be too difficult to do, but i’m not sure if it’s a good idea.
[WORDPRESS HASHCASH] The poster sent us ’0 which is not a hashcash value.
September 10th, 2011 at 12:29 pm
This is a really great feature. Tabs are just a poor way to manage your applications. The desktop should be able to handle it. The big problem is that web as a concept are quite abstract.
Two comments.
Short term:
Isn’t ‘web apps’ just a better concept for bookmarks for some websites? You could make the feature more discoverable if the feature was integrated in bookmark dialog. In a users mind I think they are related abstractions.
Long term:
. But what about a meta tag (or link if some description is needed, like an icon) similar to the link rss tag to make the feature auto detected by websites, and show whatever button a browser prefers.
I know epiphany doesn’t have much clout with web developers, webkit does though
[WORDPRESS HASHCASH] The poster sent us ’0 which is not a hashcash value.
September 10th, 2011 at 12:30 pm
Web _apps_ is abstract.. not just web
[WORDPRESS HASHCASH] The poster sent us ’0 which is not a hashcash value.
September 12th, 2011 at 2:13 pm
Yes, Chrome does this. Would like to see what can be done with integration into the desktop, like using webmail as primary email client, perhaps even self-hosted web apps
[WORDPRESS HASHCASH] The poster sent us ’0 which is not a hashcash value.
September 15th, 2011 at 10:02 am
great
[WORDPRESS HASHCASH] The poster sent us ’0 which is not a hashcash value.