Making Desktop Webapps in Lion

“By the sainted mustache of Charles Foster Kane! Is it ever hot out there! I should write an app that keeps my city’s Current Weather data from Weather Underground within easy view at all times!”

“Holy rosemary vinaigrette! Today promises to be a huge day of news for Apple! I need to keep an eye on the news from Macworld.com all day today! But there’s no such app for that particular function, dagnabbit!”

“Jumping prophets of Newton Lower Falls! I’m getting far too much work done today! If I don’t find a way to distract myself, I’ll set unreasonably-high expectations of how much work I’ll be expected to accomplish on a Friday! If only there was a way to keep the Adorable Baby Polar Bears Live Webcam on my screen at all times!”

If you’re running Snow Leopard, you’re doomed to a dull life of unmet expectations. At best, you’re at the mercy of third-party developers and their infernal expectation to actually be paid for the apps they write.

In Lion? It’s DIY all the way. Automator — that singularly-awesome utility and infrastructure for automating damned-near any task — has a new feature that allows you to open any webpage inside a popup window. It’s so easy to use and it’s so goddamned useful that I’m amazed it’s not being promoted.

Here’s the incredibly complicated procedure for building an app that keeps a webpage open in a floating window:

1) Launch Automator.

2) Create a new App. (Or a Workflow. But an App will be cooler because you can have it in the Launchpad and start it up with a single click.)

3) Find and drag the “Get Specified URLs” action into your workflow. Just type the name into the search box until Automator finds it for you.

4) Paste in the URL of the site you want to view.

5) Find and drag the “Website Popup” action into the workflow. Choose a size for the window.

6) Save. Done.

Your workflow will look like this:

And when you run the app, it’ll put up a popup window that looks like this:

It’s a real app. It’ll stick around and float above your other windows until you dismiss it. You can move it into other Spaces and do pretty much whatever you want with it.

Did you notice the Really Clever Thing the “Website Popup” does? You can specify the size of the popup window and you can also choose how the app will identify itself to the website. In this example, the “User Agent” has been set to “iPhone.” Which means that Macworld.com thought this app was an iPhone web browser, and it automatically delivered the compact edition of the site.

It’s a little like the “Web Clippings” feature of Dashboard. Except this isn’t Dashboard, so there’s actually a chance in hell that you’ll ever use this thing.

The less-snarky thing to say is that this tool integrates into your mainstream Mac workspace far better, and its definable User Agent setting means that you can get it to work with the far more useful mobile editions of your most useful sites. It’s particularly keen for webcams. A friend recently set up a webcam for his pet birds. As a Dashboard Web Clipping, I’d have to carefully adjust the clip size and then I’d have to be in Dashboard to actually use it. I also couldn’t share this with other people. As an Automator app, it’s two quick steps, it runs alongside my other apps, and any time my friend wants to share the webcam with someone, he can just email them the app.

I think the Automator team at Apple has two mandates. The first one, of course, is to give every Mac user more power and control over how they do things, to save everybody time, and to restore the sort of volksprogramming experience that the Mac community lost when Apple terminated HyperCard.

But the self-appointed mandate is to keep emphasizing the truly cool things that you can do with this utility. With each new OS release, there comes at least one new Automator action that I play with for a while and then think “I can’t believe I built something that does this in that little amount of time!

Edited:

“Is it possible to ask the user for a URL first?” asks @Thomas. That’s a nifty idea: instead of locking the app to just open Macworld.com, you could make a general-purpose “Open this URL as an iPhone webapp” utility.

And yes, of course, it’s easy-peasy. Instead of hard-coding the URL into the “Get Specified URLs” action, just add an action that asks for text input from the user and then feed that into an action that extracts a URL from any given text. That’ll dump the URL into the next function and Bob’s yer uncle. Viz:

The app will present the user with a standard dialog and then it’ll open the URL.

It’s yet another testament to how deep Automator goes. You rarely get tripped up by the problem “All of the basic functions are there but alas, there’s one critical element missing so no, you can’t do that.” And later on, it’s always easy to adapt or extend a workflow to accommodate a new idea or a change in needs.

