# Progressive Web App (Web Development)

_Published: 2023-11-29 · Author: Finn_

## 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](/technology/2023/11/29/website-performance.html)
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.

````html

<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.

````json
{
    "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](https://maskable.app/)

---

[View the normal web page](https://www.finnpedersenfrance.com/technology/2023/11/29/progressive-web-app.html)