Migrating to vanilla js without Workbox

This commit is contained in:
Matteo Gheza 2020-10-14 23:46:54 +02:00
parent a042f41a76
commit 8e9b5efdc2
7 changed files with 405 additions and 2074 deletions

View File

@ -0,0 +1,19 @@
<?php
header("Content-type: application/json");
try {
$start_time = microtime(true);
require("core.php");
init_class(false, false);
$exec_time = microtime(true) - $start_time;
$server_side = ["status" => "ok", "status_msg" => null, "exec_time" => $exec_time, "user_info" => $user->info()];
} catch (Exception $e) {
$server_side = ["status" => "error", "status_msg" => $e];
}
try {
$server_info = $_SERVER;
unset($server_info["DOCUMENT_ROOT"], $server_info["REQUEST_URI"], $server_info["SCRIPT_NAME"], $server_info["PHP_SELF"], $server_info["REMOTE_ADDR"], $server_info["REMOTE_PORT"], $server_info["SERVER_SOFTWARE"], $server_info["SERVER_NAME"], $server_info["SERVER_PORT"], $server_info["SCRIPT_FILENAME"]);
$client_side = ["status" => "ok", "status_msg" => null, "info" => $server_info, "ip" => $tools->get_ip()];
} catch (Exception $e) {
$server_side = ["status" => "error", "status_msg" => $e];
}
echo(json_encode(["client" => $client_side, "server" => $server_side]));

View File

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="it">
<head>
<title>You are offline</title>
<link href="/resources/images/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon">
<meta name="viewport" content="user-scalable=no, initial-scale=1">
<link rel="manifest" href="/manifest.webmanifest">
<style>
body:not(table){
max-width: 100%;
overflow-x: hidden;
}
</style>
<script src="resources/dist/main.js"></script>
</head>
<body>
<!-- Content -->
<div id="content"></div>
<!-- /Content -->
</body>
</html>

File diff suppressed because it is too large Load Diff

View File

@ -10,13 +10,13 @@
"author": "",
"license": "GPL3",
"dependencies": {
"@fortawesome/fontawesome-free": "^5.14.0",
"@fortawesome/fontawesome-free": "^5.15.1",
"bootstrap": "^4.5.2",
"bootstrap-cookie-alert": "^1.2.1",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^4.3.0",
"expose-loader": "^1.0.0",
"file-loader": "^6.1.0",
"expose-loader": "^1.0.1",
"file-loader": "^6.1.1",
"font-awesome": "^4.7.0",
"howler": "^2.2.0",
"jquery": "^3.5.1",
@ -24,10 +24,9 @@
"leaflet.locatecontrol": "^0.72.0",
"pickadate": "^5.0.0-alpha.3",
"popper.js": "^1.16.1",
"sass": "^1.26.10",
"sass-loader": "^10.0.2",
"style-loader": "^1.2.1",
"webpack": "^4.44.1",
"workbox-webpack-plugin": "^5.1.4"
"sass": "^1.27.0",
"sass-loader": "^10.0.3",
"style-loader": "^1.3.0",
"webpack": "^4.44.2"
}
}

View File

