It’s #FrontendFriday – Trusted Web Activity

Endlich ist es wieder soweit – Es ist Freitag und das bedeutet It’s #FrontendFriday

Was ist Trusted Web Activity?

Trusted Web Activity ist eine neue Möglichkeit, eure Webinhalte mit Hilfe einer Chrome Activity im Vollbildmodus in euer Android-App zu integrieren.

Technisch ist eine Trusted Web Activity (kurz: TWA) eine besondere Version des Chrome Custom Tab (kurz: CCT). Dadurch könnt ihr viele Chrome-Features nutzen, die auch mit dem CCT möglich sind – nicht aber in der klassischen Webview.

Konkret sind das Funktionen wie Push-Benachrichtigungen, Hintergrundsynchronisierung, Autofill bei Eingabeformularen, Media-Source-Extensions oder die Sharing API. Ein weiterer Pluspunkt: Die TWA teilt den Cache, Speicher und Sessions mit dem installierten Webbrowser.

Wenn der Nutzer sich also in der TWA anmeldet, ist er es auch weiterhin beim Starten der Web-App im Browser – weil eben die Session geteilt wird.

Wie funktioniert Trusted Web Activity?

Eine TWA führt Chrome im Vollbildmodus innerhalb einer Android-Anwendung aus, ohne dass eine Browseroberfläche sichtbar ist.

Dies ist eine leistungsstarke Funktion und ist nur erlaubt, wenn die zu öffnende Seite und die Android-Applikation demselben Entwickler gehören. Diese Validierung wird durch Digital Asset Links erreicht.

Unterschied zu anderen Integrationen von Webinhalten in einer App

Inhalte in einer TWA sind vertrauenswürdig. Es wird erwartet, dass die App und die Website, die sich öffnet, vom gleichen Entwickler stammen. (Dies wird mit Hilfe von Digital Asset Links überprüft.)

Vertrauenswürdige Web-Aktivitäten kommen aus dem Web: Diese werden vom Browser des Benutzers gerendert, genau so, wie ein Benutzer es in seinem Browser sehen würde, außer, dass sie im Vollbildmodus ausgeführt werden.

Webinhalte sollten zunächst im Browser zugänglich und nützlich sein. Der Browser wird auch unabhängig von Android und Ihrer App aktualisiert

Wenn die Benutzerversion von Chrome heute keine Trusted Web-Aktivitäten unterstützt, greift Chrome über eine benutzerdefinierte Registerkarte auf eine einfache Symbolleiste zurück.

Es ist auch möglich, dass andere Browser das gleiche Protokoll implementieren, welches auch Trusted Web-Aktivitäten verwendet.

Während die Host-App das letzte Wort darüber hat, welcher Browser geöffnet wird, wird die gleiche Richtlinie wie bei Custom Tabs empfohlen: Verwende den Standardbrowser des Benutzers, sofern dieser die erforderlichen Funktionen bereitstellt.

Wofür kann dies verwendet werden?

TWAs eignen sich hervorragend, um Vollbild-Webinhalte in eine Android-Anwendung einzubinden, welcher Chrome-Funktionen benötigt, die in einem WebView nicht verfügbar ist oder wenn der Shared Origin Storage mit dem Chrome-Browser die Benutzerreise erleichtert.

Ein Beispiel dafür ist eine E-Commerce-Site, bei der Produktseiten in nativen Ansichten implementiert sind, der Checkout-Ablauf jedoch auf der Website stattfindet. Durch die Verwendung eines TWA hat die App die Leistung von Chrome und kann die One-Tap-Anmeldung von Chrome und die automatischen Formularausfüllfunktionen nutzen.

Welche Kriterien gibt es hierzu?

Alle Inhalte in TWAs müssen den Richtlinien des Play Stores entsprechen, einschließlich der Richtlinien für den Kauf innerhalb der App und anderen digitalen Gütern.

App-Nutzer erwarten ein tolles Erlebnis auf ihrem Gerät. Um die Qualität der Erfahrung zu gewährleisten, müssen TWAs die Progressive Web Apps Installationsfähigkeitskriterien erfüllen und schnell laden.