Edited again:

A Trusted Advisor on Automator informs me of a cool Automator shortcut: if you drag a URL proxy (from your browser’s address bar) into the editing window Automator automatically builds you a “Get Specified URLs” action, using that URL.

97 replies
« Older Comments
  1. Christopher
    Christopher says:

    Andy: Great post been a reader since back when I used a Mac 128k. Quick question: where did the reference to Newton Lower Falls come from? Believe it or not, I actually live in the lovely hamlet of Newton Lower Falls!

  2. Sel
    Sel says:

    So how would you do this same idea but make it to where it does not float above all other windows?

  3. Jan-Hinrich Fehlis
    Jan-Hinrich Fehlis says:

    Nice idea! Small app files compared with fluid… but some sites I like to use as an Webapp do not work well. E.g. I cannot upload files.
    Also the float above all and no way to minimize the window makes it impossible to work with these “Webapps”. Bummer!

  4. Phil Lee
    Phil Lee says:

    I tried this for the first time last night. I thought it would be fun to setup a GMail iPad app. It worked fine but failed at the last hurdle in that I couldn’t scroll. Anyone have any ideas how to scroll iPad panels in an Automator app?

  5. Allan
    Allan says:

    Awesome, but this doesn’t really play all that well with Spaces; you can pin the app to space, but if you’re in another space and launch the app, despite having the “switch to space with open windows” enabled, you have to manually switch.

  6. Dosi
    Dosi says:

    Once I originally commented I clicked the -Notify me when new feedback are added- checkbox and now each time a remark is added I get four emails with the identical comment. Is there any manner you may remove me from that service? Thanks!

  7. Chris
    Chris says:

    Great idea – works well for some web based reports I access, but how can I make it reload the page periodically to refresh the report contents? I can’t see a way to manually refresh it within the window either :S

  8. kurpaige
    kurpaige says:

    Don’t work for google+, it told me my browser was not supported that i should download the newer version of Safari

  9. KFlick
    KFlick says:

    How do you delete an application created with automator? When I try to delete it, it tells me that the application is in use. This happens even when I close automator and the app.

  10. Steve
    Steve says:

    Two questions:
    – spinning cog appears on top bar, any way to not have that happen, it’s annoying to watch it spin
    – any way to have it not float above all windows as it does now?

    Thanks!

