Skip to content

Making Desktop Webapps in Lion

Posted on July 22, 2011 at 11:15 am

“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.

Filed under: apple, Mac, yellowtext.

Comment Feed

97 Responses

  1. If I could build Hypercard-style stacks on my iPad for my own personal use, I’d be really happy

  2. “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.”

    It’s funny because it’s true! I built a weather-widget for wunderground.com to show me the hourly temperatures for the day, and I never use it because I never bother to launch Dashboard.

  3. Thanks. That was easy.

  4. You could do this under SL as well. Never the less, it’s still an awesome feature.

  5. I tried it with touch arcade, it worked, until I put it into iPhone mode then it gave me a blank page.

  6. @john: no you could not, because the “Website Popup” action is not built into Automator’s 10.6 libraries. You could open a page in the default web browser, not make them into semi-standard applications. Unless you’d built the “website popup” action yourself via a webview of course, which was always possible I guess

    masklinnJuly 22, 2011 @ 12:17 pm
  7. Your brilliance is only outmatched by your sideburns.

    Unfortunately, it’s too hot to upgrade to Lion. I’m still chillin’ with Snow Leopard.

    TopherJuly 22, 2011 @ 12:34 pm
  8. I <3 U

    This IS really cool. A super mini SSB.

    See also http://www.fluidapp.com for something a little more full featured.

    BTW, I think since expose, spaces, and dashboard are all bundled up now, I'm actually using dashboard. One little button for everything!

    KiltBearJuly 22, 2011 @ 12:55 pm
  9. Is it possible to ask the user for a URL first?

    ThomasJuly 22, 2011 @ 1:17 pm
  10. @Thomas – Yup! I’ve just added a couple of paragraphs explaining how to do that.

  11. Neat idea, Andy. I use a SSB (“Single Site Browser”) app on my Mac, called “Fluid” which lets you create single website “applications”. The applications it creates will behave as first class citizens in Mac OS X, come with an icon that appears in the dock, some sites even get dock badges (to show email counts for gmail, etc) and lots of other neat things.

    http://fluidapp.com

    CAVEAT, this is NOT an advertisement. I’m just a user ;)

    The free version works great, but there’s a pay version with some enhanced features, like embedding an app into the menubar, fullscreen, etc. The normal version comes with a ton of other cool features too.

    As a side-note:
    Dashboard widgets can be dragged to the desktop (but they will hover on top of everything).

    Enter this into the terminal:
    “defaults write com.apple.dashboard devmode YES”
    and logout and back in

    Then switch to the dashboard, click and hold on a widget, press the dashboard key on your keyboard, to return to the desktop and the widget will with you. You can then drag it somewhere and drop it (release the click).

    Google “dashboard widget on desktop” to get a better explanation. I’ve been doing this since 10.4

    JacksonJuly 22, 2011 @ 1:36 pm
  12. You could use the “Ask for text” action before the “Get Specified URLs” action.

    JohnnyJuly 22, 2011 @ 1:40 pm
  13. 1.) This is great

    2.) I grew up near Newton Lower Falls. (Although truthfully, more towards Newton Upper Falls – within walking distance of Hemlock Gorge. )

  14. OK, how about a button in the Safari tool bar that pops open the current site in this fashion.

  15. This is indeed very neat. Thanks for describing this, Andy (and thanks to John Gruber for linking to it)!

    But I have a question. The Get Specified URLs action lets you enter more than one URL; but as far as I can tell, it will only open the first URL in the list. Is there a way to get the app to open two URLs (say, with a tabbed UI)? If not, what’s the point of letting me enter multiple URLs?

  16. Interestingly, it doesn’t support web fonts served from Typekit.

  17. Also interesting that it’s not added to browser history.

    John C.July 22, 2011 @ 2:15 pm
  18. I just tried something similar which seems pretty useful. Create a Service instead of a workflow.

    Then, select “Service recieves URLs” from “Any Application. Next drag the Website Popup under it. Save as e.g. “Display URL in Popup” and then right-click on a highlighted URL, and select “Display URL in Popup” from the Services context menu.

    Works like a charm!

    Allen RobelJuly 22, 2011 @ 2:27 pm
  19. It’s not new in Lion. I’ve been using it in SnowLeopard for ages (although the action was updated in Lion and is not comptible with the SL version).

    Philippe MartinJuly 22, 2011 @ 2:41 pm
  20. Nice – but currently does not support HTML5 localStorage when you close and re-open a created app :-(

    Also, regular javaScript alert() dialogs appear to be supressed.

  21. Also, Geolocation does not seem to work since the permission popup is also supressed.

  22. I remember doing this in SL too. I think I may have had to download the website popup though. I think I got it from that semi-official? automator site. The one that Sal recommends.

    My question to you guys though is:
    Can you change the surrounding chrome? I wanna try making it like the new white chrome in Lion’s Quick Look.

    This is very handy if you have a lot of tabs open in your suspended browsing session and you don’t want to open them all up just to look at one little link.

    RandyJuly 22, 2011 @ 2:58 pm
  23. This does not seem to work with Slingbox, which would have been really nice. :(

    DolfrenJuly 22, 2011 @ 3:38 pm
  24. @Dennis Wurster… Yeah, I sure miss HyperCard. But HyperCard still lives in the form of LiveCode (runrev dot com) with the same HyperTalk language, same HyperCard editing environment, and you can even save stacks to full on apps for MacOS, Windows and Linux and make iOS and Android apps too. It’s based on MetaCard. (I used to sell XCMDs for both HyperCard and SuperCard.)

    I use it to quickly make miscellaneous functionality I need without the unnecessary complexity of Objective-C and Xcode (but interestingly, I use it in support of my Mac OS app development.) Check it out.

    Automator and AppleScript have things about them which feel like it throws stones in your path and stops you cold, even with AppleScript books on hand. A lot to be said for dead-simple things. There are tradeoffs with every tool, and it’s good to have things like LiveCode and Automator for the quick and dirty.

  25. Does each app have separate cookies or are they shared with Safari?

  26. Nice, thanks for the info. Liked your review in the Times as well.

  27. Can you make said app log in to a website? i.e. a toodledo.com mac app?

    Jon SnyderJuly 22, 2011 @ 4:31 pm
  28. Dayum. Until just now I wasn’t excessively disappointed that my old iMac won’t run Lion. Thanks, Andy…

    KevinJuly 22, 2011 @ 6:06 pm
  29. > If I could build Hypercard-style
    > stacks on my iPad for my own
    > personal use, I’d be really happy

    Your nostalgia is sweet, but HyperCard (1987, Mac) was made obsolete by something called the World Wide Web (1990, NeXT), which is in your iPad. You put your cards and links on a server instead of on your local computer, and then others can read them and link to them and you can link to their cards, too, no matter what computing platform everyone is using. So there is nothing stopping you from building your cards and links (HyperCard) on your iPad. If you have a Facebook page, you’re already done.

    HamranhansenhansenJuly 22, 2011 @ 6:39 pm
  30. Any way to make this fullscreen in it’s own desktop ala the new Lion fullscreen?

  31. Wicked. Have you tried the new text tonePub action yet?

  32. Should have read “text to ePub”

  33. “1) Launch Automator.”

    Ha! You just lost 95% of your audience.

  34. Holy crap. I live in Newton Lower Falls! Does this mean that I am, or know a prophet?

    John RosataJuly 23, 2011 @ 1:03 am
  35. This is a nice feature in Lion, thank you for finding it and displaying the instructions clearly. Maybe someone will provide an Automator template for download.
    You’ve also been able to drag Dashboard Widgets into your regular desktop since 10.4: http://jstnfrd.com/ozvhOA.

  36. For my personal workflow, I’m really curious to find out if one can pass a variable to a script *inside* of the web page just opened. That would open up a LOT of possibilities :)

    HermanJuly 23, 2011 @ 5:44 am
  37. Stupid question perhaps, but is there a way I can replace Otto as the icon for the saved application?

  38. I hate to say this, but you can do it with Snow Leopard and this Automator action has been around for years: http://mac101.net/content/how-to/automator-creating-services-in-snow-leopard/

  39. On a brighter note, thanks for getting me to play with Automator again. I had forgotten its awesome power.

  40. @Jeffrey van der Goot

    Yes, there is a way to replace Otto as the icon for these little apps you’ve created, and this will work with any file (you can have custom icons for specific folders for example.

    The easy way is to select the app in question and Get Info (cmd-i). You may not have noticed that you can actually select the icon in the Get Info window. Just copy the graphic you would like to use (if it’s a picture file like .png or .jpg you can just copy it from the finder) and then paste it onto the icon in the Get Info window. There’s no step 3 ;-)

    chrisjnilesJuly 23, 2011 @ 2:42 pm
  41. I second Topher’s assertion of the Inhatko Brilliance Quotient [IbQ] as it relates to his sideburns…

  42. Google+ doesn’t work. It come up with error message saying browser is t supported.

  43. Is there a way to go back and forth when viewing the webpages? I can’t seem to figure it out. And I have to reopen the web app again to go to the page I originally started at. Hopefully I am just missing something because this is a really cool and useful tool.

    Tony FlowJuly 23, 2011 @ 8:38 pm
  44. This is also a super quick (though not completely thorough) way to sees how web pages you might be creating would show up on an iPhone.

  45. @ Tony Flow …just hit the “delete” key. That will take you back one page.

  46. Is there a way to disable the spinning gear in the menubar while the webapp is running? I love this tip, but I’m distracted by the constant rotating of the gear in my menubar! :) Thanks!

    wlqdlaqcwywjnJuly 24, 2011 @ 8:36 am
  47. Automator Novice Here:

    In terms of modifying the “All Purpose” variant, is there an Automator action that would pop-up a menu selection of, say, five or six often-used URLs?

    Kevin SheridanJuly 24, 2011 @ 12:09 pm
  48. The Fluid App can do the same thing and more and it is much easier.

Newer Comments »

Continuing the Discussion

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

  2. [...] 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: [...]

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

  4. [...] 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 [...]

  5. [...] 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 [...]

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

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

  8. [...] 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. [...]

  9. [...] 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 [...]

  10. [...] 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. [...]

  11. [...] 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 [...]

  12. [...] 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. [...]

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

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

  15. [...] 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 [...]

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

  17. [...] 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 [...]

  18. [...] 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 [...]

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

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

  21. [...] 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 [...]

  22. [...] 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. [...]

  23. [...] 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. [...]

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

  25. [...] Making Desktop Webapps in Lion [...]

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

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

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

  29. [...] 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 [...]

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

  31. [...] Making Desktop Webapps in Lion [...]

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