قالب وردپرس درنا توس
Home / Mac / A shortcut to create custom icons for apps, contacts, solid colors and more – MacStories

A shortcut to create custom icons for apps, contacts, solid colors and more – MacStories



Update: Thanks to MacStories Reader Thomas I was able to remove the need to upload image assets to Dropbox. The shortcut is now much faster to run (takes about 5 seconds instead of 20) and does not need to save any file in your Dropbox account. You can get the updated shortcut at the end of this post.


I've always been fascinated by Workflow's implementation of "Add to Home Screen" – a feature that Apple held in the transition to the shortcut app, allowing users to create home screens icons to launch favorite shortcuts. So earlier this month I decided that I would learn how shortcuts were handling the creation of home screen icons.

After a few weeks of experiments and improvements, I ended up with reverse engineers Shortcuts & # 39; & # 39; Add to Home Screen Implementation, which turns out to be a development of Workflow's existing hack based on Safari and Web Clips. The result is the Home Screen Icon Creator, an advanced shortcut that lets you create custom home screen icons to launch apps, custom shortcuts from the shortcut app, or specific actions for any of your contacts. The shortcut can also generate solid-color icons, which you can combine with matching wallpapers to create custom home screen layouts.

This shortcut is by far the most complex part of iOS automation I've ever assembled for MacStories, and I'm pleased with the end product. It replicates a native shortcut feature, while giving you the freedom to create icons and launch for anything you want. There is no configuration required at the end of the user: it takes 20 seconds to create your first custom icon, complete with the onscreen instructions. However, allow me to offer more context on how this shortcut was, how it works behind the scenes and what you can build with it.

To add the home screen

To create the launcher launchers, both Workflow and Shortcuts rely on a technique that involves loading any HTML in Safari via a data: URL containing HTML content coded in base64. Unlike the MacOS counterpart, Safari on iOS does not support open .html files directly in the browser; As I explained last week at Club MacStories (where I'm currently building a number of shortcuts based on this idea), the only way to load HTML on iOS for iOS is to give it a coded string associated with a data URL. [19659007] You may be familiar with this landing page, which explains how to add a shortcut to the home screen:

What you may not know is that the Workflow team has achieved a brilliant concept that Apple still uses many years ago. Today for shortcuts: under the cover, these landing pages contain JavaScript code that is only executed when the webpage launches as a web app from the iOS home screen (Apple sometimes calls these "web clips"). This is called standalone mode, and explains why each time you press a shortcut icon from the home screen, you'll see a splash screen for a second before launching the associated action. You effectively open a web app that automatically redirects you to another URL.

But how does automatic launch work? It's the fascinating hack Workflow engineers developed years ago. When you choose to add a shortcut to the Home screen, the web browser name "Run Shortcut" will be assigned a specific link ID in the HTML of the web app. Using JavaScript and MouseEvents, the web application simulates a mouse click on this invisible link, which automatically launches the URL. As a user, you do not see any of this: the link is not printed on the website, and all you see is the first splash screen; under the hood, the icon you click on the home screen adds a local web app for a second before launching the URL embedded in its code.

It's important to note that I did not have to decompile anything to detect this: all of this code is available to users of the shortcuts app via the Safari address bar. Before you add a shortcut to the Home screen, copy the data: URL from Safari, find the base64 section, and run it through any web service or app that can decode base64 text. You will be presented with a full copy of the HTML code that Shortcuts uses to create startbooks on the home screen.

When I first figured out how shortcuts can create web clips that automatically launched online forms without user interaction, I began to change Apple's code to suit my needs and preferences. I've added the ability to create different types of launchers, including the ability to launch any URL for any iOS app; I made a landing page for Safari; I came up with my own responsive splash monitor solution, which involved writing media requests and calculating WebKit pixel conditions based on device resolution – all while designing shortcuts to abstract this complexity from the user as much as possible. I had a first version of this shortcut up a week ago ; I was waiting because I wanted to make it more beautiful, more refined and easier to drive for everyone.

But enough technical details. Let's take a look at how the shortcut works.

Home Screen Creator

The shortcut supports four types of launcher applications that can be added as icons on the iOS home screen:

  • Start any app URL form
  • ] Run a custom shortcut in the shortcut folder
  • Call, Text or FaceTime a specific contact
  • Create a solid color icon (does not start anything)

As soon as the shortcut starts running, you will be prompted to select the kind of home screen you want to create. This process must be repeated on each device where you want to add an icon because web clips are not synced across iOS devices.