@ -1,30 +1,73 @@
//import { CacheableResponsePlugin } from 'workbox-cacheable-response/CacheableResponsePlugin';
import { CacheFirst } from 'workbox-strategies/CacheFirst';
import { NetworkFirst } from 'workbox-strategies/NetworkFirst';
//import { ExpirationPlugin } from 'workbox-expiration/ExpirationPlugin';
//import { NavigationRoute } from 'workbox-routing/NavigationRoute';
import { precacheAndRoute } from 'workbox-precaching/precacheAndRoute';
import { registerRoute } from 'workbox-routing/registerRoute';
const expectedCaches = ['static-v1'];
precacheAndRoute(self.__WB_MANIFEST);
let cacheVersion = 1
let cacheName = "static-"+cacheVersion
registerRoute(
new RegExp('.*\.js'),
new NetworkFirst({
cacheName: 'js-cache',
})
);
const urls = ['/offline.html', '/resources/dist/main.js', '/resources/dist/maps.js', '/manifest.webmanifest', '/resources/images/favicon.ico', '/resources/dist/marker-icon.png', '/resources/dist/layers.png', '/resources/dist/layers-2x.png', '/resources/images/android-chrome-192x192.png', '/resources/images/android-chrome-384x384.png', '/resources/images/black_helmet.png', '/resources/images/red_helmet.png', '/resources/images/wheel.png', '/resources/images/logo.png', '/resources/images/owner.png'];
registerRoute(
new RegExp('\.{svg,jpg,png,gif,ico}$'),
new CacheFirst({
cacheName: 'images-cache',
})
);
function fetchHandler(event, content_type, not_found_message){
event.respondWith(
fetch(event.request).then(function (response) {
return response;
}).catch(function (error) {
if(content_type == null){ // if content_type is null, load a file from cache as not found response
var not_found_response = caches.match(not_found_message).then(function(response) {
return response;
});
} else {
var not_found_response = new Response(new Blob([not_found_message]), {
headers: {'Content-Type': content_type}
});
}
return caches.match(event.request).then(function(response) {
return response || not_found_response;
});
})
);
}
self.addEventListener('fetch', function (event) {
console.log(event.request);
var request = event.request;
registerRoute(
new RegExp('\.{eot,ttf,woff,woff2}$'),
new CacheFirst({
cacheName: 'fonts-cache',
})
);
// https://stackoverflow.com/a/49719964
if (event.request.cache === 'only-if-cached' && event.request.mode !== 'same-origin') return;
if (request.headers.get('Accept').includes('text/html')) {
fetchHandler(event, null, "/offline.html");
} else if (request.destination == "script") {
fetchHandler(event, "application/javascript", "console.error('Script "+event.request.url+" not found');");
} else if (request.destination == "image") {
fetchHandler(event, null, "/resources/images/logo.png");
} else if (request.destination == "manifest" || request.url.includes("manifest")) {
fetchHandler(event, null, "/manifest.webmanifest");
} else {
event.respondWith(fetch(request));
}
});
self.addEventListener('install', event => {
self.skipWaiting();
console.log("Service worker installed");
})
self.addEventListener('activate', event => {
// https://developers.google.com/web/fundamentals/primers/service-workers/lifecycle#updates
// delete any caches that aren't in expectedCaches
// which will get rid of old versions
event.waitUntil(
caches.keys().then(keys => Promise.all(
keys.map(key => {
if (!expectedCaches.includes(key)) {
return caches.delete(key);
}
})
)).then(() => {
console.log('New service worker now ready to handle fetches!');
})
);
event.waitUntil(caches.open(cacheName)
.then((openCache) => {
return openCache.addAll(urls);
})
.catch(err => console.error(err)))
});

View File

@ -1,15 +1,18 @@
const path = require('path');
var webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const workboxPlugin = require('workbox-webpack-plugin');
//const workboxPlugin = require('workbox-webpack-plugin');
module.exports = {
entry: {
main: path.resolve(__dirname, './src/main.js'),
maps: path.resolve(__dirname, 'src/maps.js')
maps: path.resolve(__dirname, './src/maps.js'),
sw: path.resolve(__dirname, './src/sw.js'),
},
output: {
filename: '[name].js',
filename: (pathData) => {
return pathData.chunk.name === 'sw' ? '../../sw.js': '[name].js';
},
path: path.resolve(__dirname, 'dist'),
publicPath: '/resources/dist/',
},
@ -67,11 +70,6 @@ module.exports = {
new webpack.ProvidePlugin({
$: 'jquery',
popper: 'popper.js'
}),
new workboxPlugin.InjectManifest({
swSrc: './src/sw.js',
swDest: '../../sw.js',
maximumFileSizeToCacheInBytes: 100 * 1024 * 1024
})
],
optimization: {

View File

@ -58,7 +58,6 @@ $(document).ready(function() {
}
</style>
{% endif %}
<script defer type="text/javascript" src="resources/js/cache.js"></script>
<br>
<br>
{% endblock %}