Webseite auf Handy App-like darstellen

Guten Tag,

Wusste nicht genau wo dieses Thema am besten hineinpasst, deshalb habe ich es hier erstellt.

Ich habe eine Webseite entwickelt und klar kann man diese auch auf einem Smartphone öffnen, die meiner Meinung nach elegantere Lösung wäre jedoch eine App, die im Hintergrund diese Webseite aufruft. Habe bereits ein Icon, das ich verwenden möchte.

Gibt es da Tutorials bzw. wie gehe ich da vor? Ist das ein großer Aufwand? Denn eigentlich ist das doch nur ein Icon wo die URL irgendwo gespeichert werden muss?

Danke im Voraus.

Du kannst Webanwendungen so programmieren, dass sie beim Öffnen den Benutzer fragen, ob sie einen Link(Icon/Tile) auf den Startbutton legen sollen. Dann taucht beim Öffnen über das App Icon auch keine Adresszeile mehr auf.
Das sieht dann aus wie eine App und fühlt sich so an inkl. Offline Verfügbarkeit.

Beispiel: http://gregorbiswanger.github.io/MyBroker
Code dazu: https://github.com/gregorbiswanger/MyBroker/

Das ist die schnellste Art und Weise, wie man eine Webanwendung in eine "App" umwandelt kann bzw. dass sie sich so anfühlt.

PS: in Cross Platform Entwicklung - Mobile und IoT verschoben.

Hallo MoMa91,

Stichwort ist hier "Progressive Web App" oder PWA. Google hat dafür ein komplettes Tutorial. Je nachdem wo du herkommst mit deiner App (AngularCLI, Angular "self-made") kannst du Service-Worker etc. unterschiedlich einbinden.

Your First Progressive Web App

Gruss

Coffeebean

hallo,

danke mal für die Antworten, bin erst jetzt mal so richtig dazu gekommen, werde jedoch nicht ganz schlau aus den tutorials, denn mir kommt das irgendwie nach viel aufwand vor für das was ich vor habe.

habe da mal was gefunden und wollte eure Meinung dazu wissen:

www.appsgeyser.com

wo man einfach sein Icon einfügt und die URL beifügt. funktioniert das auch in einem internen Firmennetzwerk? Bzw. ist das eine Lösung, die man in einer Firma anwenden sollte?

Außerdem ist es mir wichtig, das diese App unter Android und iOS läuft.

Hallo MoMa91,

wenn du die Webseite schon hast...sollte das nicht mehr viel Aufwand sein. Je nachdem was du für eine gemacht hast. Hast du Server/Client getrennt? Kommunizierst mit REST? Gib uns mal bitte mehr Infos 😃

Ich halte von solchen "Paste deine URL - Drücke einen Knopf und alles ist fertig" gar nichts. Meiner Erfahrung nach hat das noch nie geklappt. Aber andere mögen da bessere/andere Erfahrungen gemacht haben.

Gruss

Coffeebean

Ja die Webseite ist fix fertig und ist bereits auf einem IIS Server der auf einen DB-Server (SQL Server 2014) zugreift.

Ja ich habe es probiert zum Testen mit google.de, das hat funktioniert jedoch mit dem internetlink meiner Seite happert es noch, kann eventuell daran liegen, dass sich das Diensthandy mit einem anderen Netz verbindet oder so... Installation am Android hat funktioniert jedoch wurde mir noch nichts angezeigt.

was würdest du vorschlagen?
gibt's da bessere Lösungen?

LG

Hallo MoMa91,

Ist das eine MVC-Lösung? Ist das eine Angular/React/Vue & ASP.NET Core WebAPI-Lösung?

Gruss

Coffeebean

MVC - ASP.NET 4.5.2

LG

Hallo MoMa91,

okay, dann weiss ich gerade nicht, wie weit du mit PWAs kommst. Bisher habe ich die nur mit Client/Server-Trennung gesehen.

Da du keine Clientanwendung hast, kannst du die auch nicht Cross-Platform builden (Desktop/Web/Apps für iOS, Android und WP).

Ich weiss, das du via Xamarin (Forms) deinen C# Code (oder zumindest Teile davon) wiederverwenden kannst. Ich bin aber absolut kein Xamarin-Experte 😃

Aber schau dir das mal an.

