ESP/Arduino Website als App

Hallo zusammen,

Ist zwar kein direktes Arduino Problem, aber ich es würde mir das Ändern des arduino Code vereinfachen.

Hab mir ein kleines Netzwerk für Heimautomatisierung aufgebaut aus Shellys, Arduino mit Relays und 433MHz Steckdosen.
Alles läuft auf einem ESP8266 zusammen, der zentral alles zusammenträgt und verarbeitet.

Bis jetzt hab ich Blynk verwendet, für die Steuerung per Smartphone, aber ich finde es übertrieben den Raspberry immer laufen zu lassen, da er sonst keine Funktion daheim hat. Da es ein Raspberry 4 ist, läuft auch regelmäßig der Lüfter wegen der höheren Erwärmung.

Hab nun alternativ eine schöne Website erstellt, welche ebenfalls alles steuern kann. Diese funktioniert (dank Javascript und AJAX) eigentlich genauso gut, weshalb ich Blynk nun nicht mehr brauche.

Nun möchte ich gern die Seite an meine Familie verteilen.
Schöner fände ich es. Wenn ich die Seite in eine App einbinden kann, die dann eigenständig öffnet.
Dadurch kann ich Änderungen am ESP8266 vornehmen, ohne eine App oder ähnliches immer wieder anzupassen.

Gibt es da ein Tool oder was würdet ihr empfehlen?
Möchte nicht nun auch noch mit dem Programmieren von einer Android App anfangen.

Das was du suchst ist eine "webview" App.
Du wirst auch einige Generatoren für derartige webview APK finden.
Ich hatte das auch mal, weis aber nicht mehr genau welche...

Aber ehrlich: ob du dann die APK verteilst oder die Familie einmalig sich den Link als Icon auf den Startbildschirm legt, nimmt sich eigentlich nicht viel.

miar90:
Möchte nicht nun auch noch mit dem Programmieren von einer Android App anfangen.

Machen auch viele große bekannte Firmen nicht mehr.

ProgressiveWebApp

Dazu brauchst du ein Web App Manifest und den Service Worker.

Inzwischen gibt es “pwa builder” die das ganze recht einfach machen.

Gruß Fips

Derfips:
Machen auch viele große bekannte Firmen nicht mehr.

ProgressiveWebApp

Dazu brauchst du ein Web App Manifest und den Service Worker.
Inzwischen gibt es “pwa builder” die das ganze recht einfach machen.

Gruß Fips

Hallo Fips,
hast du einen Link zu einem PWA-Builder?
viele Grüße Stefan

StefanL38:
Hallo Fips,
hast du einen Link zu einem PWA-Builder?
viele Grüße Stefan

Google 1.Treffer

www.pwabuilder.com habe ich für meine Webseite verwendet.

Gruß Fips

OK ich hätte es präziser beschreiben sollen:

Hast du einen Link zu einem Schritt für Schritt Tutorial?

Den Link zu https://www.pwabuilder.com habe ich ausprobiert.

https://www.pwabuilder.com Das ist mal wieder einer dieser großmäuligen Ankündigungen.
Bei denen das "get started from Scratch" so gemeint ist. Lerne "from Scratch" all die Details die der Ersteller der Website zu faul war zusammenzusatellen um dann zu wissen wie man es ans laufen bringt.

Seite aufgerufen. ZIP-Datei heruntergeladen
unzip gemacht. Doppelklick auf die *.html-Dateien - nichts passiert
Scriptdatei gestartet Fehlermeldung

Ich LIEBE solche Aktionen!!! Ich habe einen unersättlichen Spieltrieb durch tagelanges herumprobieren herauszufinden wie es funktioneirt. (ne eben gerade nicht)
GRRRRR!!!!

Quickly frustrate yourself by beeing left alone

PWA-get-started-Script-Error.jpg

PWA-get-started-Script-Error.jpg

https://www.pwabuilder.com/serviceworker

Index.html/php

 <script>

 if ("serviceWorker" in navigator) {
  if (navigator.serviceWorker.controller) {
 console.log("[PWA Builder] active service worker found, no need to register");
  } else {
 // Register the service worker
 navigator.serviceWorker
  .register("pwabuilder-sw.js", {
 scope: "./"
  })
  .then(function (reg) {
 console.log("[PWA Builder] Service worker has been registered for scope: " + reg.scope);
  });
  }
 }
 </script>

Ich hoffe das passt so, da bei mir der Inhalt der pwabuilder-sw.js älter/anders ist.
Es gibt in meiner Datei kein “importScripts”, scheint alles noch Inline zu sein.

site.webmanifest

{
    "name": "Esp8266 & Esp32 Arduino",
    "short_name": "Esp8266 & Esp32 Arduino",
    "icons": [
        {
            "src": "/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "standalone"
}

Muss mich auch erst wieder auf den neuesten Stand bringen.

Gruß Fips

noiasca:
Das was du suchst ist eine “webview” App.
Du wirst auch einige Generatoren für derartige webview APK finden.
Ich hatte das auch mal, weis aber nicht mehr genau welche…

Aber ehrlich: ob du dann die APK verteilst oder die Familie einmalig sich den Link als Icon auf den Startbildschirm legt, nimmt sich eigentlich nicht viel.

Wenn ich nur den Link teile, öffnet es immer den Standard Browser. Das gefällt mir nicht.

Zum Begriff Webview gibt’s tatsächlich eine brauchbare App aus dem Appstore, bei der ich nur die Seite hinterlegen muss:
https://play.google.com/store/apps/details?id=info.android1.webview

Derfips:
Machen auch viele große bekannte Firmen nicht mehr.

ProgressiveWebApp

Dazu brauchst du ein Web App Manifest und den Service Worker.

Inzwischen gibt es “pwa builder” die das ganze recht einfach machen.

Gruß Fips

Schaue ich mir auch mal an, aber wenn ich es richtig verstehe, bietet es das gleiche Ergebnis wie diese Webview App.

Derfips:
Ich hoffe das passt so, da bei mir der Inhalt der pwabuilder-sw.js älter/anders ist.

Nachtrag:

https://fipsok.de/pwabuilder-sw.js

@ https://play.google.com/store/apps/details?id=info.android1.webview

ist nicht ganz was ich meinte. Das ist nur ein Browser mit optionalem Kiosk-Modus, aber wenns schon hilft...