#Iphone icon generator code#
#Iphone icon generator series#

It’s important to note that I didn’t have to decompile anything to discover this: all of this code is available to users of the Shortcuts app via the Safari address bar. As a user, you don’t see any of this: the link isn’t printed on the webpage, and all you see is its initial splash screen under the hood, the icon you tap on the home screen loads a local web app for a second before launching the URL embedded within its code. Using JavaScript and MouseEvents, the web app then simulates a mouse click on this invisible link, which launches the URL automatically. After you choose to add a shortcut to the home screen, its “run shortcut” URL scheme is assigned a specific link ID in the HTML code of the web app. You are, effectively, opening a web app that automatically redirects you to a different URL.īut how does the automatic launching work? That’s the fascinating hack the Workflow engineers devised years ago. This is referred to as “standalone” mode, and it explains why, every time you tap on a shortcut icon from the home screen, you see a splash screen for a second before the associated action is launched. What you may not know is that, years ago (before their acquisition), the Workflow team came up with an ingenious concept, which Apple is still using today for Shortcuts: under the hood, these landing pages contain JavaScript code that is only executed when the webpage is launched as a web app from the iOS home screen (Apple sometimes calls these “web clips”). You may be familiar with this landing page, which explains how you can add a shortcut to the home screen:

#Iphone icon generator series#

html files directly in the browser as I explained last week on Club MacStories (where I am currently building a series of shortcuts based on this idea), the only way to load HTML in Safari for iOS is to provide it with an encoded string attached to a data URL. Unlike its macOS counterpart, Safari on iOS does not support opening. To create home screen launchers, both Workflow and Shortcuts rely on a technique that involves loading arbitrary HTML in Safari through a data: URL that contains HTML content encoded in base64. Allow me, however, to offer more context on how this shortcut came to be, how it works behind the scenes, and what you can build with it.

There is no configuration necessary on the user’s end: it’ll take you 20 seconds to create your first custom icon, complete with onscreen instructions. It fully replicates a native Shortcuts feature while giving you the freedom to create icons and launchers for anything you want. This shortcut is, by far, the most complex piece of iOS automation I’ve ever put together for MacStories, and I’m happy with the final product. The result is Home Screen Icon Creator, an advanced shortcut that lets you create custom home screen icons to launch apps, custom shortcuts from the Shortcuts app, or specific actions for any of your contacts the shortcut can also generate icons with solid colors, which you can combine with matching wallpapers to create custom home screen layouts. So earlier this month, I decided I wanted to learn how Shortcuts was handling the creation of home screen icons.Īfter a few weeks of experiments and refinements, I ended up reverse-engineering Shortcuts’ ‘Add to Home Screen’ implementation, which turns out to be an evolution of Workflow’s existing hack based on Safari and web clips. I’ve always been intrigued by Workflow’s implementation of ‘Add to Home Screen’ – a feature that Apple kept in the transition to the Shortcuts app, and which allows users to create home screen icons to launch their favorite shortcuts. You can get the updated shortcut at the end of this post.

The shortcut is now much faster to run (takes about 5 seconds instead of 20) and doesn’t need to save any file in your Dropbox account. Update: Thanks to MacStories reader Thomas, I was able to remove the need to upload image assets to Dropbox.