February 21, 2017 at 2:21 p.m. PST
The iPhone features web browsers capable of accessing virtually any website. This article covers how to add a website to your iPhone’s Home Screen using Safari and Chrome.
Apple is pushing an app-centric user experience for obvious reasons. Although the web is open to all, Google dominates search and Internet-based services. Apple really doesn’t have a strategy to monetize the Web. They force their users to purchase apps from their App Store, while minimizing the importance of the web.
Web apps were actually the original vision for mobile computing. Remember the first iPhone commercials? Apple made a big deal over the iPhone’s fully functional web browser. Apart from a lack of Flash support for Safari, it was fully capable of rendering desktop websites. Users could easily zoom into sections on a web page by double tapping or reverse pinching the screen.
Steve Jobs said he envisioned web apps to be the future of the iPhone. There was no App Store, and originally, no plan to develop one. Along came a competing mobile operating system, and Jobs felt it copied the iPhone. He vowed to go “thermonuclear” on Google, and shortly after, the App Store was launched. It doesn’t take a tech analyst to realize that Apple is doing everything possible to thwart Google’s dominance of the web.
Apple-friendly publications like Wired even had cover stories proclaiming that the web was dead. Everyone was rushing to develop and use apps. Major websites wrapped the same exact content in an app, and consumers happily installed these on their iPhone. Like many people, I realized the app version of most websites was missing a lot of content. These apps were simply watered down versions of the original website.
Years later, the World Wide Web is still very important. The hype of apps killing off the web just didn’t prove to be true. It was simply the result of simplistic thinking. In 2014, Wired published an article proclaiming that the Web is alive and well. Oops!
Whenever a new technology becomes mainstream, there always seems to be the need to pronounce its predecessor obsolete. People still read books after radio came along. Terrestrial radio is still popular today and its usage has actually grown over the years. Television, VCRs, digital cable, smart phones and other devices simply complement the technology we have now. People haven’t replaced their lamps with night vision goggles either.
The reality is that the web is still very important, and I use it all the time. For example, the best weather forecast isn’t available in the App Store. It’s available on the weather.gov website. The National Weather Service does not offer a mobile app for any platform. Apple also has a tendency to reject apps from the App Store, often for arbitrary reasons. You can get most of this content on the web, often for free. You can even add an icon to your home screen to quickly launch these websites and web apps. Let’s take a look at how to do this with Safari and Chrome.
How to Add a Website to Your iPhone Home Screen Using Safari
Although there are many different browsers available in the App Store, Safari offers special capabilities. Because Apple develops and bundles Safari with iOS, they can take advantage of proprietary hooks in the operating system. These features are not available to third-party developers.
One such feature is the ability to add a website shortcut to the Home screen. First, launch Safari and navigate to the website you would like to access from the Home screen. Tap on the Share button and then tap Add to Home Screen.
You can edit the name of the site, but not the URL. Pick a short name so you can easily see it on the Home Screen icon. Home Screen icons can show 10 to 12 characters of text, depending on the width of certain characters. Remaining characters are replaced with ellipses (…).
Now that your icon has a place on the Home Screen, it takes on many of the same behaviors as an app. Tapping on the icon will launch Safari and bring up the desired web page. You can even search for the web app icon using Spotlight.
How to Add a Website to Your iPhone Home Screen Using Chrome
Google’s Chrome browser is actually better than Safari for most tasks. Although they are forced to use Apple’s WebKit rendering engine, I find Chrome to be a little more stable than Safari. I get the impression that Apple doesn’t dedicate a lot of resources to Safari development. As we examined earlier, Apple doesn’t endeavor to support the web, and it shows. They also won’t permit developers to use any web rendering engine other than WebKit. Every browser in the App Store must have Safari “guts”.
Apple imposes other limitations on Chrome. Users cannot directly create a Home Screen icon that launches Chrome with a predetermined URL. Only Safari can do this, however, there’s a neat trick that can work around this limitation.
First, launch Chrome and navigate to the page you wish to use for your Home Screen icon. Copy the URL from the address bar by selecting the text and tapping on Copy.
Next, open a text editor, such as Notes, and paste the URL. Edit the URL so it looks like the following:
googlechrome://www.weather.gov
Replace www.weather.gov (or your website of choice) with the URL you copied. Make sure to leave off the protocol (http, https). It needs to look just like the URL above, with your preferred web address. Now copy this URL.
Next, open the App Store and search for “App Icons”. This app lets you create app icons for your Home Screen. Tap on Get to install the app.
After it is installed, tap on Open.
Paste the text you created in the previous step into the address field and tap Next.
Edit the icon as you desire and then tap on Create.
The App Icons app will launch Safari.
From there, you just use the standard method of adding a Home Screen icon.
Make sure to give your icon a familiar name. You won’t be able to rename it after it is created.
That’s it. When you tap on the icon, the web page will load in Google Chrome.
As you can see, adding a custom icon to the Home screen isn’t a limitation of iOS, but the process is clumsy. If Google were to implement this feature, it would need to be convoluted and pass off the final task to Safari. I think even the biggest Apple fan would have to admit that Cupertino is doing something wrong here. They need to allow any browser to create Home Screen icons. Their current practice is anti-competitive and also hurts their own customers.
Another glaring limitation is that users can’t just edit a Home Screen icon’s URL. This is another example of how Apple neglects the Web. I tried a few tricks to create a Home Screen icon for Chrome. I tried JavaScript bookmarklets and navigating to the URL in Airplane mode. Neither of these worked. Unfortunately, the only way to do this is by using the App Icons app, which limits users to three free icons. After that, you have to pay.
Add an Open in Chrome Bookmarklet to Safari
While researching this article, I did come across a great way to open Safari web pages in Chrome. This technique uses a bookmarklet, which is JavaScript executed from a bookmark. My hope was that one could hard code the URL and create a Home Screen icon with it. The problem is that, with both JavaScript and a hardcoded “googlechrome://” URL, once the address is invoked, the Share Sheet control is deactivated. But the bookmarklet technique is still useful for opening any web page in Chrome, within Safari. You may need to do this if a certain web page consistently crashes in Safari.
Launch Safari and open any web page. Tap on the Share Sheet button and then tap Add Bookmark. Tap on Save to create the Bookmark. Next, tap on the Bookmarks icon on the top left of Safari. Tap Edit on the bottom of the Bookmarks panel, then tap on the Bookmark you just created. Name the Bookmark “Open in Chrome”. Copy and paste the following code into the address field and then tap Done on the keyboard:
javascript:location.href=%22googlechrome%22+location.href.substring(4);
Tap Done at the bottom of the Bookmarks panel. You can now open any Safari window in Chrome, simply by tapping the Bookmarks button and then tapping the “Open in Chrome” Bookmark. It’s a great way to bypass Safari when a stock Apple app opens something in its default browser.
Apple Needs to Embrace the Open Web
As you can see, Apple’s business practices have clearly impacted the overall quality of iOS. I like Apple devices. I think they make the best devices. Unfortunately, users have to put up with some annoyances, mainly due to competition. iOS would only improve if they allowed third parties to access some of their proprietary APIs, such as the ability to create Home Screen icons. Your iPhone and iPad would also be much better if Apple allowed third-party web rendering engines, such as Google’s Chromium. WebKit is woefully inadequate and unstable. I use Chrome on my Mac and on my iOS devices. Unfortunately, Chrome for iOS is really just Safari with a different skin. I do prefer Chrome’s features and find it to be slightly more stable than Safari. If Google could port their Chromium engine to iOS, it would be even better.