Die Ladegeschwindigkeit wird mit Hilfe von Lighthouse gemessen und Webinhalte in TWAs müssen einen Leistungswert von 80 erreichen. Lighthouse ist ein Open-Source, automatisiertes Werkzeug zur Überprüfung von Performance und progressiven Webanwendungen. Ist sowohl als Benchmark als auch zur Unterstützung bei der Erstellung besserer Websites nützlich.

Hattet ihr schon mal Erfahrung mit Trusted Web Activity? Wenn ja, welche?

Wenn es dann soweit ist – wünscht euch die WebfrontendAG ein schönes Wochenende :)

It’s #FrontendFriday – DOM vs Virtual DOM vs Shadow DOM

Hallo Liebe FrontendFriday Leser.

Um euch am Anfang maximal zu verwirren, gleich mal eine schöne Einstiegsfrage:

Was ist der Unterschied zwischen DOM und HTML DOM?

Es grenzt an Haarspalterei, aber es gibt tatsächlich einen Unterschied. DOM allein stehend ist ein W3C-Standard, welcher definiert, wie auf ein Dokument zugegriffen werden kann. Der W3C-DOM-Standard wird mit Core DOM (für alle Dokumententypen), XML DOM und HTML-DOM in drei Teile aufgeteilt. Das HTML DOM ist somit das Objektmodell und die Schnittstelle für das HTML, welches jedes HTML-Element als Objekt mit allen Eigenschaften, Methoden und Ereignissen definiert. Somit ist das HTML DOM der Standard, um HTML-Elemente zu ändern, hinzuzufügen oder zu löschen. Im folgenden Beitrag wird stellvertretend für den HTML DOM der DOM ausdruck verwendet.

Mehr

Der Bias-Effekt im Machine Learning

Künstliche Intelligenz feierte in den letzten Jahren einen Erfolg nach dem anderen: selbstfahrende Autos oder das Entsperren von Smartphones durch Gesichtserkennung waren zum Beispiel noch vor wenigen Jahren nur in Science-Fiction-Filmen denkbar. All diese Erfolge werden durch „Machine Learning“-Methoden ermöglicht. Diese mathematischen Methoden vereinen zwei Kernaspekte:

  1. Selbstverbesserung durch Lernen: Durch tausendfaches, gezieltes Ausprobieren wird nach der besten mathematischen Gleichung zwischen Eingangsdaten und Modellausgabe gesucht. Die gefundene und angepasste Gleichung wird dann als „Modell“ bezeichnet.
  2. Black Box: Während ein Ingenieur häufig mathematische Zusammenhänge auf physikalischen Prinzipien wie zum Beispiel dem Satz der Energieerhaltung aufbaut, haben Machine-Learning-Modelle diesen Anspruch nicht unbedingt. Hier ist häufig nicht genau nachvollziehbar warum ein Modell bestimmte Dinge tut und andere wiederum nicht. Genutzt wird, was funktioniert.

Mehr

It’s #FrontendFriday – Antike HTML-Elemente

Vor langer, langer Zeit im Erdmittelalter existierten sie, die antiken HTML-Elemente. Diese schon fast vergessenen Elemente sind für browserübergreifende Anforderungen besonders interessant, denn sie werden fast von allen Browsern (teils sogar IE9) unterstützt! Der folgende Beitrag soll den Leser für die Verwendung nativer Dino-Elemente sensibilisieren.

Das HTML „dl“ Element

Das HTML Description List Element sieht den Inhalt einer Liste von Begriffspaaren sowie Beschreibungen vor und wird normalerweise für die Implementierung von Schlüsselwertpaaren genutzt. Die Liste kann „dt“ sowie „dd“ Elemente enthalten.

Das HTML „dt“ Element

Das HTML Definition Term Element identifiziert einen Begriff innerhalb einer Description List und kommt in der Regel als Kindelement eines „dl“ Elements vor. 

Das HTML „dd“ Element

Das Kindelement muss innerhalb einer Description List auftreten und einem „dt“ Element folgen. „dd“ steht für das HTML Description Element.

