web app

app.js

@@ -62,6 +62,10 @@ window.onload = function() {
         contextMenu.style.display = "none"
     }
     suggestionTimer = setTimeout(showSuggestion, 30000)
+    
+    if ("serviceWorker" in navigator) {
+        navigator.serviceWorker.register("service-worker.js")
+    }
 }
 
 function searchCandidatesOf(box) {

manifest.json.php

@@ -0,0 +1,104 @@
+<?php
+    $gridStr = strip_tags($_GET['grid']);
+?>
+
+{
+    "short_name": "Sudoku",
+    "name": "Sudoku",
+    "description": "Remplissez la grille de sorte que chaque ligne, colonne et région (carré de 3×3 cases) contienne tous les chiffres de 1 à 9.",
+    "icons": [{
+        "src": "thumbnail.png.php?grid=<?=$gridStr?>&size=48",
+        "sizes": "48x48",
+        "type": "image/png"
+    }, {
+        "src": "thumbnail.png.php?grid=<?=$gridStr?>&size=72",
+        "sizes": "72x72",
+        "type": "image/png"
+    }, {
+        "src": "thumbnail.png.php?grid=<?=$gridStr?>&size=96",
+        "sizes": "96x96",
+        "type": "image/png"
+    }, {
+        "src": "thumbnail.png.php?grid=<?=$gridStr?>&size=144",
+        "sizes": "144x144",
+        "type": "image/png"
+    }, {
+        "src": "thumbnail.png.php?grid=<?=$gridStr?>&size=168",
+        "sizes": "168x168",
+        "type": "image/png"
+    }, {
+        "src": "thumbnail.png.php?grid=<?=$gridStr?>&size=192",
+        "sizes": "192x192",
+        "type": "image/png"
+    }],
+    "start_url": ".",
+    "background_color": "#fff",
+    "display": "standalone",
+    "scope": ".",
+    "theme_color": "#fff",
+    "orientation": "portrait-primary",
+    "shortcuts": [
+        {
+            "name": "Sudoku : cette grille",
+            "short_name": "Sudoku",
+            "description": "Continuer cette grille de sudoku",
+            "url": "<?=$gridStr?>",
+            "icons": [{
+                    "src": "thumbnail.png.php?grid=<?=$gridStr?>&size=48",
+                    "sizes": "48x48",
+                    "type": "image/png"
+                }, {
+                    "src": "thumbnail.png.php?grid=<?=$gridStr?>&size=72",
+                    "sizes": "72x72",
+                    "type": "image/png"
+                }, {
+                    "src": "thumbnail.png.php?grid=<?=$gridStr?>&size=96",
+                    "sizes": "96x96",
+                    "type": "image/png"
+                }, {
+                    "src": "thumbnail.png.php?grid=<?=$gridStr?>&size=144",
+                    "sizes": "144x144",
+                    "type": "image/png"
+                }, {
+                    "src": "thumbnail.png.php?grid=<?=$gridStr?>&size=168",
+                    "sizes": "168x168",
+                    "type": "image/png"
+                }, {
+                    "src": "thumbnail.png.php?grid=<?=$gridStr?>&size=192",
+                    "sizes": "192x192",
+                    "type": "image/png"
+            }]
+        },
+        {
+            "name": "Nouvelle grille de sudoku",
+            "short_name": "Nouveau sudoku",
+            "description": "Nouvelle grille de sudoku",
+            "url": ".",
+            "icons": [{
+                    "src": "thumbnail.png.php?grid=.528.3....4.9.1...39.562......73.129...1.64.7...42.3656.13.5...28.6.4...4.5287...&size=48",
+                    "sizes": "48x48",
+                    "type": "image/png"
+                }, {
+                    "src": "thumbnail.png.php?grid=.528.3....4.9.1...39.562......73.129...1.64.7...42.3656.13.5...28.6.4...4.5287...&size=72",
+                    "sizes": "72x72",
+                    "type": "image/png"
+                }, {
+                    "src": "thumbnail.png.php?grid=.528.3....4.9.1...39.562......73.129...1.64.7...42.3656.13.5...28.6.4...4.5287...&size=96",
+                    "sizes": "96x96",
+                    "type": "image/png"
+                }, {
+                    "src": "thumbnail.png.php?grid=.528.3....4.9.1...39.562......73.129...1.64.7...42.3656.13.5...28.6.4...4.5287...&size=144",
+                    "sizes": "144x144",
+                    "type": "image/png"
+                }, {
+                    "src": "thumbnail.png.php?grid=.528.3....4.9.1...39.562......73.129...1.64.7...42.3656.13.5...28.6.4...4.5287...&size=168",
+                    "sizes": "168x168",
+                    "type": "image/png"
+                }, {
+                    "src": "thumbnail.png.php?grid=.528.3....4.9.1...39.562......73.129...1.64.7...42.3656.13.5...28.6.4...4.5287...&size=192",
+                    "sizes": "192x192",
+                    "type": "image/png"
+            }]
+        }
+    ]
+}

service-worker.js

@@ -0,0 +1,86 @@
+/*
+Copyright 2015, 2019, 2020 Google LLC. All Rights Reserved.
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+
+// Incrementing OFFLINE_VERSION will kick off the install event and force
+// previously cached resources to be updated from the network.
+const OFFLINE_VERSION = 1;
+const CACHE_NAME = "offline";
+// Customize this with a different URL if needed.
+const OFFLINE_URL = ".";
+
+self.addEventListener("install", (event) => {
+  event.waitUntil(
+    (async () => {
+      const cache = await caches.open(CACHE_NAME);
+      // Setting {cache: 'reload'} in the new request will ensure that the
+      // response isn't fulfilled from the HTTP cache; i.e., it will be from
+      // the network.
+      await cache.add(new Request(OFFLINE_URL, { cache: "reload" }));
+    })()
+  );
+  // Force the waiting service worker to become the active service worker.
+  self.skipWaiting();
+});
+
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    (async () => {
+      // Enable navigation preload if it's supported.
+      // See https://developers.google.com/web/updates/2017/02/navigation-preload
+      if ("navigationPreload" in self.registration) {
+        await self.registration.navigationPreload.enable();
+      }
+    })()
+  );
+
+  // Tell the active service worker to take control of the page immediately.
+  self.clients.claim();
+});
+
+self.addEventListener("fetch", (event) => {
+  // We only want to call event.respondWith() if this is a navigation request
+  // for an HTML page.
+  if (event.request.mode === "navigate") {
+    event.respondWith(
+      (async () => {
+        try {
+          // First, try to use the navigation preload response if it's supported.
+          const preloadResponse = await event.preloadResponse;
+          if (preloadResponse) {
+            return preloadResponse;
+          }
+
+          // Always try the network first.
+          const networkResponse = await fetch(event.request);
+          return networkResponse;
+        } catch (error) {
+          // catch is only triggered if an exception is thrown, which is likely
+          // due to a network error.
+          // If fetch() returns a valid HTTP response with a response code in
+          // the 4xx or 5xx range, the catch() will NOT be called.
+          console.log("Fetch failed; returning offline page instead.", error);
+
+          const cache = await caches.open(CACHE_NAME);
+          const cachedResponse = await cache.match(OFFLINE_URL);
+          return cachedResponse;
+        }
+      })()
+    );
+  }
+
+  // If our if() condition is false, then this fetch handler won't intercept the
+  // request. If there are any other fetch handlers registered, they will get a
+  // chance to call event.respondWith(). If no fetch handlers call
+  // event.respondWith(), the request will be handled by the browser as if there
+  // were no service worker involvement.
+});

style.css

@@ -101,17 +101,17 @@ input::-webkit-calendar-picker-indicator {
     background: #6666ff;
 }
 .grid input.forbidden-value:enabled {
-    background: #ffff99;
+    background: #ffffaa;
 }
 .grid input.same-value:enabled {
     background: #ffff33;
 }
 .grid input.forbidden-value:disabled {
-    color: #ffff99;
+    color: #ffffaa;
     background: #6666ff;
 }
 .grid input.same-value:disabled, button.same-value:enabled {
-    color: #ffff99 !important;
+    color: #ffffaa !important;
     background: #00b359 !important;
 }
 .grid input.pencil, input::placeholder {

sudoku.php

@@ -1,7 +1,7 @@
 <?php
     require("classes.php");
 
-    $gridStr = basename(strip_tags($_SERVER["REQUEST_URI"]));
+    $gridStr = basename(strip_tags($_SERVER["DOCUMENT_URI"]));
     // URL contains grid
     if (preg_match("#^[1-9.]{81}$#", $gridStr)) {
 ?>
@@ -13,24 +13,25 @@
         <title>Sudoku</title>
         <link rel='stylesheet' type='text/css' href='style.css' />
         <script src='app.js'></script>
-        <link rel="apple-touch-icon" href="thumbnail.php?grid=<?=$gridStr?>&size=57"  sizes="57x57">
+        <link rel="apple-touch-icon" href="thumbnail.png.php?grid=<?=$gridStr?>&size=57"  sizes="57x57">
-        <link rel="apple-touch-icon" href="thumbnail.php?grid=<?=$gridStr?>&size=114" sizes="114x114">
+        <link rel="apple-touch-icon" href="thumbnail.png.php?grid=<?=$gridStr?>&size=114" sizes="114x114">
-        <link rel="apple-touch-icon" href="thumbnail.php?grid=<?=$gridStr?>&size=72"  sizes="72x72">
+        <link rel="apple-touch-icon" href="thumbnail.png.php?grid=<?=$gridStr?>&size=72"  sizes="72x72">
-        <link rel="apple-touch-icon" href="thumbnail.php?grid=<?=$gridStr?>&size=144" sizes="144x144">
+        <link rel="apple-touch-icon" href="thumbnail.png.php?grid=<?=$gridStr?>&size=144" sizes="144x144">
-        <link rel="apple-touch-icon" href="thumbnail.php?grid=<?=$gridStr?>&size=60"  sizes="60x60">
+        <link rel="apple-touch-icon" href="thumbnail.png.php?grid=<?=$gridStr?>&size=60"  sizes="60x60">
-        <link rel="apple-touch-icon" href="thumbnail.php?grid=<?=$gridStr?>&size=120" sizes="120x120">
+        <link rel="apple-touch-icon" href="thumbnail.png.php?grid=<?=$gridStr?>&size=120" sizes="120x120">
-        <link rel="apple-touch-icon" href="thumbnail.php?grid=<?=$gridStr?>&size=76"  sizes="76x76">
+        <link rel="apple-touch-icon" href="thumbnail.png.php?grid=<?=$gridStr?>&size=76"  sizes="76x76">
-        <link rel="apple-touch-icon" href="thumbnail.php?grid=<?=$gridStr?>&size=152" sizes="152x152">
+        <link rel="apple-touch-icon" href="thumbnail.png.php?grid=<?=$gridStr?>&size=152" sizes="152x152">
-        <link rel="icon" type="image/png" href="thumbnail.php?grid=<?=$gridStr?>&size=196" sizes="196x196">
+        <link rel="icon" type="image/png" href="thumbnail.png.php?grid=<?=$gridStr?>&size=196" sizes="196x196">
-        <link rel="icon" type="image/png" href="thumbnail.php?grid=<?=$gridStr?>&size=160" sizes="160x160">
+        <link rel="icon" type="image/png" href="thumbnail.png.php?grid=<?=$gridStr?>&size=160" sizes="160x160">
-        <link rel="icon" type="image/png" href="thumbnail.php?grid=<?=$gridStr?>&size=96"  sizes="96x96">
+        <link rel="icon" type="image/png" href="thumbnail.png.php?grid=<?=$gridStr?>&size=96"  sizes="96x96">
-        <link rel="icon" type="image/png" href="thumbnail.php?grid=<?=$gridStr?>&size=16"  sizes="16x16">
+        <link rel="icon" type="image/png" href="thumbnail.png.php?grid=<?=$gridStr?>&size=16"  sizes="16x16">
-        <link rel="icon" type="image/png" href="thumbnail.php?grid=<?=$gridStr?>&size=32"  sizes="32x32">
+        <link rel="icon" type="image/png" href="thumbnail.png.php?grid=<?=$gridStr?>&size=32"  sizes="32x32">
+        <link rel="manifest" href="manifest.json.php?grid=<?=$gridStr?>">
         <meta property="og:title" content="Sudoku"/>
         <meta property="og:type" content="website"/>
         <meta property="og:url" content="<?=$_SERVER["REQUEST_SCHEME"] . "://" . $_SERVER["HTTP_HOST"] . $_SERVER["DOCUMENT_URI"];
 ?>"/>
-        <meta property="og:image" content="<?=$_SERVER["REQUEST_SCHEME"] . "://" . $_SERVER["HTTP_HOST"] . dirname($_SERVER["DOCUMENT_URI"])?>/thumbnail.php?grid=<?=$gridStr?>&size=200"/>
+        <meta property="og:image" content="<?=$_SERVER["REQUEST_SCHEME"] . "://" . $_SERVER["HTTP_HOST"] . dirname($_SERVER["DOCUMENT_URI"])?>/thumbnail.png.php?grid=<?=$gridStr?>&size=200"/>
         <meta property="og:image:width" content="200"/>
         <meta property="og:image:height" content="200"/>
         <meta property="og:description" content="Remplissez la grille de sorte que chaque ligne, colonne et région (carré de 3×3 cases) contienne tous les chiffres de 1 à 9."/>
@@ -48,34 +49,22 @@
             <div>
                 <table id='grid' class='grid'>
                     <tbody>
-<?php
+<?php   for ($row = 0; $row < 9; $row++) {                                   ?>
-        for ($row = 0; $row < 9; $row++) {
-?>
                         <tr>
 <?php
             for ($column = 0; $column < 9; $column++) {
                 $value = $gridStr[9*$row+$column];
-?>
-                            <td>
-<?php
                 if ($value == UNKNOWN) {
 ?>
-                                <input type='number' min='1' max='9' step='1' value='' title='Valeurs possibles [Clic-droit]'/>
+                            <td><input type='number' min='1' max='9' step='1' value='' title='Valeurs possibles [Clic-droit]'/></td>
-<?php
+<?php           } else {                                                     ?>
-                } else {
+                            <td><input type='number' min='1' max='9' step='1' value='<?=$value?>' disabled/></td>
-?>
-                                <input type='number' min='1' max='9' step='1' value='<?=$value?>' disabled/>
 <?php
                 }                                                            
-?>
-                            </td>
-<?php
             }
 ?>
                         </tr>
-<?php
+<?php   }                                                                    ?>
-        }
-?>
                     </tbody>
                 </table>
             </div>
@@ -102,7 +91,6 @@
                 <button id='undoButton' type='button' onclick='undo()' disabled title='Annuler' accesskey='z'>
                     <img src="img/undo.png" alt="Annuler" width=16 height=16/>
                 </button>
-                <!--<input id='colorPicker' type='color' title='Changer de couleur de stylo' value='#00008b'/> -->
             </div>
         </form>
         <ul id="contextMenu" class="context-menu">