Not all websites need a dedicated mobile app, which is why so many don't. Web apps are now designed to scale to whatever the size of your screen is, so the mobile versions of desktop sites in your web browser are easy enough to navigate and utilize. Still, there's just something about an app on your home screen that makes it all so much easier.
If you have an iPhone, you can bookmark the web app on your home screen from Safari. In the browser, tap the Share button on a webpage, hit "Add to Home Screen," then select "Add." That gives you a home screen icon that looks just like other app icons but is merely a shortcut to the webpage chosen.
Site developers can even configure these types of shortcuts to look and behave like native iOS apps; they can give their site a unique app icon, change the status bar's appearance, and hide Safari interface components. However, many sites do not provide an optimized standalone-like experience for their home screen icons. Home screen bookmarks for unconfigured web apps just open the sites in Safari and look 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 — without any browser — 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 getting rid of the distractions that normally appear in Safari and other web browsers.
Required
- iOS 14: The shortcut is optimized for iOS 14. It may work on iOS 13 but has not been tested on older systems.
- Shortcuts: Apple's app comes pre-installed on your iPhone, but if you've deleted it, you can re-install it from the App Store.
- Allow untrusted shortcuts: Go to Settings –> Shortcuts and toggle on "Allow Untrusted Shortcuts" to allow third-party shortcuts.
Step 1: Add the 'URL App' Shortcut
The "URL App" shortcut, from RoutineHub user Changmeister, creates a web clip of any site you want. Simple 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. 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.
Use the iCloud link above or head to RoutineHub to download the shortcut. You should be automatically redirected to Shortcuts, but if you're not, tap "Get Shortcut." To add the shortcut to your library, scroll through the preview and tap "Add Untrusted Shortcut."
Step 2: Get the URL of the Webpage
Before you run the shortcut, go to Safari or your preferred web browser and copy the URL of the website you want to turn into a web clip. If you know the URL by heart, you can obviously skip this step. It's good to only do this for sites you often use that don't already have a native iOS app or an optimized interface for "Add to Home Screen" bookmarks.
As an example, I'll create an app for the Gadget Hacks website.
Step 3: 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.
In the shortcut, you can choose any image in the Photos app, so you can either download a photo from the web or use an existing picture. A square-sized image works best to fit perfectly, but the shortcut will automatically crop any longer-shaped images down.
I'll use the official Gadget Hacks logo for my web clip's app icon.
Step 4: Run 'URL App' to Build the Profile
Now, head over to "My Shortcuts" in Shortcuts and run the "URL App" shortcut; it's the card called "Make app from URL." First, enter the name you'll see underneath the app icon on your home screen, then hit "Done."
Second, type in or paste the website URL you copied earlier and hit "Done" again.
Third, the shortcut will ask you for access to your Photos app. Grant it permission, then choose the image you want to upload as your app icon from the photo picker that appears.
Step 5: Download the Configuration Profile
Developers use configuration profiles so that iOS users install and test apps that are not ready or won't ever appear in the App Store. The "URL App" shortcut uses this same method to turn your URL into a web clip without a browser, as described earlier. If you're wary about installing profiles on your iPhone, you can review the WebClip payload (HTML) that the shortcut uses here:
<?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>Base64 Encoded</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>Me</string>
<key>PayloadOrganization</key>
<string>Me</string>
<key>PayloadType</key>
<string>com.apple.webClip.managed</string>
<key>PayloadUUID</key>
<string>c3b2c123-6253-464e-afde-0d987400da0f</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>Me</string>
<key>PayloadOrganization</key>
<string>Me</string>
<key>PayloadRemovalDisallowed</key>
<false/>
<key>PayloadType</key>
<string>Configuration</string>
<key>PayloadUUID</key>
<string>345097fb-d4f7-4a34-ab90-2e3f1ad62eed</string>
<key>PayloadVersion</key>
<integer>1</integer>
</dict>
</plist>After you upload the app icon, you'll be redirected to Safari, where you'll be asked to allow a configuration profile to be downloaded to your iPhone. Hit "Allow," then tap "Close" when prompted.
Step 6: Install the Configuration Profile
The final step is to install the config profile you just downloaded. To do so, open Settings, and you should see a "Profile Downloaded" option near the top (it only appears when a profile needs to be installed). Tap that, and you can then preview the config profile. If you other Settings notifications, you will see "More for Your iPhone" instead. Tap that, and you'll see "Profile Downloaded."
If you don't see this quick link, go to "General," then "Profile" or "Profiles" to find and open the profile you downloaded.
You can see that it contains a web clip on the profile's description, just as we discussed earlier. Tap on "Install" in the top right, then enter your passcode when prompted.
The next page will show a message from the developer, which simply lays out the last few steps you took. Hit "Next" to continue, then tap "Install" in the top right, and then again at the bottom. Your profile is now installed.
Step 7: 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 App Library.
Find and tap on the newly created web clip app icon, and the website will open up in full-screen, with no navigation bars or other features obstructing your view.
However, if you tap around to go to other pages in the web clip, you'll see in-app nav bars on the top and bottom to access reader view, request desktop sites, view website settings, share the website, and open the page in Safari, 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 Safari view.
Removing the Web Clip & 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 –> Profiles (or Profile).
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, along with the web clip, will be deleted from your iPhone.
Keep Your Connection Secure Without a Monthly Bill. Get a lifetime subscription to VPN Unlimited for all your devices with a one-time purchase from the new Gadget Hacks Shop, and watch Hulu or Netflix without regional restrictions, increase security when browsing on public networks, and more.
Other worthwhile deals to check out:
0 comments:
Post a Comment