Installationsanleitung: EDOMI als PWA betreiben (PWA Android / GoogleChrome App)

mycroft2k

KNX Anwender

Dabei seit: 16.06.2014
Beiträge: 121

Installationsanleitung: EDOMI als PWA betreiben (PWA Android / GoogleChrome App)

21.01.2025, 17:32

Voraussetzungen

Damit Edomi als Progressive Web App (PWA) betrieben werden kann, sind folgende Voraussetzungen erforderlich:

Ein gültiges SSL-Zertifikat
Ein NGINX Reverse Proxy

Installation von NGINX

Auf dem Edomi-System muss zunächst NGINX installiert und aktiviert werden:

Code:

yum install nginx
systemctl enable nginx

Konfiguration von NGINX

Öffne die Konfigurationsdatei von NGINX mit folgendem Befehl:

Code:

nano /etc/nginx/nginx.conf

Füge die folgenden Einträge hinzu oder passe bestehende an:

Code:

server {
    listen 443 ssl http2;
    server_name edomi.pc-service.at;
    
    ssl_certificate           /etc/ssl/certs/edomi.pc-service.at-certificate-chain.pem;
    ssl_certificate_key       /etc/ssl/certs/edomi.pc-service.at-privateKey.pem;

    ssl_session_cache  builtin:1000  shared:SSL:10m;
    ssl_protocols  TLSv1.1 TLSv1.2 TLSv1.3;
    ssl_ciphers HIGH:!aNULL:!eNULL:!EXPORT:!CAMELLIA:!DES:!MD5:!PSK:!RC4;
    ssl_prefer_server_ciphers on;

    client_max_body_size 50M;

    # Edomi Visu
    location /visu/ {
    sub_filter "WebSocket(serverProtocol+'://'+serverIp+':'+serverPort)" "WebSocket(serverProtocol+'://'+serverIp+':443/wss')";
    sub_filter_types application/javascript;
    sub_filter_once off;
    proxy_pass http://10.11.2.251/visu/;
    }

    location /shared/ {
      proxy_pass http://10.11.2.251/shared/;
    }
    location /data/ {
      proxy_pass http://10.11.2.251/data/;
    }
    location /admin/ {
      proxy_pass http://10.11.2.251/admin/;
    }

    # Edomi Visu WebSocket
    location =/wss {
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_pass http://10.11.2.251:8080;
    }

}

}

Hinweise:

Ersetze edomi.pc-service.at durch deine eigene Subdomain.
Trage bei ssl_certificate und ssl_certificate_key die entsprechenden Pfade zu deinem SSL-Zertifikat ein.
Passe die IP-Adresse bei proxy_pass http:// an deine Edomi-Installation an.

Speichere die Datei und starte NGINX neu:

Code:

systemctl restart nginx

Anpassung der Edomi-Visu

Öffne die Datei index.php unter folgendem Pfad:

Code:

nano /usr/local/edomi/www/visu/index.php

Ersetze den gesamten <head>...</head>-Bereich durch den folgenden Code:

Code:

    <head>
        <script>
            const manifest = {
            name: 'SmartHome Kraml',
            short_name: 'SmartHome Kraml',
            display: 'standalone',
            theme_color: '#343434',
            background_color: '#343434',
            icons: [
            { src: `${window.location.origin}/shared/img/favicon-visu.png`, sizes: '152x152', type: 'image/png' },
            ],
            start_url: window.location.href
            };
            const link = document.createElement('link');
            link.rel = 'manifest';
            link.href = `data:application/json;base64,${btoa(JSON.stringify(manifest))}`;
            document.head.appendChild(link);
        </script>        
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="mobile-web-app-capable" content="yes">
        <meta name="format-detection" content="telephone=no">
        <meta id="meta-viewport" name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <link rel="icon" href="../shared/img/favicon-visu.png?<?echo global_version;?>">
        <link rel="apple-touch-icon" href="../shared/img/favicon-visu.png?<?echo global_version;?>">
        <title>EDOMI &middot; Visualisierung</title>
        <link rel="stylesheet" type="text/css" href="../shared/css/global.css?<?echo global_version;?>">
        <link rel="stylesheet" type="text/css" href="include/css/main.css?<?echo global_version;?>">
        <script type="text/javascript" src="../shared/js/main.js?<?echo global_version;?>"></script>
        <script type="text/javascript" src="../shared/js/camview.js?<?echo global_version;?>"></script>
        <script type="text/javascript" src="../shared/js/camview_global.js?<?echo global_version;?>"></script>
        <script type="text/javascript" src="../shared/js/graphics.js?<?echo global_version;?>"></script>
        <script type="text/javascript" src="include/js/main.js?<?echo global_version;?>"></script>
        <style id="cssAnims"></style>
        <style id="cssFonts"></style>
    </head>

Speichere die Änderungen und schließe die Datei.

Aufruf der Edomi PWA

Nachdem die Einrichtung abgeschlossen ist, kann Edomi nun über folgende URL im Browser aufgerufen werden:

Code:

https://SUBDOMAIN/visu/?visu=1&login=surface&pass=surface

Installation als App

Windows:

Rufe die oben genannte URL in einem modernen Browser (z. B. Chrome oder Edge) auf.
Klicke auf das Menü (drei Punkte oben rechts).
Wähle "App installieren" oder "Zur Taskleiste anheften".

image.png

image.png

Screenshot 2025-01-21 171614.jpg

Android (Google Chrome):

Öffne die URL im Google Chrome Browser.
Tippe auf die drei Punkte oben rechts.
Wähle "Zum Startbildschirm hinzufügen".

Nach erfolgreicher Installation kann die Edomi-Visualisierung bequem als eigenständige App genutzt werden.

Screenshot_20250121-170100.jpg

Zuletzt geändert von mycroft2k; 21.01.2025, 17:39.

Stichworte: -

Ankündigung

Installationsanleitung: EDOMI als PWA betreiben (PWA Android / GoogleChrome App)

Installationsanleitung: EDOMI als PWA betreiben (PWA Android / GoogleChrome App)