service worker

This commit is contained in:
Louis DUMONT 2022-03-31 15:51:27 +02:00
parent 4b41102bd1
commit 41a07df168
7 changed files with 130 additions and 85 deletions

View File

@ -6,13 +6,7 @@
src: url('../fonts/Fredoka-Regular.ttf'); src: url('../fonts/Fredoka-Regular.ttf');
} }
@font-face{
font-family:'FontAwesome';
src:url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
font-weight:normal;
font-style:normal}
.fa-exclamation-circle:before{content:"\f06a"}
/*////////////////////////////////////////////////////////////////// /*//////////////////////////////////////////////////////////////////
@ -273,7 +267,7 @@ a:hover {
background-color: #fff; background-color: #fff;
border: 1px solid #c80000; border: 1px solid #c80000;
border-radius: 14px; border-radius: 14px;
padding: 4px 25px 4px 10px; padding: 4px 10px 4px 10px;
top: 50%; top: 50%;
-webkit-transform: translateY(-50%); -webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%); -moz-transform: translateY(-50%);
@ -296,7 +290,6 @@ a:hover {
} }
.alert-validate::after { .alert-validate::after {
content: "\f06a";
font-family: FontAwesome; font-family: FontAwesome;
display: block; display: block;
position: absolute; position: absolute;

View File

@ -1,3 +1,4 @@
$(document).ready(function(){ $(document).ready(function(){
$("#li_accueil").addClass("hover"); $("#li_accueil").addClass("hover");
}); });

View File

@ -4,6 +4,7 @@
if (!window.navigator.onLine){ if (!window.navigator.onLine){
console.log("offline"); console.log("offline");
$(".info_message").show(); $(".info_message").show();
$(".info_message").show();
} }
"use strict"; "use strict";
var input = $('.validate-input .input-forms'); var input = $('.validate-input .input-forms');
@ -25,7 +26,7 @@
success: function(data, status, jqXHR) { success: function(data, status, jqXHR) {
console.log(data.trim()); console.log(data.trim());
if (data.trim() == "true"){ if (data.trim() == "true"){
location.href='/'; location.href='/accueil.php';
} else { } else {
$("#zone-login").addClass("shaking_error"); $("#zone-login").addClass("shaking_error");
setTimeout(function() { setTimeout(function() {
@ -79,11 +80,29 @@ $('.hidden').delay(300).fadeIn(400);
if ('serviceWorker' in navigator) { if ('serviceWorker' in navigator) {
window.addEventListener('load', () => { window.addEventListener('load', () => {
navigator.serviceWorker.register('sw.js') navigator.serviceWorker.register('sw.js')
.then(registration => { .then(registration => {console.log(`[SW] enregistré ! ${registration.scope}`);})
console.log(`Service Worker enregistré ! Ressource: ${registration.scope}`); .catch(err => {console.log(`[SW] Echec de l'enregistrement: ${err}`);});
})
.catch(err => {
console.log(`Echec de l'enregistrement du Service Worker: ${err}`);
});
}); });
} }
/*
function getCookie(user) {
var cookieArr = document.cookie.split(";");
for (var i = 0; i < cookieArr.length; i++) {
var cookiePair = cookieArr[i].split("=");
if (user == cookiePair[0].trim()) {
return decodeURIComponent(cookiePair[1]);
}
}
return null;
}
function checkCookie() {
var username = getCookie("username");
var pass = getCookie("pass");
if (!(username != "" && username != null && pass != null && pass != null)) {
console.log("no cookie");
}
}
checkCookie();*/

View File

@ -28,6 +28,8 @@ if (isset($_COOKIE['username']) && isset($_COOKIE['pass'])) {
$ID_add_company = $query_add_company->fetchALL(PDO::FETCH_OBJ)[0]->ID_company; $ID_add_company = $query_add_company->fetchALL(PDO::FETCH_OBJ)[0]->ID_company;
$query_add_company = $bdd->prepare('INSERT INTO companies_located VALUES (:ID_localisation, :ID_company);'); $query_add_company = $bdd->prepare('INSERT INTO companies_located VALUES (:ID_localisation, :ID_company);');
$query_add_company->execute(['ID_localisation' => $_POST["localisation"], 'ID_company' => $ID_add_company]); $query_add_company->execute(['ID_localisation' => $_POST["localisation"], 'ID_company' => $ID_add_company]);
$query_add_company = $bdd->prepare('INSERT INTO companies_located VALUES (:ID_localisation, :ID_company);');
$query_add_company->execute(['ID_localisation' => $_POST["localisation"], 'ID_company' => $ID_add_company]);
echo "<script>location.href='/gestion_entreprises.php';</script>"; echo "<script>location.href='/gestion_entreprises.php';</script>";
} catch (Exception $e) { } catch (Exception $e) {
echo "false"; echo "false";

35
website/fallback.php Normal file
View File

@ -0,0 +1,35 @@
<html lang="fr">
<head>
<title>Offline</title>
<meta name="description" content="description">
<link rel="stylesheet" href="http://ctsstatic.fr/assets/vendors/fontawesome/css/all.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="http://ctsstatic.fr/assets/images/logo_petit.png">
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="http://ctsstatic.fr/assets/css/a_propos.css">
</head>
<body>
<div class="container">
<div class="main">
<div class="content">
<div class="bubble">
<img src="http://ctsstatic.fr/assets/images/fond_cesi_large.png" alt="fond cesi">
<div class="centered">Aucune connexion à internet</div>
</div>
<div class="bubble">
<div class="title_bubble">Page inaccessible en mode hors ligne.</div>
<div class="text_content">
Due à un manque de connexion internet, nous ne pouvez pas afficher cette page.
</div>
</div>
<div>
<a class="btnvoir" href="/">
<span>Retour à la page de connexion</span>
</a>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@ -1,15 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<?php
if (isset($_COOKIE['username']) && isset($_COOKIE['pass'])) {
require "controller/ConnexionBDD.php";
if (!$error) {
$query = $bdd->prepare('SELECT * FROM users NATURAL JOIN roles NATURAL JOIN roles_has_permissions NATURAL JOIN permissions WHERE code_permission="SFx1" AND username=:user AND password_user=:password_user;');
$query->execute(['user' => $_COOKIE['username'], 'password_user' => $_COOKIE['pass']]);
if ($query->rowCount() == 1){echo "<script>location.href='/accueil.php';</script>";}
else {echo "<script>location.href='/controller/Disconnect.php';</script>";}
}
} else {
?>
<html lang="fr"> <html lang="fr">
<head> <head>
<title>Connexion - CTS</title> <title>Connexion - CTS</title>
@ -27,7 +17,11 @@ if (isset($_COOKIE['username']) && isset($_COOKIE['pass'])) {
<div class="boite-login"> <div class="boite-login">
<div id="zone-login" class="zone-login hidden"> <div id="zone-login" class="zone-login hidden">
<form method="post" class="form-login validate"> <form method="post" class="form-login validate">
<div class="info_message">Erreur de connexion Internet, veuillez vous connecter</div> <div class="info_message">
Erreur de connexion Internet, veuillez vous connecter
<br>
<a href="/favoris.php">Accès aux favoris</a>
</div>
<span class="form-title"><img src="http://ctsstatic.fr/assets/images/logo.png" alt="Cesi Ton Stage"></span> <span class="form-title"><img src="http://ctsstatic.fr/assets/images/logo.png" alt="Cesi Ton Stage"></span>
@ -37,7 +31,7 @@ if (isset($_COOKIE['username']) && isset($_COOKIE['pass'])) {
</div> </div>
<div class="zone-input validate-input" data-validate = "Saisissez un mot de passe"> <div class="zone-input validate-input" data-validate = "Saisissez un mot de passe">
<input class="input-forms" id="passwd" type="password" name="pass" placeholder="Mot de passe"> <input class="input-forms" id="passwd" type="password" me="pass" placeholder="Mot de passe">
<span class="focus-input"></span> <span class="focus-input"></span>
</div> </div>
@ -57,6 +51,3 @@ if (isset($_COOKIE['username']) && isset($_COOKIE['pass'])) {
<script src="http://ctsstatic.fr/assets/js/index.js"></script> <script src="http://ctsstatic.fr/assets/js/index.js"></script>
</body> </body>
</html> </html>
<?php
}
?>

View File

@ -1,59 +1,63 @@
importScripts( const staticCacheName = "site_static_v1";
'https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js' const dynamicCacheName = "site_dynamic_v1";
); const assets = [
if (workbox) { './',
console.log(`Super ! Workbox est chargé 🎉`); './index.php',
'./fallback.php',
workbox.routing.registerRoute( './manifest/manifest.json',
/\.(?:html|js|css|png|jpg|jpeg|svg|gif)$/,
new workbox.strategies.StaleWhileRevalidate()
);
}
//Installation du service worker
self.addEventListener('install', (e) => {
console.log('[Service Worker] Installation');
var cacheName = 'CTS_v2';
var appShellFiles = [
'index.php',
'http://ctsstatic.fr/assets/css/index.css', 'http://ctsstatic.fr/assets/css/index.css',
'http://ctsstatic.fr/assets/css/a_propos.css',
'http://ctsstatic.fr/assets/images/fond_cesi_large.png',
'http://ctsstatic.fr/assets/vendors/fontawesome/css/all.min.css',
'http://ctsstatic.fr/assets/js/index.js', 'http://ctsstatic.fr/assets/js/index.js',
'http://ctsstatic.fr/assets/js/nav_bar.js',
'http://ctsstatic.fr/assets/css/nav_bar.css',
'http://ctsstatic.fr/assets/images/logo.png',
'http://ctsstatic.fr/assets/images/logo144.png',
'http://ctsstatic.fr/assets/images/logo_petit.png', 'http://ctsstatic.fr/assets/images/logo_petit.png',
'http://ctsstatic.fr/assets/vendors/jquery/jquery-3.6.0.min.js' 'http://ctsstatic.fr/assets/vendors/jquery/jquery-3.6.0.min.js',
'http://ctsstatic.fr/assets/js/sha1.min.js',
'http://ctsstatic.fr/assets/fonts/Fredoka-Regular.ttf',
]; ];
e.waitUntil( self.addEventListener('install', evt => { //Event à l'installation
caches.open(cacheName).then((cache) => { //console.log("installed");
console.log('[Service Worker] Mise en cache globale: app shell et contenu') evt.waitUntil( //Ne s'arrete pas tant que le cache n'est complet
return cache.addAll(appShellFiles); caches.open(staticCacheName).then(cache => {
})) console.log("Caching assets");
cache.addAll(assets);
})
)
}); });
//fetch event afin de répondre quand on est en mode hors ligne. self.addEventListener('activate', evt => {
self.addEventListener('fetch', (e) => { //console.log("activated");
e.respondWith( evt.waitUntil(
caches.open('ma_sauvegarde').then(function(cache) { caches.keys().then(keys => {
return cache.match(e.request).then(function (response) { //console.log(keys);
return response || fetch(e.request).then(function(response) { return Promise.all(keys
cache.put(e.request, response.clone()); .filter(key => key !== staticCacheName && key !== dynamicCacheName)
return response; .map(key => caches.delete(key)))
});
});
}) })
); );
}); });
/*
self.addEventListener('fetch', (e) => { /*self.addEventListener('fetch', evt => {
e.respondWith( evt.respondWith(
caches.match(e.request).then((r) => { caches.match(evt.request).then(cacheRes => {
console.log('[Service Worker] Récupération de la ressource: '+e.request.url); console.log(evt.request);
return r || fetch(e.request).then((response) => { return cacheRes || fetch(evt.request).then(fetchRes => {
return caches.open(cacheName).then((cache) => { return caches.open(dynamicCacheName).then(cache => {
console.log('[Service Worker] Mise en cache de la nouvelle ressource: '+e.request.url); if (evt.request.url.indexOf('favoris') > -1){
cache.put(e.request, response.clone()); cache.put(evt.request.url, fetchRes.clone());
return response; }
}); return fetchRes;
})
}); });
}).catch(() => {
console.log("Erreur d'accès à :", evt.request.url)
return caches.match('/fallback.php');
}) })
); );
});*/ });
*/