Make a Newsstand App into a Home Page Icon

As the editor and publisher of The Magazine, I have a little problem with Apple's Newsstand, even though it has served me and the publication well. It's become in iOS 7 an easy way to lose track of what you're reading. In iOS 5 and 6, the Newsstand faux folder showed tiny previews of the latest covers; in iOS 7, even those are gone. People forget about us. I expanded with my thoughts at TidBITS on an essay that Marko Karppinen wrote. He runs a publishing platform, and now recommends to his clients that the Newsstand advantages, which include an updated app icon for each new issue, no longer outweigh the disadvantages.

But I figured out one workaround for readers last night, and Marko told me via (public) Twitter he has a few more ideas he's working on, all of which will fit inside of Apple's current guidelines. 

It's been possible for several years to take a Web page in Safari and turn it into a link (or even a freestanding Web app) on your home screen. On any page, tap the Sharing button and then Add to Home Screen. This takes the current visible screen and makes it a tiny but ugly icon, and puts it in the next available slot on a home screen page (typically starting at the second page).

But Apple looks at the HEAD part of the Web page to see if there are META tags that reference app icons. If so, it pulls in the appropriate icon, and the home screen pseudo-app now looks pretty. 

I realized that I could provide a way to link our Web site to the app via an icon through a simple Web page.  I create a page that has the app icons referenced in the top, but also uses the ancient "refresh" option: a browser waits a specified number of seconds and then redirects to a specified URL. Apps can have a URL schema name in iOS; The Magazine 's is the-magazine.

Thus, I created a page that, when visited, automatically redirects the browser instantly to the-magazine:// — this opens the app if it's installed in iOS. That doesn't seem useful, though, right? The point is to get an app icon on the home screen! Ah, but it does work. It just takes an extra step for the user. 

  1. The user loads the redirection page. (I've posted the HTML into a Github file.) 
  2. Safari opens the app.
  3. Return to Safari. The page is static since it's not loading.
  4. Tap Sharing, then Add to Home Screen. The title of the page is prefilled and the icon is grabbed from the reference in the page.  
  5. Tap Add. 

Tap the icon on the home screen, and it loads Safari, opens that page (probably cached), and in a few tenths of second launches the app. It's not perfect, but it's far better than the current alternative for readers who want an icon on their home screen.

Marko notes that it's possible to do this with a configuration file, too, in which the icon would directly link to the app's schema, and not require a Safari pass-through. I'll post more in the future.