All of us visit certain websites more frequently than other sites. The best example is local news sites. We all read news on our own language mostly through the apps. Some local sites may not have an app or you don’t like to read content through the app. Generally it is difficult to stuff all content feed in an app and is necessary to visit the website to get relevant details. In such case, every time you need to open Safari and browse the site either by opening the URL or through favorites. Apple offers an easy way to save time by adding the webpage shortcut as an app in home screen to directly access the site. In this article we will explain how to add webpage as app in home screen of iPhone. The same process can be followed on any iOS devices like iPad.
Progressive Web Apps or PWA
Before proceeding further, you need to understand Progressive Web Apps or PWA. These are websites combined with mobile app features so that there is no need of a separate app. For example, there are no desktop apps for YouTube to install in Windows or Mac. However, you can install YouTube as an app using PWA feature and use the same way like other apps on your computer. Unfortunately, this PWA feature is not supported in iPhone Safari browser in a way it works in Google Chrome desktop browser. Good part is that you can use similar feature called “Add to Home Screen” which is also considered as PWA since it allows the website to work like an app.
Note that, Google Chrome also will not support installing website as an app in iPhone. It only works on desktop devices like Windows PC or Mac. Follow the below instructions to add website as an app in your iPhone home screen.
Step 1 – Open the Site in Safari
Let us take an example of Wikipedia. We love to open the home page of wikipedia.org for searching instead of the iOS app. Open the wikipedia.org page in Safari and tap on the “Share” icon showing in the bottom of the page.
Step 2 – Add Webpage to Home Screen
You will see all sharing options like AirDrop, contacts you have recently used and some options. Swipe up to view all options and tap on “Add to Home Screen”.
Step 3 – Enter Name for the App
The default page title will appear as the name for your app. You can leave it as it is or enter any name for the webpage shortcut icon that will appear as an app on your home screen.
Step 4 – Check the Icon
Now that you have done. Close the Safari app and check on your home screen, you should find the webpage icon added like any other app installed from App Store. This is a bookmark of the website and you can delete the app any time by tapping and holding on it and then selecting “Delete Bookmark” option.
If the webpage uses apple touch icon, it will be used as app icon on your iPhone. In certain cases, like WordPress site, the site icon or Favicon which is larger enough in size is used as app icon.
Step 5 – Open the Site as App
Tap the icon to open the webpage as an app. Though it looks the site works as an independent app, it actually opens in Safari browser. You can open multiple tabs and browse other sites in Safari after launching the website shortcut.
Why This is Helpful?
The major purpose of PWA is that it can be accessed offline and you should be able to view the pages that you have accessed previously without internet connection. However, adding to home screen does not work in iPhone in offline. Below are some of the advantages of adding websites to home screen:
- You no more need to launch Safari and enter the site address every time.
- It is possible to add any webpage shortcut to the home screen of your iPhone and quickly access the page.
How to Add Website to Home Screen with Google Chrome?
As mentioned, Apple does not support installing apps through browser and hence Google Chrome does not have this “Add to Home Screen” feature by default. However, you can use the Shortcuts app to create website shortcut and add in your home screen to open with Google Chrome instead of Safari.
- Open Shortcuts app and tap on + icon showing on top right corner of the app.
- On the next screen, tap on “Add Action” button to create a new shortcut action.
- Go to “Apps” tab and tap on Chrome.
- Select the first option showing as “Open URLs in Chrome”.
- Enter the site URL you want to add to home screen as an app.
- Tap on the icon showing on top left corner and select new icon for your app from the list of glyph showing in the list.
- If you do not want to change the app icon, just tap on the settings.
- Then tap on “Add to Home Screen” option showing under “Details” tab.
- Enter the name for your app and tap on “Add”.
- You will see an app on your home screen which is a bookmark shortcut. You can tap on the app to open the site in Chrome.