If 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.
wow this looks amazing 😀
very clever
[WORDPRESS HASHCASH] The poster sent us ‘0 which is not a hashcash value.
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.
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.
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.
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.
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.
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.
Now, this is really cool! Great work!
[WORDPRESS HASHCASH] The poster sent us ‘0 which is not a hashcash value.
This. Is. Awesome.
[WORDPRESS HASHCASH] The poster sent us ‘0 which is not a hashcash value.
Any way/place to show the http/https status?
[WORDPRESS HASHCASH] The poster sent us ‘0 which is not a hashcash value.
All the more reason to love Epiphany :D!
[WORDPRESS HASHCASH] The poster sent us ‘0 which is not a hashcash value.
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.
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.
Pingback: Iocane powder » Blog Archive » Web application mode in GNOME 3.2 | Linux Blog
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.
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.
This is frickin’ awesome! Cooler than cool! Go, Epiphany! =D
[WORDPRESS HASHCASH] The poster sent us ‘0 which is not a hashcash value.
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.
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.
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.
@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.
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.
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.
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.
Pingback: Epiphany introdueix el mode d’aplicació | GNULinux.cat
Pingback: My Bookmarks » GNOME 3.2 To Get Web Application Mode
@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.
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.
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.
Pingback: Gnome 3.2 supporterà le applicazioni web | Tuttolinux - novità ed articoli dal mondo del pinguino !
Pingback: Gnome 3.2 supporterà le applicazioni web | News Blog di Caelan
Pingback: Gnome 3.2 supporterà le applicazioni web | CorryL's Blog
Next stop: gnome-webapp-store ? 🙂
[WORDPRESS HASHCASH] The poster sent us ‘0 which is not a hashcash value.
Pingback: Webseiten als Applikationen nutzen » it-express
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.
Pingback: Gnome 3.2: Webseiten als Applikationen nutzen « com-Nachrichten.de
Pingback: GNOME 3.2 перешел на стадию бета-тестирования | AllUNIX.ru – Всероссийский портал о UNIX-системах
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.
Pingback: GNOME 3.2 перешел на стадию бета-тестирования
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.
Pingback: GNOME 3.2 перешел на стадию бета-тестирования | Linux News
Pingback: GNOME 3 Adding ‘Web App’ Mode | OMG! Ubuntu!
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.
@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.
Pingback: My Bookmarks » GNOME 3 Adding ‘Web App’ Mode
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.
Pingback: GNOME 3 Adding ‘Web App’ Mode « Ubuntu Tutorials « 123linux tutorials
Excellent work, thanks
[WORDPRESS HASHCASH] The poster sent us ‘0 which is not a hashcash value.
Pingback: Gnome 3 acrescenta modo Webapp. Entenda » Amplanet - Mais internet pra você
Pingback: [dot]EXE » GNOME 3.2 To Get Web Application Mode