With the development of websites, the concept of a ‘web application’ has emerged – a site that resembles a full-fledged application in terms of functionality and appearance, and may not use page reloading to update content (in the case of PWAs), but it still requires a network connection (most often). Such sites may be frequently used by smartphone users, which creates the need to constantly search for them in Safari or Chrome bookmarks. But this is inconvenient and in order to always have access to such a site, companies have created the concept of Web App.
Web App is a web application that we have added to the home screen of a smartphone, tablet or PC and it opens not in a browser, but in a separate window (which is still a browser, just without tabs).
In general terms, it looks like this:
In the screenshot from the iPad, you can see that the site is opened in a separate window and is not interfered with by the top and bottom bars of the browser.
So how do you do this with your site? Easier than you might think.
These are instructions on how to create a Web App from a website.
You can also create a full-fledged application from a website with the ability to upload it to AppStore and Google Play, more about it in another article
Creating Web App
To begin with, we will need a manifest. It is with its help that the operating system considers that our site supports this display mode and uses the settings that we will specify. Only two lines will be enough for the base itself:
{
"name": "MihailGok",
"display": "standalone"
}display – selects how the site will be displayed. standalone means that the site will be opened without a browser.name – default signature under the icon, but the user can always change it.
Save the file in the root of the site directory in manifest.json file. And then plug it into the head:
<link rel="manifest" href="manifest.json">Done! Your site can now be added as a separate application.
As additional parameters you can specify a start page, using the start_url key, as well as a ‘space’ (scope key) – in it all links will open as in the application, followed by the default browser:
Adding a site to the home screen
You can check this with some simple steps (it is better to clear the browser cache or go in ‘incognito’ mode):
1) Go to the site and click ‘Share’
2) Select ‘On Home screen’.
3) Here we see the name that we can change. If everything is satisfactory, click ‘Add’
As a result, we get this icon on the lock screen:
And the site now opens in a separate window (if everything is done correctly in the manifest section).