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' %}" />
Tested on iOS? Does work same as on Android?
ReplyDeleteafaik there no iOS support yet
Delete