watchmis.com has always been a responsive website.  Now it also became an installable web application.

Choose 'Add to Homescreen' in Chrome and a launcher icon will be added to the Homescreen. When you click on the launcher icon the web app will run in full screen mode, very similar to a native mobile application.

How it was made:


1. Created a simple icon in Inkscape and exported is as a 144x144 png. The icon is shown on the Home Screen of the device and in the center of the splash screen:

2. Added a manifest.json file to the /static/ folder of the Django project:

{
  "name": "Find the perfect watch on Amazon",
  "short_name": "Amazon Watches",
  "icons": [
    {
      "src": "/static/manifest/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"    },
    {
      "src": "/static/manifest/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"    },
    {
      "src": "/static/manifest/icon_144_144.png",
      "sizes": "144x144",
      "type": "image/png"    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"}

3. Added a linktag to serve the manifest:

<link rel="manifest" href="{% static 'manifest/manifest.json' %}" />