Commit f83a293e authored by Tobias Zeumer's avatar Tobias Zeumer

Test offering tub.map as Progressive Web App (WPA); see #55

parent de569d95
[InternetShortcut]
URL=https://github.com/SirFaenor/pwa-skeleton
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>About</title>
<script type="text/javascript" src="app.js"></script>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="manifest.json">
</head>
<body>
<p>Hello, I am the About Page.</p>
<p>
<a href="index.html">home &gt;</a>
</p>
</body>
</html>
/**
* Service worker registration
*/
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
/**
* You can call register() every time a page loads without concern;
* the browser will figure out if the service worker is already registered or not and handle it accordingly.
*/
navigator.serviceWorker.register('./serviceWorker.js', {scope : "./"} ).then(function(registration) {
// everything is ok
console.log('ServiceWorker registrato con successo, scope: ', registration.scope);
}, function(err) {
// an error occurred
console.log('ServiceWorker registration failed: ', err);
});
// Global flag to detect standalone display mode
window.IS_STANDALONE = window.matchMedia('(display-mode: standalone)').matches;
});
}
<?xml version="1.0" encoding="utf-8"?><svg width='128px' height='128px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-ring"><rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect><defs><filter id="uil-ring-shadow" x="-100%" y="-100%" width="300%" height="300%"><feOffset result="offOut" in="SourceGraphic" dx="0" dy="0"></feOffset><feGaussianBlur result="blurOut" in="offOut" stdDeviation="0"></feGaussianBlur><feBlend in="SourceGraphic" in2="blurOut" mode="normal"></feBlend></filter></defs><path d="M10,50c0,0,0,0.5,0.1,1.4c0,0.5,0.1,1,0.2,1.7c0,0.3,0.1,0.7,0.1,1.1c0.1,0.4,0.1,0.8,0.2,1.2c0.2,0.8,0.3,1.8,0.5,2.8 c0.3,1,0.6,2.1,0.9,3.2c0.3,1.1,0.9,2.3,1.4,3.5c0.5,1.2,1.2,2.4,1.8,3.7c0.3,0.6,0.8,1.2,1.2,1.9c0.4,0.6,0.8,1.3,1.3,1.9 c1,1.2,1.9,2.6,3.1,3.7c2.2,2.5,5,4.7,7.9,6.7c3,2,6.5,3.4,10.1,4.6c3.6,1.1,7.5,1.5,11.2,1.6c4-0.1,7.7-0.6,11.3-1.6 c3.6-1.2,7-2.6,10-4.6c3-2,5.8-4.2,7.9-6.7c1.2-1.2,2.1-2.5,3.1-3.7c0.5-0.6,0.9-1.3,1.3-1.9c0.4-0.6,0.8-1.3,1.2-1.9 c0.6-1.3,1.3-2.5,1.8-3.7c0.5-1.2,1-2.4,1.4-3.5c0.3-1.1,0.6-2.2,0.9-3.2c0.2-1,0.4-1.9,0.5-2.8c0.1-0.4,0.1-0.8,0.2-1.2 c0-0.4,0.1-0.7,0.1-1.1c0.1-0.7,0.1-1.2,0.2-1.7C90,50.5,90,50,90,50s0,0.5,0,1.4c0,0.5,0,1,0,1.7c0,0.3,0,0.7,0,1.1 c0,0.4-0.1,0.8-0.1,1.2c-0.1,0.9-0.2,1.8-0.4,2.8c-0.2,1-0.5,2.1-0.7,3.3c-0.3,1.2-0.8,2.4-1.2,3.7c-0.2,0.7-0.5,1.3-0.8,1.9 c-0.3,0.7-0.6,1.3-0.9,2c-0.3,0.7-0.7,1.3-1.1,2c-0.4,0.7-0.7,1.4-1.2,2c-1,1.3-1.9,2.7-3.1,4c-2.2,2.7-5,5-8.1,7.1 c-0.8,0.5-1.6,1-2.4,1.5c-0.8,0.5-1.7,0.9-2.6,1.3L66,87.7l-1.4,0.5c-0.9,0.3-1.8,0.7-2.8,1c-3.8,1.1-7.9,1.7-11.8,1.8L47,90.8 c-1,0-2-0.2-3-0.3l-1.5-0.2l-0.7-0.1L41.1,90c-1-0.3-1.9-0.5-2.9-0.7c-0.9-0.3-1.9-0.7-2.8-1L34,87.7l-1.3-0.6 c-0.9-0.4-1.8-0.8-2.6-1.3c-0.8-0.5-1.6-1-2.4-1.5c-3.1-2.1-5.9-4.5-8.1-7.1c-1.2-1.2-2.1-2.7-3.1-4c-0.5-0.6-0.8-1.4-1.2-2 c-0.4-0.7-0.8-1.3-1.1-2c-0.3-0.7-0.6-1.3-0.9-2c-0.3-0.7-0.6-1.3-0.8-1.9c-0.4-1.3-0.9-2.5-1.2-3.7c-0.3-1.2-0.5-2.3-0.7-3.3 c-0.2-1-0.3-2-0.4-2.8c-0.1-0.4-0.1-0.8-0.1-1.2c0-0.4,0-0.7,0-1.1c0-0.7,0-1.2,0-1.7C10,50.5,10,50,10,50z" fill="#000" filter="url(#uil-ring-shadow)"><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" repeatCount="indefinite" dur="1s"></animateTransform></path></svg>
\ No newline at end of file
<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><rect width="512" height="512"/><g><path fill="#FFFFFF" d="M156.504,117.356c-1.095-20.572-2.405-45.529-2.405-63.686h-0.438 c-5.255,17.07-11.164,35.674-18.603,56.024l-26.042,71.563H94.573l-24.075-70.253c-7.002-21.01-12.686-39.827-16.848-57.333h-0.437 c-0.436,18.38-1.531,42.891-2.85,65.209l-3.938,63.25H28.267L38.548,34.63h24.297l25.162,71.339 c6.13,18.167,10.941,34.366,14.879,49.681h0.444c3.939-14.879,9.187-31.077,15.752-49.681L145.35,34.63h24.288l9.195,147.499 h-18.827L156.504,117.356z"/><path fill="#FFFFFF" d="M216.118,76.212l22.98,62.59c2.628,7.003,5.253,15.315,7.002,21.659h0.437 c1.969-6.344,4.161-14.442,6.789-22.095l21.007-62.154h20.354l-28.886,75.5c-13.794,36.325-23.203,54.707-36.334,66.305 c-9.622,8.1-18.82,11.387-23.628,12.261l-4.82-15.976c4.82-1.531,11.163-4.597,16.855-9.417 c5.248-4.152,11.593-11.592,16.19-21.446c0.871-1.968,1.53-3.501,1.53-4.587c0-1.097-0.437-2.629-1.53-5.034L195.11,76.212H216.118 z"/><path fill="#FFFFFF" d="M56.056,398.493l-15.315,46.393H21.042l50.331-147.5h22.764l50.332,147.5h-20.351l-15.761-46.393H56.056z M104.64,383.614L89.975,341.15c-3.278-9.622-5.47-18.382-7.654-26.916h-0.444c-2.182,8.534-4.374,17.729-7.44,26.701 l-14.442,42.679H104.64z"/><path fill="#FFFFFF" d="M164.897,373.546c0-13.57-0.438-24.512-0.874-34.578h17.072l1.087,18.157h0.444 c7.654-12.911,20.351-20.35,37.636-20.35c25.828,0,45.082,21.669,45.082,53.619c0,38.078-23.414,56.896-48.362,56.896 c-14.005,0-26.265-6.13-32.609-16.634h-0.438v57.557h-19.039V373.546z M183.937,401.771c0,2.853,0.223,5.473,0.875,7.878 c3.5,13.355,15.101,22.54,28.892,22.54c20.352,0,32.164-16.625,32.164-40.921c0-21.009-11.153-39.176-31.513-39.176 c-13.132,0-25.606,9.193-29.107,23.638c-0.649,2.405-1.31,5.255-1.31,7.66V401.771z"/><path fill="#FFFFFF" d="M289.481,373.546c0-13.57-0.438-24.512-0.875-34.578h17.072l1.094,18.157h0.438 c7.653-12.911,20.351-20.35,37.636-20.35c25.828,0,45.08,21.669,45.08,53.619c0,38.078-23.413,56.896-48.359,56.896 c-14.006,0-26.266-6.13-32.607-16.634h-0.437v57.557h-19.041V373.546z M308.522,401.771c0,2.853,0.223,5.473,0.87,7.878 c3.503,13.355,15.103,22.54,28.888,22.54c20.356,0,32.171-16.625,32.171-40.921c0-21.009-11.164-39.176-31.514-39.176 c-13.132,0-25.604,9.193-29.107,23.638c-0.65,2.405-1.308,5.255-1.308,7.66V401.771z"/></g></svg>
\ No newline at end of file
/**
* Simple loader for page transition
*/
@media all and (display-mode: standalone) {
html {
background: #020015 url(loading.svg) center center no-repeat;
}
}
{
"short_name": "tub.map",
"name": "tub.map - Library Floorplan",
"icons": [
{
"src": "img/logo-1x.png",
"type": "image/png",
"sizes": "48x48"
},
{
"src": "img/logo-2x.png",
"type": "image/png",
"sizes": "96x96"
},
{
"src": "img/logo-4x.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "img/logo-large.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": "./",
"background_color": "#000000",
"theme_color": "#000000",
"display": "standalone"
}
/**
* Cache version, change name to force reload
*/
var CACHE_VERSION = 'v1';
/**
* Stuff to put in the cache at install
'index.php',
'css/css-responsive-nav.css',
'css/svgWebStyle.css',
'js/tubmap.js',
'locale/en.json',
'node_modules/*',
'res/tub_floorplan.min.svg',
*/
var CACHE_FILES = [
'index.html',
'img/logo.svg'
];
/**
* Service worker 'install' event.
* If all the files are successfully cached, then the service worker will be installed.
* If any of the files fail to download, then the install step will fail.
*/
this.addEventListener('install', function(event) {
event.waitUntil(
caches.open(CACHE_VERSION).then(function(cache) {
console.log('Installing...');
return cache.addAll(CACHE_FILES);
}).catch(function(a) {
console.log(a);
})
); // waitUntil
});
/**
* After a service worker is installed and the user navigates to a different page or refreshes,
* the service worker will begin to receive fetch events.
*
* Network-first approach: if online, request is fetched from network and not from cache
*/
this.addEventListener('fetch', function(event) {
event.respondWith(function() {
var res = returnFromServer(event);
if (res) {return res;}
caches.match(event.request).then(function(res){
// Cache hit - return response
if(res){
return res;
}
// no response
return null;
})
}());
});
/**
* If we don't have a matching response, we return the result of a call to fetch,
* which will make a network request and return the data if anything can be retrieved from the network.
*/
function returnFromServer(event){
// IMPORTANT: Clone the request. A request is a stream and
// can only be consumed once. Since we are consuming this
// once by cache and once by the browser for fetch, we need
// to clone the response.
var fetchRequest = event.request.clone();
var url = event.request.clone();
return fetch(fetchRequest).then(
function(response) {
// Check if we received a valid response
if(!response || response.status !== 200 || response.type !== 'basic') {
return null;
}
// IMPORTANT: Clone the response. A response is a stream
// and because we want the browser to consume the response
// as well as the cache consuming the response, we need
// to clone it so we have two streams.
var responseToCache = response.clone();
caches.open(CACHE_VERSION)
.then(function(cache) {
cache.put(event.request, responseToCache);
});
return response;
}
); // return.fetch().then()
}
......@@ -50,6 +50,17 @@
<link rel="icon" href="https://www.tub.tuhh.de/wp-content/uploads/2016/02/cropped-TUB-512px-32x32.png?neverExpires" sizes="32x32" />
<link rel="icon" href="https://www.tub.tuhh.de/wp-content/uploads/2016/02/cropped-TUB-512px-192x192.png?neverExpires" sizes="192x192" />
<link rel="apple-touch-icon-precomposed" href="https://www.tub.tuhh.de/wp-content/uploads/2016/02/cropped-TUB-512px-180x180.png?neverExpires" />
<!-- start WPA-Test -->
<script type="text/javascript" src="assets-pwa/app.js"></script>
<link rel="manifest" href="assets-pwa/manifest.json">
<script>
// test standalone mode
window.addEventListener('load', function() {
console.log(window.IS_STANDALONE);
});
</script>
<!-- end WPA-Test -->
</head>
<body data-client-ip="<?php echo $_SERVER['REMOTE_ADDR'] ?>" data-client-host="<?php echo (isset($_SERVER['REMOTE_HOST'])) ? $_SERVER['REMOTE_HOST'] : 'HostnameLookups nor enabled in apache2.conf' ?>">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment