Ionic 4: externe Webseite in die App integrieren

Ehrlich gesagt, würde ich es ganz anders machen, z.B. neue Inhalte in die App als JSON laden.

Die Aufgabe was aber so: es gibt Links, die in der App angezeigt werden müssen, die werden als JSON geliefert (Link + Überschrift + Icon). Wenn man aufs Link klickt, wird Inhalt der Seite in einem neuen Bereich („News“) eröffnet. Diese Inhalte müssen auch offline verfügbar sein.

Mit Links war alles ziemich einfach: ich lade JSON, speichere in SQLite jedes Link einzeln: Link, Überschrift, Icon (als data:Url, blob-util macht dabei einen guten Job), zeige diese Links als ion-list. Wenn man auf eine Überschrift klickt, wird man auf News Page weitergeleitet, wobei das Link als State in NavigationExtras übergeben wird.

Nun kennt News Page das Link. Die Inhalte der Seite können deswegen herunterladen und auch gespeichert werden. Welche Möglichkeiten gibt’s aber, die Inhalte anzuzeigen?

  1. InAppBrowser. Es ist möglich, Inhalte sehen zwar als „fremde Inhalte“ aus, die in einem Browser angezeigt werden.
  2. ion-text oder div. Keine wirklich gute Idee, denn die Inhalte haben eigene Stylesheets/Javascripts, die das ganze App-Layout zerstören können. Man kann zwar Einiges rundum basteln, um Nebeneffekte zu vermindern, gut ist es aber nicht.
  3. iFrame. Benimmt sich wie ein Browser, das Layout der App wird nicht beschädigt, die Seite sieht gut integriert aus, unter iOS haben wir aber das Sicherheitsproblem, die man mit allow-navigation in config.xml löst, und dort darf ein Sternchen natürlich nicht stehen. Eine Variante wäre, in allow-navigation die Kundenseite einzutragen. Es gibt aber noch eine Möglichkeit, nämlich:
    – wir laden Inhalt der Seite sowieso herunter, da wir sie für offline Modus speichern müssen;
    – dieses Inhalt können wir in iFrame anzeigen (srcdoc funktioniert unter iOS sowie unter Android);
    – für allow-navigation reicht ‚about:*‘ aus, was harmlos ist;
    – wenn wir die Inhalte nicht herunterladen können, greifen wir auf das gespeichertes Inhalt für dieses Link zu.