Vielleicht haben aber andere hier das schonmal gemacht und wissen mehr.

Gruss

Coffeebean

ok dann hoffe ich auf andere Antworten =)

aber danke trotzdem für die Auskunft.

LG

Hätte ja meine Anwendung grundsätzlich schon mit Bootstrap (Responsive Webdesign) implementiert.

deshalb suche ich wirklich die schnellste Lösung via URL meine Website mobil zu machen.

Der Technologiestack, den Du gewählt hast, ist so nicht 1:1 mobilfähig.

Das geht nur, wenn Deine App quasi ein Browser hostet und im Hintergrund die Webseite darstellt.
So wurden schon viele Apps gemacht (am Anfang zB. Facebook, Xing...).

Aber auch das kann man mit dem von mir oben genannten Link realisieren.
Dann halt ohne Offline-Verfügbarkeit etc. Sondern eben nur die Teile mit der Tile und dem App-Rahmen.

Den Serverteil ( ASP.NET ) kann man eh niemals Mobil umsetzen.
Dir geht es hier nur um den HTML-Teil. Das sind zwei verschiedene Paar Stiefel. Das musst verstehen.

ok verstehe ich, aber irgendwie bringt mich so eine Beispielwebseite und der code dazu nicht weiter, außerdem habe ich ja dann wieder keine App, die man auf ein Handy installiert oder?

Für mich wäre ws irgendein Tutorial leichter, wo das schritt für schritt beschrieben ist, da ich da noch nichts in der Praxis gemacht habe.

gibt's da irgendwelche links? und ist das dann auch für iOS?

Hallo MoMa91,

wenn du Server und Client trennst (Javascript/Html und WebAPI), kannst du den Client-Teil für alle Platformen builden. Ja, auch iOS. Und ja, dann kann man es auch installieren über einen Appstore. Davor brauchst du aber erstmal eine Servicearchitektur.

Aber Abt hat es schon gesagt, du wirst deine Sache nicht 1:1 mobilfähig machen können. Nicht mit den Technologien, die du derzeit gewählt hast. ASP.NET MVC ist eine serverseitige Technologie.

Hätte ja meine Anwendung grundsätzlich schon mit Bootstrap (Responsive Webdesign) implementiert.

"Hätte". Also hast du? Oder hast du nicht?

Du musst einfach sehen, dass die Technologien auf den Beispielseiten mit Beispielcode einfach andere sind.

Gruss

Coffeebean

außerdem habe ich ja dann wieder keine App, die man auf ein Handy installiert oder?

Das lässt in der Form Dein gewählter Technologiestack auch nicht zu.

Es wurde leider bisher nicht das Welt-Energieproblem gelöst und auch leider noch keine Eierlegende Wollmilchsau erfunden.
Du musst halt schon mit dem arbeiten, was technisch halt möglich ist.

Willst Du so weiter machen und eine App im Store, dann bleibt Dir nur die Möglichkeit zwei über zwei Anwendungen.
Das wird auch relativ oft so gemacht.

@coffeebean: ja habe ich.

@Abt: ok, dann habe ich wohl die falsche Technologie gewählt, eben die, die ich am umfangreichsten gelernt habe^^
Aber werde mich dann mal in das Xamarin hineinlesen, denn da verwende ich c# code und es ist dann auf allen Plattformen lauffähig.

und die App soll garnicht im Store sein, da habe ich mich dann falsch ausgedrückt, denn es geht um personenbeziehbare Daten. Es reicht wenn ich diese einfach manuell auf den verschiedenen Endgeräten installieren kann.

Brauchst Du keine App im Store, dann brauchst Du in diesem Fall kein Xamarin.
Dann haust Du einfach PWA (Progressive Web Application) Features in den HTML/JavaScript Teil und Du hast eine Webanwendung, die sich auf dem Client wie eine App anfühlt.

In Deinem Fall wird reichen: https://github.com/cubiq/add-to-homescreen

PS: personenbezogene Daten haben nichts mit pro/kontra native App zutun.
Evtl. solltest Du Dein Evaluierungsvorgehen, das sehr sehr wage und von Außen irgendwie eher dem Raten entspricht, etwas überdenken 😉

und die App soll garnicht im Store sein, da habe ich mich dann falsch ausgedrückt, denn es geht um personenbeziehbare Daten.

