قالب وردپرس درنا توس
Home / Tips and Tricks / Turn any website into a full screen app on your iPhone «iOS & iPhone :: Gadget Hacks

Turn any website into a full screen app on your iPhone «iOS & iPhone :: Gadget Hacks



Not all websites need a dedicated mobile app, which is why many don’t. Web apps are now designed to scale to the size of your screen, so the mobile versions of desktop sites in your web browser are simple enough to navigate and use. 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 any webpage, click “Add to Home Screen”, then select “Add”. That will give you a home screen icon that looks just like other app icons, but is just a shortcut to the chosen web page.

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 look of the status bar 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̵

7;s faster 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 go to Shortcuts. The shortcut we’ll be using will create a WebClip device management profile that you install on your iPhone. With the profile, any site you set up opens the URL as a full screen web app – without any browser – so there’s no URL or search bar and no toolbar at the bottom.

It’s still technically bookmarked but won’t open as a tab in your normal Safari session. Best of all, it renders the website in full screen, taking advantage of your full view and eliminating the distractions that normally appear in Safari and other web browsers.

Obligated

  • 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 is pre-installed on your iPhone, but if you uninstalled it, you can reinstall it from the App Store.
  • Allow untrusted shortcuts: Go to Settings -> Shortcuts and enable “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. 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. Unlike a regular bookmark, the website does not open in Safari, but appears in its own full screen window, like regular native standalone apps.

Use the iCloud link above or go to RoutineHub to download the shortcut. You will be automatically redirected to shortcuts, but if you are 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 web page

Before running the shortcut, go to Safari or your favorite 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 of course skip this step. It’s good to only do this for sites you use often that don’t yet have a native iOS app or an optimized “Add to Home Screen” bookmark interface.

As an example, I’ll be creating 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 through the “Add to Home Screen” action, the shortcut we’re using here won’t, 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 download a photo from the web or use an existing image. A square sized image works best for a perfect fit, but the shortcut will automatically crop longer shaped images.

I am using the official Gadget Hacks logo for my web clip’s app icon.

Step 4: Start ‘URL app’ to build the profile

Now go to “My Shortcuts” in shortcuts and run the shortcut “URL app”; it’s the card named ‘Create app from URL’. First enter the name you see below the app icon on your home screen, then click Done.

Second, type or paste the website URL you copied earlier and click “Done” again.

Third, the shortcut will ask you to access your Photos app. Give it permission and then choose the image you want to upload as your app icon from the photo browser 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 will never appear in the App Store. The “URL app” shortcut uses the same method to convert your URL into a web clip without a browser, as described earlier. If you’re wary of installing profiles on your iPhone, you can check out the WebClip (HTML) payload that the shortcut uses here:





ConsentText

default
Choose 'Install' and enter passcode if prompted.

 PayloadContent
 
   
     FullScreen
     
     Icon
     Base64 Encoded
     IsRemovable
     
     Label
     Name
     PayloadDescription
     Turn any website into an app on your home screen
     PayloadDisplayName
     Web Clip (Name)
     PayloadIdentifier
     Me
     PayloadOrganization
     Me
     PayloadType
     com.apple.webClip.managed
     PayloadUUID
     c3b2c123-6253-464e-afde-0d987400da0f
     PayloadVersion
     1
     Precomposed
     
     URL
     URL
   
 
 PayloadDescription
 Turn any website into an app on your home screen
 PayloadDisplayName
 Name
 PayloadIdentifier
 Me
 PayloadOrganization
 Me
 PayloadRemovalDisallowed
 
 PayloadType
 Configuration
 PayloadUUID
 345097fb-d4f7-4a34-ab90-2e3f1ad62eed
 PayloadVersion
 1

After uploading the app icon, you will be redirected to Safari, where you will be prompted to download a configuration profile to your iPhone. Hit “Allow” and then tap “Close” when prompted.

Step 6: Install the configuration profile

The last step is to install the configuration profile you just downloaded. To do this, open Settings, and you should see a “Profile Downloaded” option at the top (it only appears when a profile needs to be installed). Tap that and you can preview the configuration profile. If you see other settings notifications, you will see “More for your iPhone” instead. Tap on that and you will see “Profile Downloaded”.

If you don’t see this quick link, go to “General” and then to “Profile” or “Profiles” to find and open the profile you downloaded.

You can see it contains a web clip about the profile description, just like we discussed earlier. Tap “Install” in the top right, then enter your passcode when prompted.

The next page displays a message from the developer, simply describing the last few steps you took. Click “Next” to continue, then tap “Install” in the top right corner and then again at the bottom. Your profile is now installed.

Step 7: Open your new standalone web clip app

Your new web clip app will appear on your home screen. If you have set iOS to push new app installs to your app library without touching the home screen, you will still see this web clip app on your home screen as it is not a native app. However, you can still open the web clip from the App library.

Find and tap the newly created web clip app icon and the website will open 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 will see in-app navigation bars at the top and bottom to access the reader view, request desktop sites, view website settings, share the website and the page in Safari, just as you would in other in-app web browsers. If you swipe up or down, the navigation bars disappear. This is a limitation of web clips for iOS as external links open in a Safari view.

Delete the web clip and profile

Let’s say you no longer want the web clip app and want to delete it. Simply removing the app icon from your home screen is not enough as the configuration profile will persist in your settings. To delete both the app and the profile, go to Settings -> General -> Profiles (or Profile).

Then tap the profile and tap “Delete Profile”. You will be asked to enter your passcode. Finally, tap “Delete” when it appears, and the profile, along with the web clip, will be deleted from your iPhone.

Keep your connection safe without a monthly billGet 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 with no regional restrictions, increase security when browsing public networks and more.

Buy now (80% discount)>

Other worthwhile deals to check out:

Cover photo and screenshots by Nelson Aguilar / Gadget Hacks

Source link