Website as Android app via Progressive Web App

Android is developed by Google. Chrome is developed by Google. Both were combined by Google. The result is called “Progressive Web App” and opens up the world of (simple) app development to web devs.

How did I do it?

  1. Setup HTTPS. My smarthome already has HTTPS, so I could skip this step.
  2. Setup a service worker for your site. What’s a service worker? Long story short, it makes your site load even when offline by caching necessary things. The link is much more detailed.
  3. Setup a manifest.json file:
<meta name="manifest" content="/path/to/your/manifest.json">

{
  "short_name": "control@lutan",
  "name": "lutan.systems main control",
  "icons": [
    {
      "src": "/Assets/gfx/logoSquared.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/",
  "background_color": "#FFFFFF",
  "display": "standalone",
  "theme_color": "#65229C"
}

This is my manifest.json. Follow this link for more details, but the options are pretty much explaining themselves.

Note: You need at least one square icon at 144×144 or bigger. Also, the start_url defined in your manifest must be one of the URLs cached by your service worker.

That’s almost it. Navigate to your website, then let the Lighthouse addon for Chrome check everything for you. On the generated report you’ll also see a bunch of optional things you might want to consider, but don’t necessarily need. This paragraphs helps you check your manifest file in detail.

You’re now ready to access your page as a native app. For me, I went to the options tab and clicked “Add to homescreen”, though that may vary from device to device.

To be fair, you won’t be getting all the fancy features a native app has, at least not yet. It’s mostly just a fullscreen browser for your page with an additional extra splash screen. But if your page is already responsive, there’s no reason to not give your user the chance to opt in on a more thorough experience.

For me at least, this feels cleaner and is much more fun than using a browser.