Migrating to vanilla js without Workbox
This commit is contained in:
parent
a042f41a76
commit
8e9b5efdc2
|
@ -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]));
|
|
@ -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
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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)))
|
||||
});
|
|
@ -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: {
|
||||
|
|
|
@ -58,7 +58,6 @@ $(document).ready(function() {
|
|||
}
|
||||
</style>
|
||||
{% endif %}
|
||||
<script defer type="text/javascript" src="resources/js/cache.js"></script>
|
||||
<br>
|
||||
<br>
|
||||
{% endblock %}
|
Loading…
Reference in New Issue