implementacion manifest

index.php

@@ -395,12 +395,22 @@ if ($variable !=''){
 			  
 	  		";
 	  		$librerias_galeria =" 
+	  		<link rel='manifest' href='manifest.json'>
 	  		  <link rel='stylesheet' type='text/css' href='librerias/slick/slick.css'>
 			  <link rel='stylesheet' type='text/css' href='librerias/slick/slick-theme.css'>
 			  <link rel='stylesheet' type='text/css' href='librerias/slick/style.css'>
+			  <script src='manup.js'></script>
 	  		";
 	  		$librerias_cabeza ="$presentacion_cabeza $librerias_galeria";
-	  		$librerias_pie =$aplicacion_pie;
+	  		$librerias_pie ="$aplicacion_pie 
+	  		<script>
+if('serviceWorker' in navigator) {
+  navigator.serviceWorker
+           .register('pwabuilder-sw.js')
+           .then(function() { console.log('Service Worker Registered'); });
+}
+</script>
+";
 
 	  		$registros = aplicacion_carrusel("$form",'10','','embebido','',"carousel");
 	  		//$registros="<div id='mostrar_carrusel'>$registros</div>";

manifest.json

@@ -0,0 +1,53 @@
+{
+  "name": "Avistador.com",
+  "short_name": "avistador",
+  "theme_color": "#289042",
+  "background_color": "#e7d380",
+  "display": "fullscreen",
+  "orientation": "portrait",
+  "Scope": "/a74",
+  "start_url": "/a74",
+  "icons": [
+    {
+      "src": "images/icons/icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png"
+    },
+    {
+      "src": "images/icons/icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src": "images/icons/icon-128x128.png",
+      "sizes": "128x128",
+      "type": "image/png"
+    },
+    {
+      "src": "images/icons/icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png"
+    },
+    {
+      "src": "images/icons/icon-152x152.png",
+      "sizes": "152x152",
+      "type": "image/png"
+    },
+    {
+      "src": "images/icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "images/icons/icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "images/icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "splash_pages": null
+}

manup.js

@@ -0,0 +1,133 @@
+
+//this is the object we build for an ajax call to get the content of the manifest
+//it's a JSON, so we can parse it like a man-child
+//verion 0.7
+var manUpObject;
+
+
+
+//data objects
+var tagArray = [], linkArray = [];
+var validMetaValues = [{ name: 'mobile-web-app-capable', manifestName: 'display' }, { name: 'apple-mobile-web-app-capable', manifestName: 'display' }, { name: 'apple-mobile-web-app-title', manifestName: 'short_name' }, { name: 'application-name', manifestName: 'short_name' }, { name: 'msapplication-TileColor', manifestName: 'ms_TileColor' }, { name: 'msapplication-square70x70logo', manifestName: 'icons', imageSize: '70x70' }, { name: 'msapplication-square150x150logo', manifestName: 'icons', imageSize: '150x150' },{ name: 'msapplication-wide310x150logo', manifestName: 'icons', imageSize: '310x150' },{ name: 'msapplication-square310x310logo', manifestName: 'icons', imageSize: '310x310' }];
+var validLinkValues = [{ name: 'apple-touch-icon', manifestName: 'icons', imageSize: '152x152' },{ name: 'apple-touch-icon', manifestName: 'icons', imageSize: '120x120' },{ name: 'apple-touch-icon', manifestName: 'icons', imageSize: '76x76' },{ name: 'apple-touch-icon', manifestName: 'icons', imageSize: '60x60' },{ name: 'apple-touch-icon', manifestName: 'icons', imageSize: '57x57' }, { name: 'apple-touch-icon', manifestName: 'icons', imageSize: '72x72' }, { name: 'apple-touch-icon', manifestName: 'icons', imageSize: '114x114' }, { name: 'icon', manifestName: 'icons', imageSize: '128x128' }, { name: 'icon', manifestName: 'icons', imageSize: '192x192' }]
+
+
+//these next two classes are building the mixed data, pulling out the values we need based on the valid values array
+var generateFullMetaData = function(){
+ for (var i = 0;i < validMetaValues.length;  i++) {
+  if(manUpObject[validMetaValues[i].manifestName]){
+      if(validMetaValues[i].manifestName == 'icons'){
+          //here we need to loop through each of the images to see if they match
+          var imageArray = manUpObject.icons;
+          for (var j = 0;j < imageArray.length;  j++) {
+              if(imageArray[j].sizes == validMetaValues[i].imageSize){
+                //problem is in here, need to asign proper value
+                validMetaValues[i].content = imageArray[j].src;
+              }
+          }
+      }else{
+          validMetaValues[i].content = manUpObject[validMetaValues[i].manifestName];
+          if (validMetaValues[i].manifestName == 'display' && manUpObject.display == 'standalone') validMetaValues[i].content = 'yes'
+         // console.log('stop')
+      }
+  } 
+ };
+
+ //console.log(validMetaValues)
+ return validMetaValues
+};
+
+var generateFullLinkData = function () {
+    for (var i = 0; i < validLinkValues.length; i++) {
+        if (manUpObject[validLinkValues[i].manifestName]) {
+            if (validLinkValues[i].manifestName == 'icons') {
+                //here we need to loop through each of the images to see if they match
+                var imageArray = manUpObject.icons;
+                for (var j = 0; j < imageArray.length; j++) {
+                    if (imageArray[j].sizes == validLinkValues[i].imageSize) {
+                        //problem is in here, need to asign proper value
+                        validLinkValues[i].content = imageArray[j].src;
+                    }
+                }
+
+            } else {
+
+                validLinkValues[i].content = manUpObject[validLinkValues[i].manifestName];
+            }
+        }
+    };
+
+    //console.log(validMetaValues)
+    return validLinkValues
+};
+
+
+        //These are the 2 functions that build out the tags
+        //TODO: make it loop once instead of tx
+var generateMetaArray = function () {
+    var tempMetaArray = generateFullMetaData();
+    var headTarget = document.getElementsByTagName('head')[0]
+    for (var i = 0; i < tempMetaArray.length; i++) {
+
+        var metaTag = document.createElement('meta');
+        metaTag.name = tempMetaArray[i].name;
+        metaTag.content = tempMetaArray[i].content;
+        headTarget.appendChild(metaTag);
+
+    };
+
+};
+
+var generateLinkArray = function () {
+    var tempLinkArray = generateFullLinkData();
+    var headTarget = document.getElementsByTagName('head')[0]
+    for (var i = 0; i < tempLinkArray.length; i++) {
+
+        var linkTag = document.createElement('link');
+        linkTag.setAttribute('rel', tempLinkArray[i].name);
+        linkTag.setAttribute('sizes', tempLinkArray[i].imageSize);
+        linkTag.setAttribute('href', tempLinkArray[i].content);
+        headTarget.appendChild(linkTag);
+        //console.log(linkTag);
+    }
+};
+//these functions makes the ajax calls and assigns to manUp object
+var generateObj = function (ajaxString) {
+    //for testing
+    //document.getElementById("output").innerHTML = ajaxString;
+    //gen object
+    manUpObject = JSON.parse(ajaxString);
+    generateLinkArray();
+    generateMetaArray();
+
+};
+
+var makeAjax = function (url) {
+    if (!window.XMLHttpRequest) return;
+    var fullURL;
+    var pat = /^https?:\/\//i;
+    pat.test(url)?fulURL = url:fullURL = window.location.hostname + url;
+    var ajax = new XMLHttpRequest();   
+    ajax.onreadystatechange = function () {
+        if (ajax.readyState == 4 && ajax.status == 200) generateObj(ajax.responseText)
+    };
+    ajax.open("GET", url, true);
+    ajax.send();
+};
+
+var collectManifestObj = function () {
+    var links = document.getElementsByTagName('link');
+    for (var i = 0; i < links.length; i++) {
+        if (links[i].rel && links[i].rel == 'manifest') makeAjax(links[i].href);
+    }
+
+};
+
+var testForManifest = function () {
+    //i'm not sure what to do here.  I am starchly against browser sniffing and there is no test (yet)
+    //I think I'm jsut going to build out the tags on every page until there is a way to test it, so far
+    //it looks like the manifest will override the tags
+    //browser: we need context here
+    collectManifestObj();
+
+}();

pwabuilder-sw-register.js

@@ -0,0 +1,14 @@
+//This is the service worker with the Cache-first network
+
+//Add this below content to your HTML page, or add the js file to your page at the very top to register sercie worker
+if (navigator.serviceWorker.controller) {
+  console.log('[PWA Builder] active service worker found, no need to register')
+} else {
+
+//Register the ServiceWorker
+  navigator.serviceWorker.register('pwabuilder-sw.js', {
+    scope: '.'
+  }).then(function(reg) {
+    console.log('Service worker has been registered for scope:'+ reg.scope);
+  });
+}

pwabuilder-sw.js

@@ -0,0 +1,64 @@
+//This is the service worker with the Cache-first network
+
+var CACHE = 'pwabuilder-precache';
+var precacheFiles = [
+      /* Add an array of files to precache for your app */
+    ];
+
+//Install stage sets up the cache-array to configure pre-cache content
+self.addEventListener('install', function(evt) {
+  console.log('The service worker is being installed.');
+  evt.waitUntil(precache().then(function() {
+    console.log('[ServiceWorker] Skip waiting on install');
+      return self.skipWaiting();
+
+  })
+  );
+});
+
+
+//allow sw to control of current page
+self.addEventListener('activate', function(event) {
+console.log('[ServiceWorker] Claiming clients for current page');
+      return self.clients.claim();
+
+});
+
+self.addEventListener('fetch', function(evt) {
+  console.log('The service worker is serving the asset.'+ evt.request.url);
+  evt.respondWith(fromCache(evt.request).catch(fromServer(evt.request)));
+  evt.waitUntil(update(evt.request));
+});
+
+
+function precache() {
+  return caches.open(CACHE).then(function (cache) {
+    return cache.addAll(precacheFiles);
+  });
+}
+
+
+function fromCache(request) {
+  //we pull files from the cache first thing so we can show them fast
+  return caches.open(CACHE).then(function (cache) {
+    return cache.match(request).then(function (matching) {
+      return matching || Promise.reject('no-match');
+    });
+  });
+}
+
+
+function update(request) {
+  //this is where we call the server to get the newest version of the 
+  //file to use the next time we show view
+  return caches.open(CACHE).then(function (cache) {
+    return fetch(request).then(function (response) {
+      return cache.put(request, response);
+    });
+  });
+}
+
+function fromServer(request){
+  //this is the fallback if it is not in the cahche to go to the server and get it
+return fetch(request).then(function(response){ return response})
+}