637509793040322763.jpg

Not all websites need a dedicated mobile app, which is why so many don't. Web apps are now designed to scale to different screen sizes, so mobile sites in your web browser are easy to navigate and utilize. Still, there's just something about an app on your iPhone's Home Screen that makes it feel more like an app from the App Store.

If you have an iPhone, you can bookmark a web app on your Home Screen from Safari or, as of iOS 16.4, most third-party browsers. Whatever browser you use, Add to Home Screen gives you a Home Screen icon that looks just like other app icons but is merely a shortcut to the webpage chosen.

Thankfully, many websites code in "standalone" or "fullscreen" display views in their manifest file. If that's the case, as with gadgethacks.com, these websites will open in their own WebView instances when added to your Home Screen via Add to Home Screen. Progressive web apps (PWAs) can even send you web push notifications on an iPhone as of iOS 16.4.

However, many sites do not provide an optimized standalone-like experience on mobile devices. Home Screen bookmarks for unconfigured web apps just open the sites in Safari and act like regular tabs. It's quicker than typing a URL or search term in Safari, but it's the same old Safari experience.

To make every site bookmark on your Home Screen look and feel like a standalone app, we can turn to Shortcuts. The shortcut we'll be using creates a WebClip device management profile you'll install on your iPhone. With the profile, whatever site you set will open the URL as a web app in full-screen view — in its own WebView instance — so there's no URL or search bar and no toolbar at the bottom.

It's technically still a bookmark but won't open as a tab in your regular Safari session. Best of all, it showcases the website in full screen, taking advantage of your entire display and eliminating the distractions that generally appear in Safari and other web browsers.

Required

  • iOS up to date: This shortcut is optimized for iOS 17 and iOS 18, but it will probably work on older iOS versions as well.
  • Shortcuts: Apple's app comes preinstalled on your iPhone, but if you've deleted it, you can reinstall it from the App Store.

Step 1: Install 'Make App from Web URL'

The "Make App from Web URL" shortcut creates a web clip of any site you want. Simply copy a URL to your clipboard, paste it into the shortcut, name your app, choose an icon, and add the web clip as an app to your Home Screen. Alternatively, can you share a webpage directly to the shortcut from your share sheet so you don't have to copy and paste the site's URL. Unlike a regular bookmark, the website won't open in Safari but will appear in its own full-screen window like regular native standalone apps.

You should automatically redirect to Shortcuts, but if you're not, tap "Get Shortcut." When the install page shows up in Shortcuts, you can tap the ellipsis (•••) to preview the workflow. Tap "Add Shortcut" to install it.

638578595202682723.jpg

Is This Shortcut Safe? Short Answer ... Yes

Developers use configuration profiles to install and test apps that aren't ready or won't ever appear in the App Store on the devices of coworkers, employees, and/or testers. The "Make App from Web URL" shortcut uses this same method to turn your URL into a web clip without a browser, as described earlier.

The shortcut's main component is the WebClip payload XML file that configures and creates the profile you'll install to turn websites into apps. You can see the code below, much of which is self-explanatory.

You can customize the ConsentText string, which is the text that appears right before you install the profile. "Payload" can be a scary word in the digital world, but it's nothing to worry about here. We created generic PayloadUUIDs, and you can choose your own random set of numbers and letters if it makes you feel better.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>ConsentText</key>
<dict>
<key>default</key>
<string>Choose 'Install' and enter passcode if prompted.</string>
</dict>
 <key>PayloadContent</key>
 <array>
   <dict>
     <key>FullScreen</key>
     <true/>
     <key>Icon</key>
     <data>Icon</data>
     <key>IsRemovable</key>
     <true/>
     <key>Label</key>
     <string>Name</string>
     <key>PayloadDescription</key>
     <string>Turn any website into an app on your home screen</string>
     <key>PayloadDisplayName</key>
     <string>Web Clip (Name)</string>
     <key>PayloadIdentifier</key>
     <string>Name</string>
     <key>PayloadOrganization</key>
     <string>Me</string>
     <key>PayloadType</key>
     <string>com.apple.webClip.managed</string>
     <key>PayloadUUID</key>
     <string>1a1a1a1a-1a1a-1a1a-1a1a-1a1a1a1a1a1a</string>
     <key>PayloadVersion</key>
     <integer>1</integer>
     <key>Precomposed</key>
     <false/>
     <key>URL</key>
     <string>URL</string>
   </dict>
 </array>
 <key>PayloadDescription</key>
 <string>Turn any website into an app on your home screen</string>
 <key>PayloadDisplayName</key>
 <string>Name</string>
 <key>PayloadIdentifier</key>
 <string>Name</string>
 <key>PayloadOrganization</key>
 <string>Me</string>
 <key>PayloadRemovalDisallowed</key>
 <false/>
 <key>PayloadType</key>
 <string>Configuration</string>
 <key>PayloadUUID</key>
 <string>2b2b2b2b-2b2b-2b2b-2b2b-2b2b2b2b2b2b</string>
 <key>PayloadVersion</key>
 <integer>1</integer>