If you choose to create a startup package for a generic URL system, you will be prompted to paste the URL of a text field; Any URL series works, and you do not need to take care of coding special characters (such as spaces) yourself.

After entering the URL you want to open from the Home screen, you are prompted to search in the App Store app application that you want to use as an icon. This is all done within shortcuts, and it is a necessary step to end up with a custom icon that does not look like an empty square.

Shortcuts native App Store actions to extract app artwork, lets you come up with interesting implementations of third party app icons. For example, you can put three different Tweetbot icons on the home screen, each launching another section for the app. Alternatively, you can use the official Twitter app's icon to start Tweetbot. Or – and this is something I've done myself – You can search the App Store for native Apple apps and use default logos as icons to launch different programs or shortcuts.

That brings me to the second type of launcher – the ability to launch one of your shortcuts via an icon on the home screen. Functionally, this is no different than the shortcut's own support to add one of your custom shortcuts as a home screen icon. But my version is a bit nicer because it gives you a list of all your installed shortcuts (sorted by date) to choose from and it also supports using the App Store app's artwork as a shortcut icon. For example, I use the good third-party home app icon as the artwork for the shortcut of my command, and I love it.

If you do not like my approach to using the App Store as a layer for millions of different app icons and would prefer to load your own icon files, you can change my shortcut to do this. Just remove all App Store actions and use & # 39; Select Photos & # 39; to save a image as the "Main" variable. The choice is up to you; By default, the App Store should give you many options regarding custom icons you can use.

The third category of launches supported by this shortcut are contact specific actions. By utilizing shortcuts integration with iOS & # 39; Contacts database and system-based support for phone, SMS and FaceTime URLs, shortcuts can create launches that will either redirect you to a message thread (or start a new one) or ask you to Call the selected contact by phone, FaceTime or FaceTime Audio.

Of all the features I created for this shortcut, contacters are my favorite. It's nice and convenient to make icons for the most important people in your life and see the profile images on the home screen. With the shortcut, you can choose between phone numbers and e-mail addresses for a selected contact, and it allows you to confirm which phone number or email address you want to use if more are found on the contact's card. If you find yourself dipping in and out of a message thread with your partner or if you just want a quick way to FaceTime with your kids, you can use this shortcut to create custom icons for it – free without having to load Download any third party party application from the App Store.

Finally, here's my iPad Pro home screen:

To achieve this special layout I worked with the simple trick of adding black icons to the top of a black background, which creates the illusion that There is a gap on my home screen. In fact, if you choose the option to create a solid color icon when you run the shortcut, you will be prompted to enter the color you want (you can enter any English name supported by HTML or HEX value), as then will be used to create an icon for the specific color. If you want to customize your iPhone or iPad home screen by faxing solid color holes, this shortcut should be useful.

All four types of shortcut launchers have two aspects in common: they use base64 encoding for images to be used in the HTML lookup to specify icons and splash screens; and at the end of the process, they enter a custom Safari website with instructions on how to add the icon to the home screen.

The details I'm most proud of are the small details and improvements I could add to the last steps in the shortcut. The landing page that opens in Safari is HTML that uses custom CSS to load the native San Francisco font on iOS devices. The image that explains how to add a home screen icon differs between iPhone and iPad and is embedded in the HTML as a base64 asset. You do not need to know any of these things, but I just wanted to tell you that I care about it.

Finally, I will call out the splash screens you will see for a fraction of a second after you open a shortcut from the Home screen.

I wanted the experience of pointing icons to be nice, which meant that I had to figure out how to avoid loading a blank white screen after tapping the icon and before redirecting to another URL. Because these web clips are effective web apps that support the latest features of Progressive Web Apps adopted by WebKit and Safari, all I needed to do was understand how to post media requests for different iOS devices in the shortcut, and create launch photos that were appropriately sized for the device where shortcuts were currently performed. It took a while. To put it simple: At the run, the shortcut controls the device resolution, compares it with a pixel ratio, calculates the size of an apple touch startup and creates static splash screens that use a larger version of the home screen icon. On most modern iOS devices you should see a splash screen after dropping a launcher icon on the home screen. Again, it does not improve the functionality of the shortcut itself, but it is more beautiful.


What started as an experiment to understand how a shortcut function worked behind the scenes became the most complex custom shortcut I've ever made (it's made up of 224 actions). Whether you want to save time starting your favorite game, run a custom shortcut or get in touch with a loved one, this shortcut should help you make it easy to create as many home screen icons as you want. I am quite pleased with how this shortcut appeared, and as always I listen to your feedback and questions . You can download the shortcut below.


Source link