Merge pull request #18 from delapuente/proof-of-concept

Added instructions for Chrome and adding the manifest to provide a st…

.gitignore

@@ -1,4 +1,3 @@
 tools/
-wp-app-manifest.zip
-wp-app-manifest/composer.lock
-wp-app-manifest/vendor/
+wp-add-to-homescreen/composer.lock
+wp-add-to-homescreen/vendor/

wp-add-to-homescreen/class-wp-add-to-homescreen-plugin.php

@@ -1,6 +1,7 @@
 <?php
 
 // TODO: Load manifest plugin
+include_once(plugin_dir_path(__FILE__) . 'vendor/marco-c/wp-web-app-manifest-generator/WebAppManifestGenerator.php');
 
 class WP_Add_To_Homescreen_Plugin {
     private static $instance;
@@ -23,6 +24,7 @@ class WP_Add_To_Homescreen_Plugin {
     private function __construct() {
         $plugin_main_file = plugin_dir_path(__FILE__) . 'wp-add-to-homescreen.php';
         $this->set_urls();
+        $this->generate_manifest();
         add_action('wp_enqueue_scripts', array($this, 'enqueue_assets'));
         register_activation_hook($plugin_main_file, array($this, 'activate'));
         register_deactivation_hook($plugin_main_file, array($this, 'deactivate'));
@@ -37,6 +39,21 @@ class WP_Add_To_Homescreen_Plugin {
         $this->add2home_style = plugins_url('/lib/css/style.css', __FILE__);
     }
 
+    private function generate_manifest() {
+        $manifest = WebAppManifestGenerator::getInstance();
+        $manifest->set_field('name', get_bloginfo('name'));
+        $manifest->set_field('display', 'standalone');
+        $manifest->set_field('orientation', 'portrait');
+        $manifest->set_field('start_url', home_url('/', 'relative'));
+        $manifest->set_field('icons', array(
+            array(
+                'src' => plugins_url('/lib/imgs/rocket.png', __FILE__),
+                'sizes' => '120x120',
+                'type' => 'image/png'
+            )
+        ));
+    }
+
     public function enqueue_assets() {
         wp_enqueue_style('add-to-homescreen-style', $this->add2home_style);
 

wp-add-to-homescreen/lib/css/style.css

@@ -68,4 +68,10 @@ body.noscroll {
 #wp-add-to-homescreen-button.hidden {
   opacity: 0.0;
   pointer-events: none;
+}
+
+@media (display-mode: standalone) {
+  #wp-add-to-homescreen-button {
+    visibility: hidden;
+  }
 }

wp-add-to-homescreen/lib/js/add-to-homescreen.js

@@ -3,6 +3,7 @@
   'use strict';
 
   var window = globals;
+  var navigator = window.navigator;
   var document = window.document;
 
   var wpAddToHomescreen = globals.wpAddToHomescreen = {
@@ -31,7 +32,6 @@
       button.onclick = this.overlay.show;
       container.appendChild(button);
       window.addEventListener('scroll', function () {
-        console.log(window.innerHeight + window.scrollY);
         if (window.scrollY > 0) {
           button.classList.add('hidden');
         }
@@ -51,7 +51,15 @@
     },
 
     detectBrowser: function () {
-      return 'fennec';
+      if (/Gecko\/[\d\.]+ Firefox\/[\d\.]+/.test(navigator.userAgent)) {
+        return 'fennec';
+      }
+      else if (/Chrome\/[\d\.]+/.test(navigator.userAgent)) {
+        return 'chrome';
+      }
+      else {
+        return null;
+      }
     },
 
     detectPlatform: function () {
@@ -106,6 +114,14 @@
                       'on <q>Add to Home Screen</q>.';
         buffer.appendChild(p);
         return buffer;
+      },
+      chrome: function (setup) {
+        var buffer = document.createDocumentFragment();
+        var p = document.createElement('P');
+        p.innerHTML = '<strong>Tap on menu</strong> then tap on <q>Add to ' +
+                      'Home Screen</q>.';
+        buffer.appendChild(p);
+        return buffer;
       }
     }