</dict>
</plist>

Step 2: Get an Image for the App Icon

While Safari can generate an app icon for websites via the "Add to Home Screen" action, the shortcut we're using here will not, so you'll need an image to use for the icon.

The shortcut allows you to choose any image in the Photos app, so you can download a photo from the web or use an existing one. A small square-sized image works best, but the shortcut will automatically crop any longer-shaped photos down. However, avoid huge images because the shortcut encodes them in base64, increasing the image size. So, it's best to use the website's favicon if you can.

Since I'll be creating an app for our website, I'm using the Gadget Hacks logo.

638579430366999365.jpg

Step 3: Create the Configuration Profile

As I said before, you can create an app for a website from within the Shortcuts app. You'll just need the website URL in your iPhone's clipboard, or you can type it manually. Alternatively, you can share the website to the shortcut using the share sheet, which can be faster.

It's best to do this only for sites you often use that don't already have a native iOS app or an optimized interface for Add to Home Screen bookmarks.

Option 1: Start from Shortcuts

If you don't want to type the URL manually, open a browser, visit the website, and copy its URL to your clipboard. I'm creating an app for the gadgethacks.com website. However, our website natively supports standalone (full-screen) mode, so you don't need this shortcut to turn it into an app. Instead, just use "Add to Home Screen" from a browser like Safari. A site currently not supporting standalone (full-screen) mode is technologyadvice.com if you want a site to test.

638579416153873840.jpg

Now, head over to the "Shortcuts" tab in the Shortcuts app and run the "Make App from Web URL" shortcut. When it asks for the website's name, enter it and hit "Done." Then, enter the website's URL and hit "Done."

Next, the shortcut might ask you for access to your Photos app. If so, grant it permission, then choose the image you want to upload as your app icon from the photo picker that appears.

638579536361364982.jpg

Option 2: Start from Your Browser

Open your preferred browser to the website you want. I'm creating an app for the gadgethacks.com website. However, our website natively supports standalone (full-screen) mode, so you don't need this shortcut to turn it into an app. Instead, just use "Add to Home Screen" from a browser like Safari. A site currently not supporting standalone (full-screen) mode is technologyadvice.com if you want a site to test.

Tap the share icon to open your iPhone's share sheet, then select the "Make App from Web URL" shortcut from the list of actions.

638579534916052489.jpg

Next, enter the website's name when prompted and hit "Done." The shortcut might ask you for access to your Photos app. If so, grant it permission, then choose the image you want to upload as your app icon from the photo picker that appears.

638579534256052226.jpg

Step 4: Download the Configuration Profile

Once you select the image for your web app's icon, the shortcut will create the configuration profile and ask you to download it. Tap "Allow" then "Close."

638579533091520393.jpg

Step 5: Install the Configuration Profile

The final step is to install the configuration profile you just downloaded. To do so, open Settings. You may see a "Profile Downloaded" option near the top of the main Settings view, which you can tap on to take you right there. If not, head to Settings » General » VPN & Device Management, then tap the name of your downloaded profile.

As we discussed earlier, the profile's description states that it contains a web clip. Tap on "Install" at the top right, then enter your passcode when prompted.

638579538443864470.jpg

The next page will show a message from the developer, i.e., you, which simply lays out the last few steps you took. Hit "Next" to continue, tap "Install" in the top right, and then again at the bottom. Your profile is now installed.

638579539313709624.jpg

Step 6: Open Your New Web Clip Self-Contained App

Your new web clip app will appear on your Home Screen. If you have iOS set to push new app installs to your App Library without touching the Home Screen, you'll still see this web clip app on your Home Screen since it's not a native app. However, you can still access the web clip from the App Library.

Find and tap on the newly created web clip app icon, and the website will open in its own full-screen WebView, with no navigation bars or other features obstructing your view.

638579542041832947.jpg

However, if you tap around to go to other pages in the web clip, you'll see in-app navigation bars on the top and bottom to access reader view, request desktop sites, view website settings, share the website, open the page in Safari, and more, just like you would in other in-app web browsers. If you swipe up or down, the nav bars will disappear. This is a limitation of web clips for iOS, as any external links will be opened in a self-contained view.

638579542374802310.jpg

Removing the Web Clip and Profile

Let's say you no longer want the web clip app and want to remove it. Simply deleting the app icon from your Home Screen is not enough because the configuration profile will continue to exist in your settings. To get rid of both the app and profile, go into Settings » General » VPN & Device Management.

Next, tap the profile and tap "Remove Profile." You'll be prompted to enter your passcode. Finally, tap "Remove" when it appears, and the profile and web clip will be deleted from your iPhone.

638579543931834989.jpg

Cover photo by Nelson Aguilar/Gadget Hacks; Screenshots by Justin Meyers/Gadget Hacks

Comments

No Comments Exist

Be the first, drop a comment!