Progressive Web App

It is possible to install a website as an app on your android phone. From the three dots, choose Add to Home screen. This will basically create a link to your web app.

By making your web site a PWA you will make the installation easier and nicer for your user. When you choose the Add to Home screen, it will automatically suggest a short name and give it a nice icon.

Attention: You don’t have to make your site a Progressive Web App

Lighthouse will be your guide

As mentioned in website performance you can use Lighthouse to check your website.

Lighthouse will also check if your site is installable and PWA optimized.

Attention: This guide is just to get you started. I will not get into Service Workers. Keep it simple.

Header tags

The following is part of the header for this website.

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="theme-color" content="#ffffff"/>
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="mobile-web-app-capable" content="yes">
  <link rel="canonical" href="{{ site.url }}{{ page.url | replace:'index.html',''}}">
  {%- seo -%}
  <link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}">

    ...

  {%- feed_meta -%}
  {%- if jekyll.environment == 'production' and site.google_analytics -%}
    {%- include google-analytics.html -%}
  {%- endif -%}
  <link rel="manifest" href="/manifest.json">

</head>

Manifest file

And the following is the manifest.json for this project.

{
    "name": "Finn Pedersen's Blog",
    "short_name": "Finn's Blog",
    "display": "browser",
    "orientation": "any",
    "start_url": "/",
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "description": "A blog about technology and programming.",
    "icons": [
        {
            "src": "assets/maskable_icon_x512.png",
            "sizes": "512x512",
            "type": "image/png",
            "purpose": "any maskable"
        },
        {
            "src": "assets/maskable_icon_x384.png",
            "sizes": "384x384",
            "type": "image/png",
            "purpose": "any maskable"
        },
        {
            "src": "assets/maskable_icon_x192.png",
            "sizes": "192x192",
            "type": "image/png",
            "purpose": "any maskable"
        },
        {
            "src": "assets/maskable_icon_x128.png",
            "sizes": "128x128",
            "type": "image/png",
            "purpose": "any maskable"
        },
        {
            "src": "assets/maskable_icon_x96.png",
            "sizes": "96x96",
            "type": "image/png",
            "purpose": "any maskable"
        },
        {
            "src": "assets/maskable_icon_x72.png",
            "sizes": "72x72",
            "type": "image/png",
            "purpose": "any maskable"
        },
        {
            "src": "assets/maskable_icon_x48.png",
            "sizes": "48x48",
            "type": "image/png",
            "purpose": "any maskable"
        }
    ]
}

Icons

I used this web app to make the icons: maskable.app