implementacion manifest

This commit is contained in:
humano 2017-10-30 14:27:04 -05:00
parent c3dae91060
commit a72c9eca5a
13 changed files with 275 additions and 1 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 43 KiB

BIN
images/icons/icon-72x72.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.3 KiB

BIN
images/icons/icon-96x96.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.3 KiB

View File

@ -395,12 +395,22 @@ if ($variable !=''){
"; ";
$librerias_galeria =" $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.css'>
<link rel='stylesheet' type='text/css' href='librerias/slick/slick-theme.css'> <link rel='stylesheet' type='text/css' href='librerias/slick/slick-theme.css'>
<link rel='stylesheet' type='text/css' href='librerias/slick/style.css'> <link rel='stylesheet' type='text/css' href='librerias/slick/style.css'>
<script src='manup.js'></script>
"; ";
$librerias_cabeza ="$presentacion_cabeza $librerias_galeria"; $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 = aplicacion_carrusel("$form",'10','','embebido','',"carousel");
//$registros="<div id='mostrar_carrusel'>$registros</div>"; //$registros="<div id='mostrar_carrusel'>$registros</div>";

53
manifest.json Normal file
View File

@ -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
}

133
manup.js Normal file
View File

@ -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();
}();

14
pwabuilder-sw-register.js Normal file
View File

@ -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);
});
}

64
pwabuilder-sw.js Normal file
View File

@ -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})
}