Dann rate ich dir tunlichst von Xamarin.iOS ab. Wenn du Apps für iOS außerhalb des AppStore verteilen willst brauchst du eine Apple Enterprise Developer Lizenz und die dotiert mit 299€/Jahr. Man könnte auch den Umweg über die AppStore-Developer-Lizenz für 99€/Jahr nehmen, und seine App dann nur via TestFlight verteilen (wobei das als Dauerlösung bestimmt in irgendeiner Weise gegen Apples AGB verstoßen würde).

Gerade bei deinem Multiplattform-Ansatz und ich davon ausgehe, dass du nur "einer" bist würde ich dir empfehlen eine WebApp aufzusetzen und deren Design via Bootstrap responsive zu machen.
Selbst bei maximal wiederverwendbarem Code ist die Entwicklung für mehrer Plattforem gleichzeitig zeitraubend (zumal wenn man sich zuerst noch einlesen muss).

Google mal nach WrapBootstrap, dort kann man viele Responsive-Templates z.T. kostenlos ansonsten für im Schnitt 15$ erwerben. Gerade bei den Admin-Templates sind häufig schon MVC-Lösungen dabei, die sich dann recht gut adaptieren lassen und dazu noch schick aussehen.

Hallo und nochmal zu dem Thema, habe mir jetzt etwas Gedanken gemacht.

Also meine WebApp ist bereits via Bootstrap responsive implementiert. es gibt die Webanwendung bereits und ich habe diese auch schon am Handy dargestellt und angesehen im Browser.

Mein Problem ist nur, dass ich aus optischen/professionellen Gründen, einen Icon auf die Handys der berechtigten Personen bringen will. die dann aussieht wie eine Handy App, jedoch den Browser aufruft und halt dann auch für iOS und Android funktioniert.

Das hald so einfach und so schnell wie möglich wenn es irgendwie möglich ist. Dachte eben dadurch mit Xamarin, da ich mit C# vertraut bin, aber wenn das so teuer ist kann ich das ja mal knicken...
was wäre deiner Meinung nach die beste Methode um meine Vorstellungen umsetzen zu können?

@Abt:

Ok, also habe ich das richtig verstanden?

Ich füge die 2 Dateien in der Web Anwendung ein, und dann binde ich diese auf jeder View im Head-Bereich ein? oder einmal im Layout?

und dann fragt mich die Internetseite beim ersten mal wenn ich sie auf einem Smart Phone aufrufe, ob ich einen Icon will? nur wie sieht der Icon dann aus?

Abt hat dir jetzt schon 2 Links gegeben wo gezeigt wird, wie man genau das realisiert inkl. einer Beispielseite, wo man es direkt ausprobieren kann.

Möchtest du jetzt noch, dass wir dir es vorsingen oder vortanzen?

Einmal mit der Nase direkt darauf stossen

Etwas hart ausgedrückt von Sir Rufo, aber inhaltlich hat er recht: Du hast alles, was Du brauchst.

Also meine WebApp ist bereits via Bootstrap responsive implementiert. es gibt die Webanwendung bereits und ich habe diese auch schon am Handy dargestellt und angesehen im Browser.

Also vorausgesetzt ich verstehe deine Problemstellung richtig:
Du kannst vom Browser aus einen Bookmark auf den Homescreen legen. Zumindest bei iOS wir der Bookmark dann mit dem Favicon abgelegt.
Siehe mein angehangenes Bild, dort habe ich den Bookmark von Golem.de abgelegt. Sieht aus wie ein App-Icon.

Falls es dich stört, dass dann der Browser statt einer App geöffnet wird kannst du einfach eine App-Hülle erstellen die nur einen Browser öffnet und die Browserzeile ausblendet. Wie gesagt bei Apple kommst du da aber nicht um eine Developer-Lizenz herum. Was ich etwas teuer finde für "professionelles Empfinden".

Die App-Hülle ist durch die von mir genannten PWA Features überhaupt nicht notwendig.
Die PWA Features erstellen ebenfalls ein App-Icon; ohne Browser-Adresse.

Man kommt sich so vor, als ob das niemand durchliest 🤔

@emuuu

Öffne folgende Seite auf einem iOS Device mit Safari
http://gregorbiswanger.github.io/MyBroker

Erstelle wie von dir genannt ein Bookmark auf dem Homescreen

