Merge branch 'release/2.0.0-beta13'

.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

CHANGELOG.md

@@ -16,6 +16,16 @@
 * [CONFIG] There is no more dev/prod distinction, WPHC turn debug OFF when building the prod app automatically.
 * [ABOUT] The About feature has been removed. You can use Pages to achieve the same purpose.
 
+<a name="2.0.0-beta13"></a>
+### 2.0.0-beta13 (2016-10-22)
+
+To upgrade checkout `git checkout v2.0.0-beta13` and run `npm i`
+
+* [FEATURE] Display app icon in the menu header <https://github.com/shprink/wordpress-hybrid-client/issues/5>
+* [FEATURE] Progressive Web App support (Manifest & service workers)
+* Remove share button on browser
+
+
 <a name="2.0.0-beta12"></a>
 ### 2.0.0-beta12 (2016-09-18)
 

CONFIGURATION.md

@@ -81,6 +81,16 @@ For instance if you want to modify the way the menu is displayed, you will need
 
 After that you will need to register your new template in `lib/templates/index.js` (read the comments for help)
 
+## Service Workers (Experimental)
+
+WPHC supports progressive web apps. When [enabled](#serviceWorker) make sure you modify `config/manifest.json` with your own app informations (title, description etc.) and overwrite all the icons in `config/icons`.
+
+PWA requires a HTTPS connection, make sure to have an SSL certificate.
+
+Chrome dev tools allow you to test the "add to homescreen" feature on the browser.
+
+![image](https://cloud.githubusercontent.com/assets/1388706/19619167/740031b0-9860-11e6-9ca0-ebb5bb9bb152.png)
+
 ## Frequently asked questions
 
 ### How to change the font
@@ -151,13 +161,15 @@ Here is a simple view of what you can configure:
 
 * title
 * ionicConfig
+* serviceWorker
 * api
     * baseUrl
     * timeout
     * maxAttempt
 * menu
     * exposeAsideWhen
     * list
+    * logo
 * settings
 * cache
     * views
@@ -204,13 +216,15 @@ allow overwriting ionic configuration <http://ionicframework.com/docs/api/provid
 
 Setting ```null``` will keep ionic default value.
 
-### menu [Object]
+<a name="serviceWorker"></a>
+### serviceWorker [Object]
 
-The media query used to determine when to always display the left menu.
+* ***enabled***    ```Boolean```    Experiemental. default `false`
 
-```
-"exposeAsideWhen": "(min-width:900px)"
-```
+### menu [Object]
+
+* ***exposeAsideWhen***     ```String```    The media query used to determine when to always display the left menu, default `(min-width:900px)`
+* ***displayIcon***         ```Boolean```   whether or not to display the icon on the menu header. default `true`, to modify the icon overwrite `config/icons/icon_48.png`
 
 ### Settings configuration.
 

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

PUSHNOTIFICATIONS.md

@@ -105,3 +105,9 @@ The register http request fails with this message: `{error: "401", reason: "Unau
 Why am I getting the errors `{Unable to connect to tls://gateway.sandbox.push.apple.com:2195}` or `{Unable to connect to tsl://gateway.push.apple.com:2195}`?
 
 [Solution](http://stackoverflow.com/questions/1444355/iphone-push-notification-unable-to-connect-to-the-ssl-server)
+
+### Param tells me that I am not registered
+
+If the "enabled" checkbox on the push notif parameters (in app) is never on. It could mean that the following checkboxes are not checked. Please check at least `category` to resolve the problem.
+
+![image](https://cloud.githubusercontent.com/assets/1388706/19411490/f5f52170-9302-11e6-9f31-28f9a97da691.png)

README.md

@@ -30,6 +30,7 @@
 - [X] Syntax highlighter
 - [X] Offline (Bookmarks)
 - [X] Comments (Submitting is not supported yet)
+- [X] Progressive Web App (manifest & Service Workers)
 
 ## Built with WPHC
 
@@ -78,7 +79,7 @@ $ git tag
 $ git checkout <the-latest-version>
 
 # Install
-$ npm install && npm run installWPHC
+$ npm install
 
 # Run on the browser
 $ npm start
@@ -123,6 +124,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

@@ -15,6 +15,9 @@
     "timeout": 30000
     "maxAttempt": 3
 
+"serviceWorker":
+    "enabled" : false
+
 # IONIC
 "ionicConfig":
     "views":
@@ -49,6 +52,7 @@
         "state": "public.posts"
         "params": {}
     "exposeAsideWhen": "(min-width:900px)"
+    "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.json';
 
 let mod = angular.module('wordpress-hybrid-client.overwriteModule', [
     templates

dist/manifest.json

@@ -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/directives/postToolbar/index.js

@@ -19,8 +19,9 @@ export default function() {
         var vm = this;
         vm.isBookmarked = $WPHCBookmark.isBookmarked(vm.post);
         vm.hasBookmark = angular.isDefined($attrs.showBookmark);
-        vm.hasShare = angular.isDefined($attrs.showShare);
-        vm.terms = vm.post._embedded['https://api.w.org/term'];
+        vm.hasShare = angular.isDefined($attrs.showShare) && ionic.Platform.isWebView();
+        vm.terms = vm.post._embedded['https://api.w.org/term']
+            || vm.post._embedded['wp:term'];
         vm.showTaxonomies = showTaxonomies;
         vm.share = share;
         vm.bookmark = bookmark;

lib/index.coffee

@@ -10,6 +10,7 @@ require './font/font.coffee'
 require 'expose?_!lodash'
 require 'wp-api-angularjs'
 require './config.js'
+require '!file?name=[name].[ext]!./service-worker.js';
 overwriteModule = require '../config/index.js'
 customPostsModule = require './customPosts/index.js'
 pagesModule = require './pages/index.js'
@@ -126,6 +127,7 @@ app.controller 'WPHCMainController' , ($log, $WPHCConfig) ->
     vm.appVersion = wordpressHybridClient.version || null
     vm.appConfig = $WPHCConfig
     vm.appTitle = vm.appConfig.title || null
+    vm.displayIcon = vm.appConfig.menu.displayIcon
     vm
 
 ###

lib/index.html

@@ -7,10 +7,20 @@
         <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.json">
         <script>
             var wordpressHybridClient = {};
             wordpressHybridClient.version = "{%= o.htmlWebpackPlugin.options.appVersion %}";
         </script>
+        {% if (o.htmlWebpackPlugin.options.serviceWorkerEnabled) { %}
+        <script>
+            if ('serviceWorker' in navigator) {
+                navigator.serviceWorker.register('service-worker.js')
+                    .then(() => console.log('service worker installed'))
+                    .catch(err => console.log('Error', err));
+            }
+        </script>
+        {% } %}
         <!-- cordova script (this will be a 404 during development) -->
         <script src="cordova.js"></script>
     </head>

lib/scss/_bar.scss

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

lib/scss/_post.scss

@@ -162,4 +162,5 @@ wphc-post {
         }
     }
     @include post-item("../img/post-img-border.png");
+
 }

lib/service-worker.js

@@ -0,0 +1,80 @@
+// tick this to make the cache invalidate and update
+const CACHE_VERSION = 1;
+const CURRENT_CACHES = {
+  'read-through': 'read-through-cache-v' + CACHE_VERSION
+};
+
+self.addEventListener('activate', (event) => {
+  // Delete all caches that aren't named in CURRENT_CACHES.
+  // While there is only one cache in this example, the same logic will handle the case where
+  // there are multiple versioned caches.
+  const expectedCacheNames = Object.keys(CURRENT_CACHES).map((key) => {
+    return CURRENT_CACHES[key];
+  });
+
+  event.waitUntil(
+    caches.keys().then((cacheNames) => {
+      return Promise.all(
+        cacheNames.map((cacheName) => {
+          if (expectedCacheNames.indexOf(cacheName) === -1) {
+            // If this cache name isn't present in the array of "expected" cache names, then delete it.
+            console.log('Deleting out of date cache:', cacheName);
+            return caches.delete(cacheName);
+          }
+        })
+      );
+    })
+  );
+});
+
+// This sample illustrates an aggressive approach to caching, in which every valid response is
+// cached and every request is first checked against the cache.
+// This may not be an appropriate approach if your web application makes requests for
+// arbitrary URLs as part of its normal operation (e.g. a RSS client or a news aggregator),
+// as the cache could end up containing large responses that might not end up ever being accessed.
+// Other approaches, like selectively caching based on response headers or only caching
+// responses served from a specific domain, might be more appropriate for those use cases.
+self.addEventListener('fetch', (event) => {
+
+  event.respondWith(
+    caches.open(CURRENT_CACHES['read-through']).then((cache) => {
+      return cache.match(event.request).then((response) => {
+        if (response) {
+          // If there is an entry in the cache for event.request, then response will be defined
+          // and we can just return it.
+
+          return response;
+        }
+
+        // Otherwise, if there is no entry in the cache for event.request, response will be
+        // undefined, and we need to fetch() the resource.
+        console.log(' No response for %s found in cache. ' +
+          'About to fetch from network...', event.request.url);
+
+        // We call .clone() on the request since we might use it in the call to cache.put() later on.
+        // Both fetch() and cache.put() "consume" the request, so we need to make a copy.
+        // (see https://fetch.spec.whatwg.org/#dom-request-clone)
+        return fetch(event.request.clone()).then((response) => {
+
+          // Optional: add in extra conditions here, e.g. response.type == 'basic' to only cache
+          // responses from the same domain. See https://fetch.spec.whatwg.org/#concept-response-type
+          if (response.status < 400 && response.type === 'basic') {
+            // We need to call .clone() on the response object to save a copy of it to the cache.
+            // (https://fetch.spec.whatwg.org/#dom-request-clone)
+            cache.put(event.request, response.clone());
+          }
+
+          // Return the original response object, which will be used to fulfill the resource request.
+          return response;
+        });
+      }).catch((error) => {
+        // This catch() will handle exceptions that arise from the match() or fetch() operations.
+        // Note that a HTTP error response (e.g. 404) will NOT trigger an exception.
+        // It will return a normal response object that has the appropriate error code set.
+        console.error('  Read-through caching failed:', error);
+
+        throw error;
+      });
+    })
+  );
+});

lib/templates/module/menu.html

@@ -1,6 +1,7 @@
-<ion-header-bar class="bar-positive">
-    <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>