Trackbacks & Pingbacks

  1. […] I have read this article about Making Desktop Webapps in Lion my first thought was “cool!” instantly followed by “what about an experiment with […]

  2. […] Making Desktop Webapps in Lion […]

  3. […] Andy Ihnatko legt precies uit hoe je dit moet aanpakken: ~ Making Desktop Webapps in Lion […]

  4. […] Making Desktop Webapps in Lion – Andy Ihnatko’s Celestial Waste of Bandwidth (BETA)Tips to get basic native Fluid-like functionality in Lion. Pretty neat. > Making Desktop Webapps in Lion […]

  5. […] Making Desktop Webapps in Lion Andy Ihnatko’s Celestial Waste of Bandwidth (BETA) – Fluid is another great tool for this. […]

  6. […] Andi Inhatko menuliskan sebuah tutorial yang memungkinkan membuat sebuah aplikasi desktop dari suatu website menggunakan automator. Silakan cek tutorialnya. […]

  7. […] podpatrzony na blogu Andiego Ihnatko Podobne wpisy:Nowy design strony iMagazine.pl Przed chwil? ruszy?a nowa ods?ona graficzna […]

  8. […] Making Desktop Webapps in Lion […]

  9. […] Ihnatko: Making Desktop Webapps in Lion (a must read; though a little geeky, it’s a brilliant little tidbit for creating that simple […]

  10. […] Automator es una magnífica forma de crear flujos de trabajo automatizados en OS X. Los que quieran profundizar en esta herramienta van a disfrutar pues se trata de un programa que garantiza infinitas posibilidades para crear acciones consecutivas en el Mac. Podemos usar esta capacidad de Automator para crear una aplicación a partir de una web. […]

  11. […] Making Desktop Webapps in Lion – Andy Ihnatko's Celestial Waste of Bandwidth (BETA) – Site-specific browsing gets OS support. Just in time for the inspiration for my webmail.app (GMail) to get permanently tagged with a social network's notification wart. […]

  12. […] application by using tools like Fluid or, if you’re already on Mac OS X Lion, Automator (as Andy Ihnatko explains). Tags: English Post a comment or leave a trackback: Trackback […]

  13. […] Making Desktop Webapps in Lion – Andy Ihnatko’s Celestial Waste of Bandwidth (BETA): “” […]

  14. […] Making Desktop Webapps in Lion – Andy Ihnatko’s Celestial Waste of Bandwidth (BETA) […]

  15. […] to think of an easier way to do it. With serendipity this morning just as I was pondering I saw a blog post detailing how to create an Automator iPhone webkit simulator application and realised how this […]

  16. […] to think of an easier way to do it. With serendipity this morning just as I was pondering I saw a blog post detailing how to create an Automator application and realised how this could be the solution to my […]

  17. […] Making desktop web apps with Automator. All kinds of goodness in here. […]

  18. […] that in mind, I would like to thank Andy Ihnatko for point out how easy it is to create desktop web apps in the latest iteration of the Mac OS, Lion. How […]

  19. […] Andy Ihnatko erläutert in seinem Blog, wie man unter Lion mit Automator simple Web-Apps bauen kann. Dabei ist es sogar […]

  20. […] osx, Automatorhttp://ihnatko.com/2011/07/22/making-desktop-webapps-in-lion/ […]

  21. […] Mac-Chrome hatte die Moeglichkeit einige Zeit selbst (Windows-Version hat es immer noch), ebendiese wurde meines Wissens aber entfernt. Warum? Keine Ahnung, geht nur noch via Umwegeauf dem Mac. Mac OS X Lion hat ebendiese Funktion uebrigens selbst straff eingebaut, kann offen ueber den Automator realisiert werden. […]

  22. […] may go some way to compensate for my loss of an ApplesScript based program that no longer works. Andy Ihnatko writes on his blog about the incredibly complex process for doing this, which takes all of six […]

  23. […] Chrome hatte die Möglichkeit einige Zeit auch, diese wurde meines Wissens aber entfernt. Warum? Keine Ahnung, geht nur noch über Umwege. Mac OS X Lion hat diese Funktion übrigens auch fest eingebaut, kann direkt über den Automator realisiert werden. […]

  24. […] are you’re going to be out of luck. Fortunately, a new method of creating Mac apps has recently hit the Web, which outlines how Webapps can easily be created using OS X Lion’s Automator […]

  25. […] später hab ich Lion, und Apple meine 29.- Franken. Easy. Genauso easy ist der Tipp, den ich hier gefunden habe. Es ist nämlich ganz einfach, eine Website in Lion als Applikation zu hinterlegen. […]

  26. […] Making Desktop Webapps in Lion [Andy Ihnatko's Celestial Waste of Bandwidth] Tagged:automatormacwebapps […]

  27. […] Making Desktop Webapps in Lion – Andy Ihnatko’s Celestial Waste of Bandwidth (BETA) […]

  28. […] aan wagen. Een van de coole functies die ik ontdekt heb via de website van (de altijd geniale) Andy Inathko is het maken van WebApps voor je […]

  29. […] and ihnatko have shown how easy it is to create a desktop web app in Lion. Next job is to see how easy it is […]

  30. […] Andy Ihnatko’s Celestial Waste of Bandwidth (BETA) This entry was posted in Mac and tagged automator, web apps by Julian Saraceni. Bookmark the […]

  31. […] Andy Inatko has a tremedous piece up on compiling web apps using Automator.  The steps go like this: Here’s the incredibly complicated procedure for building an app that keeps a webpage open in a floating window: […]

  32. […] Making Desktop Web Apps in Lion This entry was posted in Daring Fireball and tagged desktop, feature, goddamned-useful, ihnatko, […]

Comments are closed.