Fixes #37

README.md

@@ -28,10 +28,11 @@ You can watch it in action [here](https://panossakkos.github.io/personal-jekyll-
   * Disqus comments
   * Facebook, Twitter, Reddit, LinkedIn, Google+, Pinterest and VKontakte share buttons
   * RSS feed
-* Travis CI integration with [html-proofer](https://github.com/gjtorikian/html-proofer)
-* Protection from Email harvesting
-* Forcing of https protocol
 * Cool (anti-procrastinating) 404 page
+* [Android Web App mode](https://developer.chrome.com/multidevice/android/installtohomescreen)
+* Forcing of https protocol
+* Protection from Email harvesting
+* Travis CI integration with [html-proofer](https://github.com/gjtorikian/html-proofer)
 
 ## { Personal } à la JekyllNow
 
@@ -63,6 +64,8 @@ The theme contains documentation in the form of [blog posts](https://panossakkos
 ![Tags](https://dl.dropboxusercontent.com/u/8522559/personal-jekyll-theme/tags.jpg)
 ### 404
 ![404](https://dl.dropboxusercontent.com/u/8522559/personal-jekyll-theme/404.jpg)
+### Web App mode
+![Pinned](https://dl.dropboxusercontent.com/u/8522559/personal-jekyll-theme/pinned.jpg)
 
 ## How to run locally
 

_config.yml

@@ -28,6 +28,16 @@ pages_list:
   Timeline: 'timeline'
   Contact: 'contact'
 
+web-app-mode: True
+
+# Icons for Chrome Web App mode https://developer.chrome.com/multidevice/android/installtohomescreen
+icon-36p: "/img/web-app/icon-36p.png"
+icon-48p: "/img/web-app/icon-48p.png"
+icon-72p: "/img/web-app/icon-72p.png"
+icon-96p: "/img/web-app/icon-96p.png"
+icon-144p: "/img/web-app/icon-144p.png"
+icon-192p: "/img/web-app/icon-192p.png"
+
 #############
 # HTML Head #
 #############

_includes/head.html

@@ -44,6 +44,9 @@
   {% if site.favicon %}
     <link rel="shortcut icon" type="image/x-icon" href="{{site.baseurl}}{{site.favicon}}">
   {% endif %}
+  {% if site.web-app-mode %}
+    <link rel="manifest" href="{{site.baseurl}}/manifest.json">
+  {% endif %}
 </head>
 
 <!-- HEAD End -->

_posts/2015-06-22-web-app-mode.md

@@ -0,0 +1,33 @@
+---
+layout: post
+section-type: post
+title: Web app mode
+category: tech
+tags: [ 'tutorial']
+---
+You can make your website behave like a native web app in
+[Android](https://developer.chrome.com/multidevice/android/installtohomescreen)
+devices by setting the web-app-mode variable to True and providing links for the
+icons for each resolution:
+
+<pre style="text-align: left">
+web-app-mode: True
+
+# Icons for Chrome Web App mode https://developer.chrome.com/multidevice/android/installtohomescreen
+icon-36p: "/img/web-app/icon-36p.png"
+icon-48p: "/img/web-app/icon-48p.png"
+icon-72p: "/img/web-app/icon-72p.png"
+icon-96p: "/img/web-app/icon-96p.png"
+icon-144p: "/img/web-app/icon-144p.png"
+icon-192p: "/img/web-app/icon-192p.png"
+</pre>
+
+This is how the website will look when added to the homescreen:
+
+![Pinned](https://dl.dropboxusercontent.com/u/8522559/personal-jekyll-theme/pinned.jpg)
+
+And when the user opens it (note that it renders in fullscreen):
+
+![Web App](https://dl.dropboxusercontent.com/u/8522559/personal-jekyll-theme/web-app.jpg)
+
+<small>iOS Web App support is on [its](https://github.com/PanosSakkos/personal-jekyll-theme/issues/88) way</small>

manifest.json

@@ -0,0 +1,46 @@
+---
+---
+
+{
+  "name": "{{site.title}}",
+  "icons": [
+    {
+      "src": "{{site.baseurl}}{{site.icon-36p}}",
+      "sizes": "36x36",
+      "type": "image/png",
+      "density": 0.75
+    },
+    {
+      "src": "{{site.baseurl}}{{site.icon-48p}}",
+      "sizes": "48x48",
+      "type": "image/png",
+      "density": 1.0
+    },
+    {
+      "src": "{{site.baseurl}}{{site.icon-72p}}",
+      "sizes": "72x72",
+      "type": "image/png",
+      "density": 1.5
+    },
+    {
+      "src": "{{site.baseurl}}{{site.icon-96p}}",
+      "sizes": "96x96",
+      "type": "image/png",
+      "density": 2.0
+    },
+    {
+      "src": "{{site.baseurl}}{{site.icon-144p}}",
+      "sizes": "144x144",
+      "type": "image/png",
+      "density": 3.0
+    },
+    {
+      "src": "{{site.baseurl}}{{site.icon-192p}}",
+      "sizes": "192x192",
+      "type": "image/png",
+      "density": 4.0
+    }
+  ],
+  "start_url": "{{site.baseurl}}",
+  "display": "standalone"
+}