Öffne den gerade erstellten Bookmark vom Homescreen

Wundern, Staunen und Begreifen ...

Die Demo App von Biswanger sollte automatisch fragen, ob ein Bookmark erstellt werden soll.
Das muss nicht manuell gemacht werden (eigentlich). Das ist ja eines der Features...

Tut sie aber nicht (wenigstens nicht bei mir) 😉

ok habe mir das jetzt angesehen und bei der MyBroker Site funktioniert das. Habe mir auch das .zip heruntergeladen jedoch ist das für mich nicht gleich so logisch welche Dateien ich nun brauche usw.
Sind viele Dateien drinnen und weis eben nicht genau ob ich da wirklich alle brauche, also auch die ordner node_modules, libs?

muss das ja in mein Projekt richtig einfügen deswegen frage ich, wenn das dann unter vorsingen fällt, dann bin ich bitte für vorsingen^^

Wie ich es aus der index.html herauslese werden nur oben im Header die 3 Sachen eingefügt wo die Kommentare stehen. und darüber noch die 2 links.

dann unten im Body noch die scripts.

das heißt wie packe ich das am besten in meine bestehende MVC Web-Anwendung? das ist eigentlich meine Frage. habe nicht mit vs code gearbeitet.

    <link type="text/css" rel="stylesheet" href="libs/materialize-css/dist/css/materialize.min.css" media="screen,projection" />
    <link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection" />

also brauche ich genau die materialize.min.css und füge diese in den Content Folder und passe das href an...

und das mache ich mit allen Dateien die ich brauche und füge diese dann je nachdem ob es css ist oder json in den entsprechenden Folder ein?

Hoffe es ist verständlich was meine Frage ist.

Also selbst mit einem Beispiel-Projekt geht es wohl nicht.

Entferne alles aus dem Projekt, was nicht ansatzweise nach diesem WepApp riecht und probiere es aus. Lass alles drin, was auf jeden Fall damit zu tun hat.

(Ja, du musst dafür in die Dateien hineinschauen)

Hier das gestrippte Projekt mit Minimal-Content

Site: https://sirrufo.github.io/MyBrokerSimple/
Source: https://github.com/SirRufo/MyBrokerSimple

also ich werde es mal ausprobieren und wenn das funktioniert sage ich danke fürs runterbrechen =)

bzw. das bedeutet eigentlich das man nur die manifest.json Datei und die Icon Images zusätzlich benötigt und nichts weiter?

@sirrufo

bei deinem Beispiel werde ich nicht gefragt wegen dem Icon wenn ich die Website zum ersten mal aufrufe, bei dem kompletten MyBroker Beispiel schon. 😦 also denke irgendetwas fehlt noch.

Wollte noch fragen, ob es eine Möglichkeit gibt, das zu testen, ohne das man die Website gleich published?

@Abt

Danke für den Tipp, habe mir da auch bei der Technologie keine Gedanken gemacht, da ich das genommen habe, was ich gelernt habe, heute würde ich es auch anders machen und wie gesagt, habe in der Praxis einfach noch nicht so viel Erfahrung, deshalb sieht es vlt so aus, nur verstehe ich nicht alles gleich so selbstverständlich auf Anhieb.^^

Kann dazu noch empfehlen:
http://www.appsgeyser.com
wo man dann hald nur Android Apps erstellen kann, funktioniert jedoch sehr einfach und ohne Kenntnisse.

Zu dem Beispiel, habe das jetzt so in meinem Code stehen.

    <!-- 1. Declare an app manifest with a manifest.json file -->
    <!-- Tipp: [URL]https://app-manifest.firebaseapp.com/[/URL] -->
    <link rel="manifest" href="~/Scripts/manifest.json">
    <meta name="theme-color" content="#1E88E5">
    <!-- Add to home screen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="IEM Dashboard">
    <link rel="apple-touch-icon" href="~/Content/images/MoMaSoftLogoTransparent.png">
    <!-- Tile Icon for Windows -->
    <meta name="msapplication-TileImage" content="~/Content/images/MoMaSoftLogoTransparent.png">
    <meta name="msapplication-TileColor" content="#1E88E5">
</head>

Aber es will nicht funktionieren... habe ich noch etwas vergessen? bzw falsch gemacht?