adding manifest for progressive web apps

.editconfig

@@ -0,0 +1,20 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+[*]
+
+# Change these settings to your own preference
+indent_style = space
+indent_size = 2
+
+# We recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

CONFIGURATION.md

@@ -158,7 +158,7 @@ Here is a simple view of what you can configure:
 * menu
     * exposeAsideWhen
     * list
-	* logo
+    * logo
 * settings
 * cache
     * views

INSTALLATION.md

@@ -42,11 +42,6 @@ During the installation you might have the following error on OSX:
 
 ## Config files
 
-```
-# Copy local config
-npm run installWPHC
-```
-
 Your personal config files live now in the `config` folder. You can modify all of them except `config.default.cson` which contains the default config that can be overwritten using `config/config.cson`
 
 ## Installing the Web service

README.md

@@ -78,7 +78,7 @@ $ git tag
 $ git checkout <the-latest-version>
 
 # Install
-$ npm install && npm run installWPHC
+$ npm install
 
 # Run on the browser
 $ npm start
@@ -123,6 +123,9 @@ Read the manual: [SPLASHICONS.md](SPLASHICONS.md)
 ## Project public API
 
 ```
+# Installation
+npm run installWPHC (auto ran post npm install)
+
 # Dev server
 npm start
 

config/config.default.cson

@@ -49,7 +49,7 @@
         "state": "public.posts"
         "params": {}
     "exposeAsideWhen": "(min-width:900px)"
-    "logo": "/config/logo.png" # null will disable
+    "displayIcon": true # uses config/icons/icon_48.png
 
 # SETTINGS PAGE
 "settings":

dist/index.js

@@ -1,4 +1,11 @@
 import templates from './templates/index.js';
+import './icons/icon_48.png';
+import './icons/icon_72.png';
+import './icons/icon_96.png';
+import './icons/icon_144.png';
+import './icons/icon_168.png';
+import './icons/icon_192.png';
+import '!file?name=[name].[ext]!./manifest.webmanifest';
 
 let mod = angular.module('wordpress-hybrid-client.overwriteModule', [
     templates

dist/manifest.webmanifest

@@ -0,0 +1,43 @@
+{
+    "name": "Your App Name (45 characters max)",
+    "short_name": "Your App",
+    "description": "Your App description",
+    "default_locale": "en",
+    "start_url": "index.html",
+    "display": "standalone",
+    "lang": "en-US",
+    "icons": [
+        {
+            "src": "img/icon_48.png",
+            "sizes": "48x48",
+            "type": "image/png"
+        },
+        {
+            "src": "img/icon_72.png",
+            "sizes": "72x72",
+            "type": "image/png"
+        },
+        {
+            "src": "img/icon_96.png",
+            "sizes": "96x96",
+            "type": "image/png"
+        },
+        {
+            "src": "img/icon_144.png",
+            "sizes": "144x144",
+            "type": "image/png"
+        },
+        {
+            "src": "img/icon_168.png",
+            "sizes": "168x168",
+            "type": "image/png"
+        },
+        {
+            "src": "img/icon_192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        }
+    ],
+    "background_color": "#4e8ef7",
+    "theme_color": "#4e8ef7"
+}

lib/index.coffee

@@ -126,7 +126,7 @@ app.controller 'WPHCMainController' , ($log, $WPHCConfig) ->
     vm.appVersion = wordpressHybridClient.version || null
     vm.appConfig = $WPHCConfig
     vm.appTitle = vm.appConfig.title || null
-    vm.appLogo = vm.appConfig.menu.logo || null
+    vm.displayIcon = vm.appConfig.menu.displayIcon
     vm
 
 ###

lib/index.html

@@ -7,6 +7,7 @@
         <meta http-equiv="Content-Security-Policy" content="default-src * gap://ready file:; img-src * 'self' 'unsafe-inline' 'unsafe-eval' data: blob: filesystem:; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
 
         <title>{%=o.htmlWebpackPlugin.options.pkg.title %}</title>
+        <link rel="manifest" href="/manifest.webmanifest">
         <script>
             var wordpressHybridClient = {};
             wordpressHybridClient.version = "{%= o.htmlWebpackPlugin.options.appVersion %}";

lib/scss/_bar.scss

@@ -1,7 +1,13 @@
+$logoSize : $bar-height - (2 * $bar-padding-portrait);
 .bar {
 
 }
-.bar-logo{
-	width:42px;
-	height:42px;
+.menu-bar.has-icon{
+	.icon{
+		width: $logoSize;
+		height:  $logoSize;
+	}
+	.title{
+		margin-left: $logoSize + 10;
+	}
 }

lib/templates/module/menu.html

@@ -1,7 +1,7 @@
-<ion-header-bar class="bar-positive">
-	<div ng-if="::main.appLogo" class="bar-logo" wphc-img-background-cache="{{::main.appLogo}}"></div>	
-    <h1 class="title">{{main.appTitle}}</h1>
+<ion-header-bar class="bar-positive menu-bar" ng-class="::{'has-icon': main.displayIcon}">
+	<img ng-if="::main.displayIcon" class="icon" ng-src="img/icon_48.png" />
+	<h1 class="title">{{main.appTitle}}</h1>
 </ion-header-bar>
 <ion-content>
-    <wphc-menu list="menuCtrl.list"></wphc-menu>
-</ion-content>
+	<wphc-menu list="menuCtrl.list"></wphc-menu>
+</ion-content>

package.json

@@ -7,6 +7,7 @@
   "scripts": {
     "build": "bash ./release.sh",
     "restore": "ionic state restore",
+    "postinstall": "npm run installWPHC",
     "installWPHC": "cd scripts && node ./install.js",
     "increaseVersion": "cd scripts && node ./increaseVersion.js",
     "start": "webpack-dev-server --port 8080 --json --progress",

scripts/install.js

@@ -8,7 +8,8 @@ copy('../dist/config.xml', '../config.xml');
 copy('../dist/config.scss', '../config/config.scss');
 copy('../dist/index.js', '../config/index.js', true);
 copy('../dist/templates', '../config/templates');
-copy('../dist/logo.png', '../config/logo.png', true);
+copy('../dist/icons', '../config/icons');
+copy('../dist/manifest.webmanifest', '../config/manifest.webmanifest');
 copy('../release.sh.dist', '../release.sh');
 
 function copy(source, target, overwrite) {