We will use Chrome on Mac, Windows, Android and use Safari on iPhone.
Installation on Mac
Installation on Windows
Installation on iPhone
Installation on android
How make a website installable
To make the website installable, it needs the following things in place:
A web manifest, with the correct fields filled in
The website to be served from a secure(HTTPS) domain
An icon to represent the app on the device
The key element is a web manifest file, which lists all the information about the website in a JSON.
We can create a file named manifest.json. It should be included in the <head> section of the index.html file via the following line of code:
The content of the file looks like this:
"description": "An App that displays the mark cap rankings, price, details and more for the top 100 larget crytocurrencies based on overall market cap.",
let's break down the document and explain them in detail:
name: The full name of your webapp
short_name: Short name to be shown on the home screen
description: A sentence or two explaining what your app does
icons: A bunch of icon information, source URLs, sizes and types. Be sure to include at least a few, so that one that files best will be chosen for the user's device.
start_url: The index document to launch when starting the app
display: How the app is displayed: can be fullscreen, shandalone, minimal-ui, or browser
background_color: A color for background, used during install and on the splash screen
theme_color: A primary color for the UI, used by operating system
The bare minimum requirement for a web manifest is name and at least one icon (with src, size and type). The description, short_name and start_url and recommended.
Installable is a very cool feature which makes your website look like a native app. Even though, it's not supportted by all browsers now, I think it will become more and more popular in the future.
If you want to learn more about PWA, the MDN web docs is a good place.