diff --git a/README.md b/README.md index df2682c..f57f173 100755 --- a/README.md +++ b/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  ### 404  +### Web App mode + ## How to run locally diff --git a/_config.yml b/_config.yml index 5be490f..3f97af8 100755 --- a/_config.yml +++ b/_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 # ############# diff --git a/_includes/head.html b/_includes/head.html index 6f2762a..d88aa78 100755 --- a/_includes/head.html +++ b/_includes/head.html @@ -44,6 +44,9 @@ {% if site.favicon %} {% endif %} + {% if site.web-app-mode %} + + {% endif %} diff --git a/_posts/2015-06-22-web-app-mode.md b/_posts/2015-06-22-web-app-mode.md new file mode 100644 index 0000000..a704183 --- /dev/null +++ b/_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: + +
+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" ++ +This is how the website will look when added to the homescreen: + + + +And when the user opens it (note that it renders in fullscreen): + + + +iOS Web App support is on [its](https://github.com/PanosSakkos/personal-jekyll-theme/issues/88) way diff --git a/img/web-app/icon-144p.png b/img/web-app/icon-144p.png new file mode 100644 index 0000000..5a35388 Binary files /dev/null and b/img/web-app/icon-144p.png differ diff --git a/img/web-app/icon-192p.png b/img/web-app/icon-192p.png new file mode 100644 index 0000000..4047ad4 Binary files /dev/null and b/img/web-app/icon-192p.png differ diff --git a/img/web-app/icon-36p.png b/img/web-app/icon-36p.png new file mode 100644 index 0000000..b159f0f Binary files /dev/null and b/img/web-app/icon-36p.png differ diff --git a/img/web-app/icon-48p.png b/img/web-app/icon-48p.png new file mode 100644 index 0000000..7a422b5 Binary files /dev/null and b/img/web-app/icon-48p.png differ diff --git a/img/web-app/icon-72p.png b/img/web-app/icon-72p.png new file mode 100644 index 0000000..63175aa Binary files /dev/null and b/img/web-app/icon-72p.png differ diff --git a/img/web-app/icon-96p.png b/img/web-app/icon-96p.png new file mode 100644 index 0000000..215d19d Binary files /dev/null and b/img/web-app/icon-96p.png differ diff --git a/manifest.json b/manifest.json new file mode 100644 index 0000000..45dc649 --- /dev/null +++ b/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" +}