Sheldon Cooper
„Ich mag Züge“
Albert Einstein
„Comments must start with a space“

 
Das HTML „datalist“ Element 

Das „datalist“ Element enthält eine Liste von „option“ Elementen, die mögliche Optionen für den Wert eines anderen Elementes repräsentieren und wird in im Verbund mit einem „input“ Tag verwendet.


 
Das HTML „details“ und „summary“ Tags

Mit dem „details“ Tag können dem User zusätzliche Informationen sichtbar gemacht werden. Das Ganze wird im Verbund mit dem HTML „summary“ Element verwendet.

Klick mich

Herzlichen Glückwunsch! Du hast einen Trojaner erhalten.

 
Das HTML „hr“ Element

Der Horizontal Ruler ist zur Darstellung von thematischen Brüchen gedacht und wird als waagerechte Linie dargestellt.

Heute ist Freitag


Morgen ist Samstag

 

Das HTML „optgroup“ Element

In einem Webformular erstellt das „optgroup“ HTML Element eine Gruppe von Optionen innerhalb eines „select“ Elements.


 

Das HTML „address“ Tag

Dieses Tag kann zur Darstellung von Kontaktinformationen genutzt werden.

Written by Konfu Panda.

Visit us at:
Zoo
Berlin
Germany

 

Fazit:

Es gibt eine Reihe von kaum benutzten HTML Tags. In diesem Beitrag sind einige aufgezählt. Die meisten Entwickler heutzutage benutzen die „self-build-div-jquery-Konstrukte“, obwohl es native HTML Elemente dafür gibt. Folgend einige Gründe warum man lieber auf native HTML Elemente zurückgreifen sollte: 

Native HTML Elemente werden von allen Browsern, mobile eingeschlossen, unterstützt. Nur HTML kein CSS oder JS.
Semantisches HTML ist W3C Konform und meiner Meinung nach schöner. Stichwort „Clean Code“.
Sie funktionieren ohne Frameworks/Libraries von Drittanbietern und sind somit performanter und einfacher wartbar.

Quellen:

Alle Beschreibungen aus: 

https://developer.mozilla.org/de/

 
Wow, es gibt sogar ein Progress Tag 

Das HTML „progress“ Element wird benutzt, um den Fortschritt einer Aufgabe zu visualisieren.

Subscription Management: In sechs Schritten zur einfachen Abrechnung von flexiblen Tarifmodellen

Immer häufiger entscheiden sich Kunden bei der Nutzung digitaler Dienste gegen einen einmaligen Kauf und stattdessen für ein Modell, bei dem die tatsächliche Nutzung im Vordergrund steht – und dementsprechend auch nur diese abgerechnet wird. Häufig wird auch ein Subscription (d.h. Abo-) Modell gewählt. Viele Unternehmen reagieren darauf und bieten ihre Dienstleistungen und Produkte vermehrt über flexible Nutzungs- und Preismodelle an. So haben wir in den letzten zehn Jahren einen regelrechten Boom in diesem Bereich erlebt: Netflix, Amazon Prime, Uber, Spotify oder Salesforce sind hier einige prominente Beispiele.Mehr

Gestenerkennung mit Hilfe von Convolutional Neural Network (CNN)

In unserem Beitrag „Was sind künstliche Neuronale Netze: Ein praktischer Einstieg“ sind wir bereits auf die Grundlagen zu künstlichen neuronalen Netzwerken eingegangen. In der dort vorgestellten Demoanwendung zur Erkennung von Handgesten wurde ein relativ simples Feed Forward Netz verwendet, welches in der Handhabung für den Nutzer aber mit einigen Regeln verbunden ist.Mehr

Spring Boot: Webservice Integrationstest

Spring Boot bietet mit MockMvc einen Zwischenweg zwischen einem echten Integrationstest und einem Unit-Test und ermöglicht es, einfach Integrationsaspekte zu testen. So können sich Entwickler auf die Businesslogik konzentrieren und schnell Ergebnisse liefern. Der Artikel zeigt ein vollständiges Beispiel, wie man mit Spring MockMvc eine geschützte Webschnittstelle getestet werden kann.Mehr