Offline indicator and minor tweak

README.md

@@ -4,8 +4,7 @@
 
 This application is a PWA (Progressive Web Application) built with Symfony and PHPWA.
 
-## Getting Started (Docker)
-
+## Getting Started
 
 ### With Docker
 
@@ -28,12 +27,6 @@ This application is a PWA (Progressive Web Application) built with Symfony and P
 8. Open `https://localhost:8000` in your favorite web browser
 9. Run `symfony server:stop` to stop the server
 
-## Getting Started
-
-Install Symfony CLI and PostgreSQL
-
-bin/console d:d:c
-
 ## License
 
 It is available under the MIT License.

assets/app.js

@@ -6,5 +6,3 @@ import './bootstrap.js';
  * which should already be in your base.html.twig.
  */
 import './styles/app.css';
-
-console.log('This log comes from assets/app.js - welcome to AssetMapper! 🎉');

assets/controllers/connection-detector_controller.js

@@ -0,0 +1,46 @@
+import { Controller } from '@hotwired/stimulus';
+
+/* stimulusFetch: 'lazy' */
+export default class extends Controller {
+    static targets = ['pill', 'description', 'color']
+
+  connect() {
+    if (navigator.onLine) {
+      this.showOnline();
+    } else {
+      this.showOffline();
+    }
+
+    window.addEventListener("offline", () => {
+      this.showOffline();
+    });
+    window.addEventListener("online", () => {
+      this.showOnline();
+    });
+  }
+
+disconnect() {
+    window.removeEventListener("offline");
+    window.removeEventListener("online");
+  }
+
+  cleanupClasses() {
+    this.colorTarget.classList.remove('text-green-800', 'border-green-300', 'bg-green-50', 'dark:text-green-300', 'dark:border-green-800');
+    this.colorTarget.classList.remove('text-red-800', 'border-red-300', 'bg-red-50', 'dark:text-red-300', 'dark:border-red-800');
+    this.colorTarget.classList.remove('text-yellow-800', 'border-yellow-300', 'bg-yellow-50', 'dark:text-yellow-300', 'dark:border-yellow-800');
+  }
+
+  showOnline() {
+    this.cleanupClasses();
+    this.colorTarget.classList.add('text-green-800', 'border-green-300', 'bg-green-50', 'dark:text-green-300', 'dark:border-green-800');
+    this.pillTarget.innerHTML = 'Online';
+    this.descriptionTarget.innerHTML = 'You are currently online. You can now continue using the application.';
+  }
+
+  showOffline() {
+    this.cleanupClasses();
+    this.colorTarget.classList.add('text-red-800', 'border-red-300', 'bg-red-50', 'dark:text-red-300', 'dark:border-red-800');
+    this.pillTarget.innerHTML = 'Offline';
+    this.descriptionTarget.innerHTML = 'You are currently offline. Please check your internet connection and try again.';
+  }
+}

config/packages/security.yaml

@@ -10,8 +10,10 @@ security:
             pattern: ^/(_(profiler|wdt)|css|images|js)/
             security: false
         main:
-            lazy: true
-            provider: users_in_memory
+            pattern: ^/
+            security: false
+#            lazy: true
+#            provider: users_in_memory
 
             # activate different ways to authenticate
             # https://symfony.com/doc/current/security.html#the-firewall

importmap.php

@@ -31,31 +31,31 @@
         'version' => '4.1.0',
     ],
     'date-fns' => [
-        'version' => '2.30.0',
+        'version' => '3.3.1',
     ],
     '@babel/runtime/helpers/esm/typeof' => [
-        'version' => '7.23.8',
+        'version' => '7.24.0',
     ],
     '@babel/runtime/helpers/esm/createForOfIteratorHelper' => [
-        'version' => '7.23.8',
+        'version' => '7.24.0',
     ],
     '@babel/runtime/helpers/esm/assertThisInitialized' => [
-        'version' => '7.23.8',
+        'version' => '7.24.0',
     ],
     '@babel/runtime/helpers/esm/inherits' => [
-        'version' => '7.23.8',
+        'version' => '7.24.0',
     ],
     '@babel/runtime/helpers/esm/createSuper' => [
-        'version' => '7.23.8',
+        'version' => '7.24.0',
     ],
     '@babel/runtime/helpers/esm/classCallCheck' => [
-        'version' => '7.23.8',
+        'version' => '7.24.0',
     ],
     '@babel/runtime/helpers/esm/createClass' => [
-        'version' => '7.23.8',
+        'version' => '7.24.0',
     ],
     '@babel/runtime/helpers/esm/defineProperty' => [
-        'version' => '7.23.8',
+        'version' => '7.24.0',
     ],
     'mustache' => [
         'version' => '4.2.0',

templates/homepage/index.html.twig

@@ -3,7 +3,6 @@
 {% block title %}Symfony+PWA=💕{% endblock %}
 
 {% block body %}
-
     <section class="bg-white dark:bg-gray-900">
         <div class="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16 lg:px-12">
             <a href="https://pwa.spomky-labs.com" class="inline-flex justify-between items-center py-1 px-1 pr-4 mb-7 text-sm text-gray-700 bg-gray-100 rounded-full dark:bg-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700" role="alert">
@@ -18,6 +17,18 @@
             </p>
         </div>
     </section>
+    <section class="bg-white dark:bg-gray-900">
+        <div class="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16 lg:px-12" {{ stimulus_controller('connection-detector') }}>
+            <div {{ stimulus_target('connection-detector', 'color') }} class="flex items-center p-4 mb-4 text-sm border rounded-lg dark:bg-gray-800 text-yellow-800 border-yellow-300 bg-yellow-50 dark:text-yellow-300 dark:border-yellow-800" role="alert">
+                <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+                    <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
+                </svg>
+                <div>
+                    <span class="font-medium" {{ stimulus_target('connection-detector', 'pill') }}>Connection status</span>: <span {{ stimulus_target('connection-detector', 'description') }}>We are trying to guess what is the current status of your Internet connection</span>
+                </div>
+            </div>
+        </div>
+    </section>
     <div class="antialiased">
         <main class="max-w-6xl px-4 py-12 mx-auto sm:px-6 lg:px-8">