From 9cb4a16cc2286c6fa91cbe3997561f49e9e4d888 Mon Sep 17 00:00:00 2001 From: rene Date: Mon, 27 Apr 2026 18:22:10 +0200 Subject: [PATCH] =?UTF-8?q?UX:=20Installationsanleitung=20mobile-first,=20?= =?UTF-8?q?alle=20Plattformen=20=E2=80=94=20SW=20by-v443,=20APP=5FVER=2042?= =?UTF-8?q?2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Alle 5 Fälle abgedeckt: Android+Prompt (Button), Android ohne Prompt (Chrome-Schritte), iOS Safari (Teilen-Menü), iOS non-Safari (Hinweis + Link kopieren), Desktop (Tabs Android/iOS). Steps mit Icon statt Zahl. Link-kopieren-Button für manuelle Fälle. --- backend/static/js/app.js | 2 +- backend/static/js/pages/welcome.js | 123 +++++++++++++++++++++++------ backend/static/sw.js | 2 +- 3 files changed, 102 insertions(+), 25 deletions(-) diff --git a/backend/static/js/app.js b/backend/static/js/app.js index bbac37e..d7180a4 100644 --- a/backend/static/js/app.js +++ b/backend/static/js/app.js @@ -3,7 +3,7 @@ Router, State-Management, Navigation, Initialisierung. ============================================================ */ -const APP_VER = '421'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen +const APP_VER = '422'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen const App = (() => { diff --git a/backend/static/js/pages/welcome.js b/backend/static/js/pages/welcome.js index 0fbcc0c..d857361 100644 --- a/backend/static/js/pages/welcome.js +++ b/backend/static/js/pages/welcome.js @@ -231,56 +231,112 @@ window.Page_welcome = (() => { const isIOS = /iPad|iPhone|iPod/.test(ua) && !window.MSStream; const isSafari = /^((?!chrome|android).)*safari/i.test(ua); const isAndroid = /android/i.test(ua); + const isMobile = isIOS || isAndroid; const hasPrompt = !!App.getInstallPrompt(); - if ((isAndroid || hasPrompt) && hasPrompt) { + // Android: Browser hat Install-Prompt bereit (Chrome, Edge, Samsung Internet neu) + if (hasPrompt) { return `

- Kein App Store nötig — direkt installieren. + Kein App Store nötig — direkt auf den Home-Bildschirm.

- `; } + // iOS Safari: Teilen-Menü if (isIOS && isSafari) { return `

- Auf iPhone/iPad installieren: + So kommt Ban Yaro auf deinen Home-Bildschirm:

${_steps([ - ['1', 'Teilen-Symbol in Safari tippen'], - ['2', '„Zum Home-Bildschirm" wählen'], - ['3', 'Rechts oben „Hinzufügen" tippen'], + ['share', 'Tippe unten in Safari auf das Teilen-Symbol '], + ['rows-plus-top', 'Wähle „Zum Home-Bildschirm" aus der Liste'], + ['check', 'Tippe oben rechts auf „Hinzufügen"'], ])} -

- Nur in Safari verfügbar, nicht in anderen Browsern. +

+ Funktioniert nur in Safari — nicht in Chrome oder Firefox auf iOS.

`; } + // iOS, aber nicht Safari (Chrome, Firefox, etc.) + if (isIOS && !isSafari) { + return ` +

+ Auf dem iPhone geht die Installation nur über Safari. +

+ ${_steps([ + ['safari-logo', 'Öffne Safari auf deinem iPhone'], + ['arrow-square-in','Gib banyaro.app in die Adressleiste ein'], + ['share', 'Tippe auf das Teilen-Symbol und wähle „Zum Home-Bildschirm"'], + ])} + `; + } + + // Android ohne Prompt (Firefox, älterer Samsung Browser, etc.) + if (isAndroid) { + return ` +

+ Am einfachsten geht es mit Chrome: +

+ ${_steps([ + ['arrow-square-in', 'Öffne banyaro.app in Chrome'], + ['dots-three-circle','Tippe auf das Menü ⋮ oben rechts'], + ['download-simple', 'Wähle „App installieren" oder
„Zum Startbildschirm hinzufügen"'], + ])} + `; + } + + // Desktop — beide Plattformen zeigen return ` -

- In Chrome oder Edge installieren: -

- ${_steps([ - ['1', 'Seite in Chrome oder Edge öffnen'], - ['2', 'Installations-Symbol in der Adressleiste klicken'], - ['3', 'Bestätigen — fertig!'], - ])}`; +
+ + +
+
+ ${_steps([ + ['arrow-square-in', 'Öffne banyaro.app in Chrome oder Edge'], + ['monitor', 'Klicke auf das Installations-Symbol in der Adressleiste'], + ['check', 'Bestätigen — fertig!'], + ])} +
+ `; } function _steps(list) { return `
    - ${list.map(([num, text]) => ` + ${list.map(([icon, text]) => `
  1. -
    - ${num} +
    +
    - ${text} + ${text}
    2. `).join('')}
`; @@ -301,6 +357,27 @@ window.Page_welcome = (() => { } }); + _container.querySelector('#install-copy-btn')?.addEventListener('click', async () => { + await navigator.clipboard.writeText('https://banyaro.app'); + UI.toast.success('Link kopiert!'); + }); + + // Desktop-Tabs Android / iOS + _container.querySelector('#inst-tab-android')?.addEventListener('click', () => { + _container.querySelector('#inst-panel-android').style.display = ''; + _container.querySelector('#inst-panel-ios').style.display = 'none'; + _container.querySelector('#inst-tab-android').style.cssText += ';background:var(--c-primary);color:#fff;border:none'; + _container.querySelector('#inst-tab-ios').className = 'btn btn-sm btn-ghost'; + _container.querySelector('#inst-tab-ios').style.cssText = 'flex:1'; + }); + _container.querySelector('#inst-tab-ios')?.addEventListener('click', () => { + _container.querySelector('#inst-panel-android').style.display = 'none'; + _container.querySelector('#inst-panel-ios').style.display = ''; + _container.querySelector('#inst-tab-ios').style.cssText += ';background:var(--c-primary);color:#fff;border:none'; + _container.querySelector('#inst-tab-android').className = 'btn btn-sm btn-ghost'; + _container.querySelector('#inst-tab-android').style.cssText = 'flex:1'; + }); + _container.querySelector('#welcome-register-btn')?.addEventListener('click', () => App.navigate('settings')); _container.querySelector('#welcome-login-btn')?.addEventListener('click', () => App.navigate('settings')); diff --git a/backend/static/sw.js b/backend/static/sw.js index 441db9d..948a202 100644 --- a/backend/static/sw.js +++ b/backend/static/sw.js @@ -3,7 +3,7 @@ Offline-Cache + Push Notifications + Tile-Cache ============================================================ */ -const CACHE_VERSION = 'by-v442'; +const CACHE_VERSION = 'by-v443'; const CACHE_STATIC = `${CACHE_VERSION}-static`; const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten