Half arsed PWA

I’ve been playing around creating a new web app for a bit of fun but it wasn’t looking so good on mobile. Using features provided by Chrome like pinnning the app to the home screen didn’t provide a customised experience. Other visual clues that could have been improved included:

• Some colour theming to make the app look more native
• Getting rid of the browser controls at the top of the app

To use some Progressive Web App features so Chrome (and other browsers) could make the web app look better I did the following:

In the head tag added:

<meta name="theme-color" content="#007BFF">
<link rel="shortcut icon" type="image/jpg" href="/icon.png"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon" href="/icon.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="manifest" href="/manifest.json">

creted the related manifest.json containing the following

{
  "short_name": "MyWebApp",
  "name": "MyWebApp",
  "icons": [
    {
      "src":"/icon.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "background_color": "#007BFF",
  "theme_color": "#007BFF",
  "display": "standalone"
}