Foren-Icon auf Startseite von Smartphone erstellen

[eumelchen]

Hallo zusammen,

ich betreibe ein Forum für Hundeliebhaber, d.h. die meisten sind keine Technik-Freaks.
Viele Mitglieder gehen mit dem Smartphone ins Forum, schaffen es aber nicht mit den normalen Browser-Mitteln ein Icon auf dem Startbildschirm des Smartphones zu erstellen.
Wenn man dann fragt mit welchen Browser sie ins Forum gehen wissen viele keine Antwort bzw. fragen was ist ein Browser.

Jetzt zu meiner Frage.
Gibt es eine einfache Möglichkeit, einen Link, eine App oder ähnliches (kostenlos) zu erstellen der/die automatisch ein Start-Icon auf dem Starbildschirm des Smartphone erzeugt, am Besten noch Betriebssystem (Android, IOS usw.) unabhängig?

Ich würde mich sehr freuen wenn jemand da einen Tipp für mich hätte.

LG Rolf (eumelchen)

[Scanialady]

https://android-hilfe.info/lesezeichen- ... nzufuegen/ könnte weiterhelfen.

[Cowboy of Bottrop]

Das Stichwort heißt "Progressive Web App" (PWA), gibt es eine Erweiterung zu? Im offiziellen Verzeichnis finde ich da nichts zu. In mehreren WordPress-Seiten habe ich da ein entsprechendes Plugin, sowas sollte sich in phpBB doch auch umsetzen lassen.

Keep it Country,
Markus aka Cowboy

[eumelchen]

@ Scanialady
Danke, aber leider ist es so, User die noch nicht einmal wissen mt welchem Browser sie mit ihrem Smartphone ins Forum gehen, für die ist ist diese Methode ein unüberwindliches Hindernis.

@ Cowboy of Bottrop
Das klingt nach einer gutem Lösung. Kann man so eine PWA mit einer Art kostenlosem "Baukasten" vielleicht selber erstellen?

[Cowboy of Bottrop]

Ich werde mich mal damit befassen. Bei WordPress finde im Head-Bereich 4 Zeilen, die dafür zuständig sind:

Code: Alles auswählen

<!-- Manifest added by SuperPWA - Progressive Web Apps Plugin For WordPress -->
<link rel="manifest" href="/superpwa-manifest.json">
<meta name="theme-color" content="#32ad36">
<link rel="apple-touch-icon" sizes="192x192" href="https://www.server.de/path/to/image/apple-touch-icon-160x160.png">
<link rel="apple-touch-icon" sizes="512x512" href="https://www.server.de/path/to/image/apple-touch-icon-512x512.png">
<!-- / SuperPWA.com -->

Das müsste dann auf dein Forum angepasst werden und in das Template overall_header.html deines Styles eingefügt werden. Zusätzlich brauchst du natürlich die ebenfalls anzupassende .json Datei und die Grafiken für das Touch-Icon. Ob es noch mehr braucht, weiß ich (noch) nicht.

Der Inhalt der superpwa-manifest.json sieht so aus:

Code: Alles auswählen

{"name":"Name des Forums","short_name":"KurzName","description":"Beschreibung des Forums","icons":[{"src":"https:\/\/www.server.de\/path\/to\/image\/apple-touch-icon-160x160.png","sizes":"192x192","type":"image\/png"},{"src":"https:\/\/www.server.de\/path\/to\/image\/apple-touch-icon-512x512.png","sizes":"512x512","type":"image\/png"}],"background_color":"#32ad36","theme_color":"#32ad36","display":"standalone","orientation":"any","start_url":".\/?utm_source=superpwa","scope":"\/"}

Muss wie gesagt auch auf dein Forum angepasst und im Rootverzeichnis des Forums gespeichert werden. Zu beachten ist dabei, dass der short_name auf 12 Zeichen beschränkt ist.

Ich erwähnte ja bereits, dass ich nicht weiß, ob das so ausreichend ist. Käme auf einen Versuch an.

Keep it Country,
Markus aka Cowboy

[Dr.Death]

Für iOS User:

Lege in deinem Forum Root Verzeichnis (dort wo die config.php liegt) eine kleine Grafik mit dem Namen: apple-touch-icon.png ab

Füge in deinem Style in der Overall_header.html folgende Zeile hinzu:

Code: Alles auswählen

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Siehe dazu auch:
https://developer.apple.com/library/arc ... tions.html


Dann deine Benutzer diese Anleitung befolgen lassen:

https://support.apple.com/de-de/guide/i ... b2f3a7/ios

Website-Symbol auf dem Home-Bildschirm des iPhone hinzufügen
Du kannst auf dem Home-Bildschirm des iPhone ein Website-Symbol hinzufügen. Um schnell auf diese Site zuzugreifen.
Tippe auf der Website auf die Taste „Teilen“ und danach auf „Zum Home-Bildschirm“.
Das Symbol wird nur auf dem Gerät angezeigt, auf dem du es hinzugefügt hast.

Demo: www.lpi-clan.de

[eumelchen]

Vielen Dank für die bisherigen Antworten.

Ideal wäre natürlich eine Lösung für alle Systeme, notfalls könnte ich auch mit getrennten Lösungen für IOS und Android leben.

Vielleicht hat ja jemand die entsprechende Lösung und/oder der Cowboy of Bottrop findet eine funktionierende Lösung.

[vfrblue]

Hier kannst du professionell FAV-Icons erstellen lassen: https://realfavicongenerator.net oder https://www.favicon-generator.org

[HJW]

Für iOS User:

Lege in deinem Forum Root Verzeichnis (dort wo die config.php liegt) eine kleine Grafik mit dem Namen: apple-touch-icon.png ab

Füge in deinem Style in der Overall_header.html folgende Zeile hinzu:

Code: Alles auswählen

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Siehe dazu auch:
https://developer.apple.com/library/arc ... tions.html


Dann deine Benutzer diese Anleitung befolgen lassen:

https://support.apple.com/de-de/guide/i ... b2f3a7/ios

Website-Symbol auf dem Home-Bildschirm des iPhone hinzufügen
Du kannst auf dem Home-Bildschirm des iPhone ein Website-Symbol hinzufügen. Um schnell auf diese Site zuzugreifen.
Tippe auf der Website auf die Taste „Teilen“ und danach auf „Zum Home-Bildschirm“.
Das Symbol wird nur auf dem Gerät angezeigt, auf dem du es hinzugefügt hast.

Demo: www.lpi-clan.de

Vielen Dank für die bisherigen Antworten.

Ideal wäre natürlich eine Lösung für alle Systeme, notfalls könnte ich auch mit getrennten Lösungen für IOS und Android leben.

Vielleicht hat ja jemand die entsprechende Lösung und/oder der Cowboy of Bottrop findet eine funktionierende Lösung.

Das funktioniert auch unter Android:
Nach dem Aufruf der Seite das Menü oben rechts (die 3 Punkte) öffnen -> Seite -> Seitenverknüpfung hinzufügen

[eumelchen]

Das funktioniert auch unter Android:
Nach dem Aufruf der Seite das Menü oben rechts (die 3 Punkte) öffnen -> Seite -> Seitenverknüpfung hinzufügen

So wie es aussieht sind aber dann die Bezeichnungen und teilweise der Weg in den verschiedenen Browsern unterschiedlich und das würde meine User sehr verwirren.
Es ist auch nicht sehr übersichtlich, abgesehen von der Arbeit, eine Anleitung für sämtliche Browser zu schreiben.