Hyperlinking jenseits des Webs

Avatar of Atishay Jain
Atishay Jain am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Hyperlinks sind das älteste und beliebteste Merkmal des Webs. Das Wort Hypertext (was das ht in http/s bedeutet) bedeutet Text mit Hyperlinks. Die Fähigkeit, auf den Hypertext anderer zu verlinken, machte das Web zu einem Web – einer Sammlung verbundener Seiten. Dieses grundlegende Merkmal hat das Web zu einer sehr mächtigen Plattform gemacht, und es ist offensichtlich, dass die Welt der Apps diese Funktion benötigt. Alle modernen Plattformen unterstützen eine Möglichkeit für Apps, eine URI (benutzerdefinierter Protokoll) zu registrieren und auch universelle Links (die Web-Links in einer App verarbeiten) zu haben.

Schauen wir uns an, warum wir diese Funktion nutzen möchten und wie wir das tun.

Warum überhaupt App-Links?

Die Erstellung von URIs, die Apps öffnen können, bietet eine einzigartige Reihe von Vorteilen. Eine URL kapselt den gesamten Zustand einer Webseite (früher vor dem Aufkommen von Single Page Applications (SPAs) mit viel JavaScript, und auch in diesen ist es bewährte Praxis, diese Funktionalität beizubehalten) oder einer Webanwendung, und es ist ratsam, Routing in Anwendungen zu haben, sodass eine URL-Navigation nie unterbrochen wird. URLs haben es Browsern ermöglicht, konsistente Vorwärts- und Rückwärtstasten sowie Seiten zum Neuladen und Lesezeichen zu haben. Und Dinge wie die Suche von Google hängen von Webseitenadressen und Webanwendungen ab, um Benutzer an den richtigen Ort zu navigieren. Das Ermöglichen des Öffnens von URLs durch Anwendungen bietet eine Möglichkeit, Inhalte und Funktionalitäten in Ihrer Anwendung von anderen Anwendungen, Websites und sogar intern innerhalb der Anwendung zu verlinken, wie z. B. Hilfe-/Tutorial-Seiten.

Trivia! Desktop-Anwendungen hatten Hyperlinks schon vor dem World Wide Web, wie z. B. Hypercard auf dem Mac im Jahr 1987 und Windows Help im Jahr 1990. Das Revolutionäre an Hyperlinks im Web ist, dass man Inhalte verlinken kann, die von anderen erstellt wurden und denen sie gehören. Dieses Konzept der App-übergreifenden Verknüpfung war auf traditionellen Plattformen bis zum Aufkommen von Smartphones nicht populär.

App-Links über die Kommandozeile

Es gibt bereits eine Shell für die Kommandozeilenschnittstelle, und diese unterstützt das Übergeben von Argumenten, das Umleiten von Ergebnissen von einer Anwendung zur anderen und sogar Scripting. Dennoch ist die Notwendigkeit der Unterstützung von Hyperlinks aus verschiedenen Gründen wünschenswert.

  • Sicherheit: Das Kommandozeilen-Skript ist zu kompliziert, um es richtig zu machen. Es ist sehr riskant, von Technologiebenutzern (die keine Entwickler sind) zu erwarten, dass sie verstehen, wie man ein Kommandozeilen-Skript bereinigt und sicherstellt, dass das Skript nicht versehentlich etwas aufruft wie rm -rf ~/Documents. Die Kommandozeile ist nicht sandboxed und obwohl sie Macht bietet, liegt die Verantwortung bei den Benutzern und sie ist anfällig für Exploits.
  • Browser-Unterstützung: Der Browser kann keine Kommandozeilenschnittstelle bereitstellen. Er ist darauf ausgelegt, nicht vertrauenswürdigen Code von Drittanbietern in einer Sandbox auszuführen, und das darf nicht gebrochen werden. Und wenn wir die Regeln der Webtechnologie nicht respektieren, isoliert sich die App vom Internet. Das ist zu viel, um es zu verlieren.
  • Mobil: In der mobilen Welt ist eine Touch-Tastatur nicht so gut und intuitiv wie die physischen, die auf dem Desktop verwendet werden. Daher wäre die Kommandozeile, selbst wenn sie vorhanden wäre, sehr schwer zu bedienen. Die gesamte Macht der Umleitung und Verkettung ist nicht so effektiv wie auf einer Tastatur-basierten Kommandozeile. Eine einfachere Lösung wie eine URL ist in diesem Kontext wünschenswerter.
  • Status: Theoretisch kann die Kommandozeilenschnittstelle einen Weg bieten, die Anwendung in jedem Zustand verfügbar zu haben. Aber praktisch wurde sie für einen anderen Zweck entwickelt: die Anwendung zu starten, um eine Aufgabe auszuführen, und dann mit einem Code zurückzukehren. Außerdem wurde sie von den grafischen Benutzeroberflächen (Graphical User Interfaces - GUIs) in Windows und Mac de-priorisiert. Viele Anwendungen (wie Microsoft Word und Adobe Photoshop) hatten nie eine vollwertige Kommandozeilenunterstützung. Sie sind nicht einmal in der Umgebung PATH vorhanden und benötigen den vollständigen Pfad, um gestartet zu werden. URIs bieten einen neuen Weg, um Informationen und Funktionalitäten zwischen Anwendungen zu verbinden. Sie sind eine sichere, moderne Methode der Inter-App-Kommunikation, bei der der Benutzer nicht nachdenken muss.

Verknüpfungsterminologie

Deep Link

Deep Link ist das Konzept, bei dem eine bestimmte Seite/Funktionalität innerhalb der Website/Anwendung verlinkt werden kann. Zum Beispiel ist https://css-tricks.de/link/to/this/page ein Deep Link für diese Seite innerhalb des breiteren Links https://css-tricks.de. Im Gegensatz zu oberflächlichen Links, die Anwendungen öffnen, öffnen Deep Links die Anwendung in einem bestimmten Zustand, mit übergebenen Daten, bereit zur Verwendung. Benutzerdefinierte URIs (weiter unten beschrieben) waren die ersten Wege, um Deep Linking innerhalb der App zu erreichen, und „Deep Linking“ ist in vielen Kontexten jetzt gleichbedeutend mit benutzerdefinierten URIs, obwohl es auch Universal Links bedeuten kann.

Benutzerdefinierter URI

Das Web hatte schon immer bestimmte benutzerdefinierte URIs, die zu Standardanwendungen verlinkten, wie z. B. mailto:[email protected] und tel:1234567890 für E-Mail und Telefon. Es war eine offensichtliche Wahl, dies zu erweitern, und alle wichtigen Plattformen bieten eine Möglichkeit für eine App, ein URI-Protokoll zu registrieren – wie css-tricks://<Link-Details> – das eine tief verknüpfte native Anwendung öffnen kann. Es sollte den gesamten Status kapseln und alle Routing-Vorteile bieten, um die App zu öffnen, wenn sie auf dem System verfügbar ist. Diese bieten eine gute Schnittstelle für die Inter-App-Kommunikation, wenn die Anwendung bereits installiert ist und der Wunsch besteht, die bevorzugte Anwendung des Benutzers (wie den Browser oder den E-Mail-Client) zu öffnen, die das gewünschte Protokoll implementiert.

Benutzerdefinierte URIs sind großartig für die Klasse von Anwendungen, bei denen der Benutzer die Wahl haben möchte, eine App auszuwählen, um eine bestimmte Entscheidung zu treffen, aber sie sind nicht großartig für die Aufgabe, die Website mit der nativen Anwendung zu verknüpfen, aus folgenden Gründen:

  • Installation: Im Gegensatz zum Web müssen native Apps installiert werden, und wenn sie nicht installiert sind, haben Sie zwei Möglichkeiten: Senden Sie den Benutzer zum App Store (der ebenfalls einen benutzerdefinierten URI anbietet) oder machen Sie einen ordnungsgemäßen Fallback. Beide Aufgaben erfordern zusätzlichen Code, den der URI nicht kapselt. Der App Store URI wäre ein weiterer separater URI, den wir speichern müssten. Zusätzlich müssen wir erkennen, ob die App installiert ist, was eine Navigation zum URI und die Behandlung des Navigationsfehlers ähnlich wie bei einem 404 erfordert, da das Protokoll nicht registriert ist. Das ist nicht so einfach wie ein Anker-Tag (<a href="{URL}"></a>) und daher eine häufige Quelle für Entwicklerbeschwerden.
  • Fehlende zentrale Registrierung: Selbst wenn alles perfekt gemacht wird, können Benutzer immer noch in eine Anwendung geraten, zu der sie nicht hätten verlinkt werden sollen. Im Gegensatz zum DNS-System (das die Einzigartigkeit von Domain-Namen garantiert) haben Anwendungsplattformen kein zentrales Repository. So könnten mehrere Apps csstricks als benutzerdefinierten URI registrieren. Nun könnte jemand anderes denselben URI wie eine App registrieren, und wenn die andere Anwendung auf dem System installiert ist anstelle der gewünschten, könnte diese stattdessen gestartet werden. Die Freiheit eines benutzerdefinierten URI zur App-Auswahl widerspricht dem Fall, dass wir immer eine bestimmte Anwendung öffnen möchten.
  • Drittanbieter-Verlinkung: Das Geben eines benutzerdefinierten URI an Dritte ist aufgrund der oben genannten Probleme umständlich und die Verifizierung ist schmerzhaft. Es ist auch ein neues Protokoll. Jede Website enthält Links zu Web-Inhalten und die Aktualisierung des gesamten Internets ist nicht möglich. Es mag auch aus SEO-Gründen nicht erwünscht sein.

Wenn wir dem Benutzer also die Erfahrung bieten möchten, dass die App die bevorzugte Art ist, Inhalte anzuzeigen, sind benutzerdefinierte URIs nicht die perfekte Lösung. Dies kann bis zu einem gewissen Grad mit Smart App Bannern gemildert werden, bei denen das Banner angezeigt wird, wenn der Browser den benutzerdefinierten URI und den App Store-Link zur Identifizierung der Anwendung erhält. Aber das wird nicht nahtlos sein.

Trivia! URIs und URLs unterscheiden sich definitionsgemäß leicht, obwohl sie austauschbar verwendet werden. URI steht für Uniform Resource Identifier, was bedeutet, dass er alles kapselt, was zur Abfrage einer Ressource erforderlich ist. URL (Uniform Resource Locator) ist ein spezieller Typ von URI, der die Ressource im Web identifiziert. Technisch gesehen ist eine Webadresse eine URL, aber etwas wie csstricks:// wäre nur ein URI.

Dies sind alles mögliche Anwendungsfälle, bei denen ein benutzerdefinierter URI sinnvoll sein könnte.

  • Sie müssen eine URI bereitstellen, die viele Client-Apps von Drittanbietern registrieren können. Sagen wir, Sie haben ein git:// in Ihrer App und der bevorzugte Git-Client des Benutzers könnte diese URI registrieren und das Repository klonen, wenn auf den Link geklickt wird.
  • Sie haben keine voll ausgestattete Website.
  • Sie benötigen eine URI, die für Benutzer leicht zu merken ist.
  • Sie sind bereit, alle Randfälle im Zusammenhang mit der Navigation zu behandeln.

Sie können benutzerdefinierte URIs parallel zu den Universal Links verwenden, die wir als nächstes behandeln werden, und sie können davon profitieren, die benutzerdefinierte URL für die Inter-App-Kommunikation bereitzustellen, während der Universal Link für den Sonderfall der Web-zu-App-Navigation beibehalten wird. Android nennt benutzerdefinierte URIs offiziell Deep Links.

Kontrollflüsse für Custom URI, Universal Link und Instant Apps
Universal Link, App Link oder App URI

Die Lösung für das Problem der Web-zu-App-Umleitung kann mit dem Universal Link (wie er unter Mac und iOS genannt wird), App Link (wie er unter Android genannt wird) oder App URI (wie er unter Windows UWP genannt wird), die unterschiedliche Namen für dasselbe Konzept sind, gelöst werden. Dies kapselt die Logik, die jede Website schreiben muss, um installierte Apps zu erkennen, korrekte Seiten zu starten und Navigationsfehler im Falle von benutzerdefinierten URLs zu behandeln. Es ist dem Smart App Banner sehr ähnlich, da Sie eine App Store-Verknüpfung zu Ihrer Anwendung auf Ihrer Website zur Verifizierung bereitstellen müssen, aber es beseitigt alle Redundanz. Da die bestehende http(s)-URL bereits den gesamten Status enthält, ist die Registrierung des benutzerdefinierten URI redundant. Die ursprüngliche URL könnte selbst zur App navigieren, wobei die Website eine Fallback-Erfahrung bietet, falls die Anwendung nicht installiert ist.

Sobald Sie Ihre App mit einem Universal Link registriert haben, geht das Betriebssystem, wenn die App installiert ist, ins Internet, um die Menge der Links herauszufinden, die die App unterstützt. Wann immer einer dieser Links angeklickt wird, wird die native App anstelle des Browsers gestartet. Die vollständige Adressierungsunterstützung ist jetzt in der Anwendung verfügbar, wo eine stärker angepasste Erfahrung bereitgestellt werden kann, die im Falle einer nicht installierten Anwendung zum Browser zurückfällt. Ein wichtiger Unterschied bei Universal Links ist, dass sie die normale Browsing-Nutzung beeinflussen und daher von den Betriebssystemanbietern streng kontrolliert werden.

Einige gute Anwendungsfälle für Universal Links sind:

  • Sie haben eine voll ausgestattete Website für einen Fallback.
  • Der gewünschte Ablauf für Benutzer ist von der Website zur App.
  • Sie haben bereits viel Karma aufgebaut, indem Sie Inhalte von Ihrer Website im Web verlinkt haben.

Instant Link oder Deferred Deep Link

Deferred Deep Links stellen das fehlende Stück zu den Deep Links bereit, wenn der Benutzer die App installiert, nachdem der Link geöffnet wurde. Der Benutzer kann zum App Store weitergeleitet werden, und der App Store kümmert sich um die Beibehaltung des Kontexts, wenn die App nach der Installation schließlich gestartet wird. Dies bietet Kontinuität im Fall, dass eine App installiert wird. Derzeit wird diese Methode nur von Android unterstützt (als Google Play Instant) und ist die Option, wenn Sie möchten, dass Benutzer die App verlassen, um die gewünschte Funktionalität zu erhalten. Das Hyperlinks-System im Web ist nahtlos, und das Klicken auf einen Link bringt Sie fast sofort zum Ziel (obwohl im Hintergrund viel passiert). Deferred Deep Links bieten die gleiche Funktionalität für Apps, bei denen das Klicken auf einen Link die App herunterladen und mit der richtigen Seite starten kann, wodurch alle Aufgaben bei der App-Installation so nahtlos wie möglich gestaltet werden.

Sie könnten die Verwendung von Instant Links in Betracht ziehen, wenn:

  • Sie möchten, dass Benutzer die App und nicht die Website verwenden, auch wenn sie aus dem Browser kommen (außer in seltenen Fällen, in denen sie wenig Speicherplatz haben oder diese Funktion zur Bandbreiteneinsparung deaktiviert haben).
  • Ihre wichtigsten Seiten sind in Ihrer Anwendung immer aktuell.
  • OK, verwenden Sie sie immer. Mit den zusätzlichen SEO-Vorteilen, die Google für Instant Apps bietet, gibt es keinen Grund, "Instant" Apps für eine App, die Universal Links hat, nicht zu aktivieren.

Nachdem wir nun eine Zusammenfassung der Bedeutungen jedes Begriffs haben, sehen wir uns an, wie wir diese auf spezifischen Plattformen erstellen können.

Einrichten von Anwendungs-Hyperlinks

MacOS und iOS

Benutzerdefinierter URI

Das Registrieren eines benutzerdefinierten URI in MacOS und iOS ist extrem einfach. Gehen Sie in Xcode zur Datei Info.plist des Projekts und wählen Sie die Option URL Types. Erstellen Sie ein Element vom Typ URL Schemes innerhalb der Datei, in dem Sie alle gewünschten URL-Schemata hinzufügen können.

Hinweis: Der von Xcode standardmäßig in URL Types eingefügte URL Identifier ist optional.

URL-Schema in Xcode
<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>css-tricks</string>
    </array>
  </dict>
</array>

Für MacOS erhalten Sie Aufrufe an die AppDelegate, wo Sie die Funktion überschreiben können

func application(_ application: NSApplication, open urls: [URL]) {
  // Select the first URL in the list of URL to open
  let url = urls[0]; 
  // Log the entire URL
  NSLog("%@", url.absoluteString)
}
-(void)application:(NSApplication *)application openURLs:(NSArray<NSURL *> *)urls {
  NSLog(@"%@", urls[0].absoluteString);
}

In iOS ist die Funktion, um denselben Aufruf in AppDelegate zu empfangen:

func application(_ app: UIApplication, open url: URL, options: [UIApplicationOpenURLOptionsKey : Any] = [:]) -> Bool {
  NSLog("%@", url.absoluteString)
  return true
}
-(BOOL)application:(UIApplication *)app openURL:(NSURL *)url options: (NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
  NSLog(@"%@", url.absoluteString);
  return true;
}

Der URL-Typ enthält in all diesen Fällen die üblichen URL-Teile wie den Pfad, die Abfrage und die Suchparameter.

Universal Links

Universal Links werden unter MacOS nicht unterstützt. Um Universal Links unter iOS zu erhalten, müssen Sie beim Apple Developer Program registriert sein oder Mitglied des Apple Developer Enterprise Program sein. Universal Links auf iOS sind Teil eines breiteren Konzepts von zugeordneten Domänen (associated domains), bei denen die Geheimnisse der Website, wie gespeicherte Anmeldedaten, aus der App heraus aufgerufen werden können, und Apple erlaubt normalen Xcode-Benutzern nicht, mit Universal Links zu experimentieren (wenn Sie die Funktionalität für Ihre App-ID versehentlich aktivieren, aber dies nicht in die Berechtigungen aufnehmen, seien Sie auf eine Validierungsfehlermeldung vorbereitet: FEHLER ITMS-90046: „Ungültige Code-Signing-Berechtigungen“).

Trivia! Universal Links sind ein neues Konzept, und viele Mac- und Windows-Desktop-Anwendungen sind mit eigenen Netzwerksstacks aufgebaut, verwenden den App Store nicht und wurden möglicherweise vor Jahren veröffentlicht. Daher hat das Betriebssystem nicht die erforderliche Kontrolle, um alle Anwendungen zu zwingen, dem Universal Link-Konzept zu folgen und die App zu öffnen. Apple hat sich entschieden, Universal Links unter macOS noch nicht zu implementieren, während sie unter Windows nur im Microsoft Edge-Browser und anderen UWP-Apps (die dieselbe Technologie verwenden) funktionieren.

Um sich für Universal Links unter iOS zu registrieren, müssen Sie Folgendes tun:

  1. Aktivieren Sie die App-ID auf der Apple Developer-Website, um die Funktion für zugeordnete Domänen zu erhalten.
  2. Fügen Sie die zugeordneten Domänen zur Berechtigungsdatei hinzu.
  3. Fügen Sie eine apple-app-site-association-Datei zur Web-Domäne hinzu, um den Besitz der Anwendung zu verifizieren.
  4. Fügen Sie Code hinzu, um Klicks auf Universal Links zu verarbeiten.

Schritte 1 und 2 können gemeinsam im Tab „Capabilities“ in Xcode durchgeführt werden, wenn Sie angemeldet sind und das richtige Profil ausgewählt haben (das von einem Apple Developer oder Enterprise-Konto stammt). Die Xcode-Oberfläche zeigt an, dass beide Elemente abgeschlossen wurden.

Associated Domains im Capabilities-Bereich in Xcode

Im obigen Bild wurde Schritt 2 erfolgreich abgeschlossen, während Schritt 1 noch aussteht. Sie können auf das Ausrufezeichen klicken, um das Problem zu finden. Es ist wichtig, der Domäne applinks: voranzustellen (was angibt, dass Sie die App-Links-Funktionalität benötigen; dasselbe wird für freigegebene Anmeldedaten verwendet). Dies zeigt an, dass die App-Link-Funktion aktiviert wurde.

Die obigen Schritte können auch einzeln ausgeführt werden.

Für Schritt 1 aktivieren Sie Associated Domains im Abschnitt App ID auf der Entwickler-Website (im Bild unten gezeigt).

Apple Developer Website zur Aktivierung von zugeordneten Domänen

Für Schritt 2 fügen Sie Folgendes zur Berechtigungsdatei hinzu:

Berechtigungen plist
<key>com.apple.developer.associated-domains</key>
<array>
  <string>applinks:css-tricks.com</string>
</array>

Fügen Sie nun für Schritt 3 eine Verknüpfungsdatei apple-app-site-association wie https://css-tricks.de/apple-app-site-association mit dem MIME-Typ application/json vom Stammverzeichnis Ihrer Website hinzu:

{
  "applinks": {
    "apps": [],
    "details": {
      "ABCDEFGHIJ.com.ccs-tricks.mobile": {
        "paths": [
          "*"
        ]
      }
    }
  }
}

Der obige Ausschnitt gewährt der App mit der ID ABCDEFGHIJ.com.ccs-tricks.mobile Zugriff auf alle Anfragen auf der Domäne https://css-tricks.de. Beachten Sie, dass dies mit https funktioniert, aber http nicht unterstützt wird. Sie können auch einen alternativen Speicherort wie https://css-tricks.de/.well-known/apple-app-site-association verwenden. Diese URL wird bevorzugt, da sie die Zuordnungsdateien für Android, iOS und UWP in einem sicheren separaten Ordner aufbewahren kann, der nicht versehentlich gelöscht werden kann.

Trivia! Universal Links garantieren nicht, dass die App geöffnet wird. Wenn der Benutzer in iOS über die Kopfzeile zur Website zurückkehrt, entscheidet das Betriebssystem, standardmäßig zur Website zu wechseln, bis der Benutzer sich entscheidet, die App zu verwenden, indem er erneut von Safari auf die Kopfzeile klickt.

Fügen Sie für Schritt 4 den folgenden Code zur App hinzu:

func application(_ application: UIApplication, continue userActivity: NSUserActivity, restorationHandler: @escaping ([Any]?) -> Void) -> Bool {
  if userActivity.activityType == NSUserActivityTypeBrowsingWeb {
    let url = userActivity.webpageURL!
    print(url.absoluteString)
  }
  return true
}
-(BOOL)application:(UIApplication *)application continueUserActivity:(NSUserActivity *)userActivity restorationHandler:(void (^)(NSArray * _Nullable))restorationHandler {
  if(userActivity.activityType == NSUserActivityTypeBrowsingWeb) {
    NSLog(@"%@", userActivity.webpageURL.absoluteString);
  }
  return true;
}

Smart App Banner auf iOS sind viel einfacher und können über ein einfaches Meta-HTML-Tag im Head-Bereich wie folgt hinzugefügt werden:

<meta name="apple-itunes-app" content="app-id=123456789, app-argument=https://css-tricks.de/linkto/this/article, affiliate-data=optionalAffiliateData">

Sie rufen dieselbe Methode auf wie Custom URIs, die wir zuvor behandelt haben.

Windows (Traditionell)

Auf der traditionellen Windows-Plattform (Win32/.NET) ist der benutzerdefinierte URI (genannt Custom Pluggable Protocol Handler) die einzige unterstützte Funktion. Das Hinzufügen eines benutzerdefinierten URI in Windows beinhaltet das Hinzufügen eines Registrierungseintrags unter HKEY_CLASSES_ROOT. Das Folgende öffnet die App mit dem absoluten Pfad, der beim Klicken auf einen Link zu css-tricks://<Text> angegeben wird. Aufgrund der Verwendung der Kommandozeile öffnet dies immer eine neue Instanz der App und sendet die URL nicht an die bereits laufende Anwendung.

Registrierungseintrag zur Angabe des Anwendungsnamens
Registrierungseintrag für den offenen Befehl
Windows Registry Editor Version 5.00

[HKEY_CLASSES_ROOT\css-tricks]
"URL Protocol"=""
@="CSS Tricks (Application name)"

[HKEY_CLASSES_ROOT\css-tricks\shell]

[HKEY_CLASSES_ROOT\css-tricks\shell\open]

[HKEY_CLASSES_ROOT\css-tricks\shell\open\command]
@=""C:\\Windows\\notepad.exe" "%1""

Das Obige startet notepad mit dem Kommandozeilenargument, das der angegebenen URL entspricht. Beachten Sie, dass Notepad keinen benutzerdefinierten URI unterstützt und nicht weiß, was er mit der URL tun soll.

Dieses Verhalten ähnelt dem Übergeben dieses Befehls an die Konsole, und die Anwendung muss sicherstellen, dass sie ordnungsgemäß zwischen dem Argument als reguläres CLI oder als benutzerdefinierter URI unterscheidet, wie hier gezeigt:

namespace ConsoleApplication1 {
  class Program {
    static void Main(string[] args) {
      if (args.Length > 0 && args[0].IndexOf("css-tricks:") == 0) {
        Console.Write(args[0]);
      }
    }
  }
}
int main(int argc, char*argv[]) {
  if (argc > 1) { // argv[0] is the file name.
    std::string word(argv[1]);
    if (word.compare(0, 11, "css-tricks:") == 0) {
      std::cout<<word;
    }
  }
  return 0;
}

Universal Windows Platform (UWP)

Auf der Universal Windows Platform können Sie das Paketmanifest verwenden, um sowohl den benutzerdefinierten URI als auch den Universal Link (genannt App URI Handler) zu registrieren.

Benutzerdefinierter URI

Fügen Sie eine Protokoll-Deklaration in der package.appxmanifest hinzu.

Protokoll-Deklaration in package.appxmanifest

Dasselbe kann auch im Code erreicht werden.

<Extensions>
  <uap:Extension Category="windows.protocol">
    <uap:Protocol Name="css-tricks" DesiredView="default">
      <uap:DisplayName>CSS Tricks</uap:DisplayName>
    </uap:Protocol>
  </uap:Extension>
</Extensions>

...und dies kann nun innerhalb der App behandelt werden.

protected override void OnActivated(IActivatedEventArgs args) {
  base.OnActivated(args);
  if (args.Kind == ActivationKind.Protocol) {
    var e = args as ProtocolActivatedEventArgs;
    System.Diagnostics.Debug.WriteLine(e.Uri.AbsoluteUri);
  }
}
// In App.xaml.h
virtual void OnActivated(Windows::ApplicationModel::Activation::IActivatedEventArgs^ e) override;

// In App.xaml.cpp
void App::OnActivated(Windows::ApplicationModel::Activation::IActivatedEventArgs ^ e) {
  if (e->Kind == Windows::ApplicationModel::Activation::ActivationKind::Protocol) {
    auto args = (ProtocolActivatedEventArgs^)e;
    auto url = args->Uri->AbsoluteUri;
  }
}
Universal Links (App URI)

App URIs werden nur im Microsoft Edge-Browser unterstützt. Sie funktionieren nicht im Internet Explorer, Chrome oder Firefox. App URIs haben auch einen Paket-Eintrag, ähnlich wie der benutzerdefinierte URI. Er ist nicht in der Benutzeroberfläche von Visual Studio Code 2017 verfügbar. Die Einträge in package.appxmanifest sind fast dieselben.

<Extensions>
  <uap3:Extension Category="windows.appUriHandler">
    <uap3:AppUriHandler>
      <uap3:Host Name="css-tricks.com" />
    </uap3:AppUriHandler>
  </uap3:Extension>
</Extensions>

Wenn uap3 nicht verfügbar ist, kann es zum Package-Tag hinzugefügt werden, wo auch uap definiert ist.

xmlns:uap3="http://schemas.microsoft.com/appx/manifest/uap/windows10/3"

App URI ist eine relativ neue Funktion von Windows, und viele UWP-Projekte zielen auf ältere Windows-Versionen als Mindestversion ab. Möglicherweise müssen Sie diese erhöhen, um diese Funktion zu unterstützen.

Genau wie bei iOS muss die Website den Besitz der Domäne verifizieren, damit dies funktioniert. Dies kann durch das Hosten einer Datei mit dem MIME-Typ application/json im Stammverzeichnis Ihrer Website, wie z. B. https://css-tricks.de/windows-app-web-link oder https://css-tricks.de/.well-known/windows-app-web-link über https mit dem Inhalt erfolgen:

{
  "packageFamilyName": "YourPackageFamilyNameHere",
  "paths": ["*"],
  "excludePaths": ["/none/*", "/robot.txt"]
}

Um den Paket-Familiennamen zu erhalten, führen Sie Folgendes in Powershell aus und suchen Sie nach Ihrem Paketpfad:

Get-AppxPackage

Die Handhabung von App URIs erfordert denselben Code wie benutzerdefinierte URIs unter Windows. Standardmäßig müssen Sie nur das Protokollfeld in der bereitgestellten URI überprüfen und die entsprechende Logik schreiben.

Genau wie bei iOS haben Windows-Benutzer die Wahl, das Öffnen von Apps zu deaktivieren. Windows bietet Registrierungseinstellungen, um Apps zum Öffnen zu zwingen (wird zum Testen verwendet) und auch ein Validierungstool (befindet sich unter %windir%\system32\AppHostRegistrationVerifier.exe), um zu überprüfen, ob die obigen Einstellungen korrekt sind.

Android

Benutzerdefinierter URI

Android unterstützt benutzerdefinierte URIs von Anfang an. Dies kann mit Code erfolgen. Fügen Sie in AndroidManifest.xml hinzu:

<activity android:name=".CustomUriActivity">
  <intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="css-tricks" />
  </intent-filter>
</activity>

Die Kategorie DEFAULT dient dazu, sicherzustellen, dass keine Benutzeraktion zur Aktivierung erforderlich ist. BROWSABLE stellt sicher, dass die benutzerdefinierten URIs im Browser funktionieren.

Dies kann dann bei der Erstellung in der CustomUriActivity.java behandelt werden:

public class CustomUriActivity extends AppCompatActivity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    Intent intent = getIntent();
    if (Intent.ACTION_VIEW.equals(intent.getAction())) {
      Uri uri = intent.getData();
    }
  }
} 
Universal Links

Universal Links unter Android sind sehr ähnlich wie App URIs. Android Studio bietet ein GUI-Tool dafür. Gehen Sie zu Tools > App Link Assistant. Dies wird die drei Aufgaben bereitstellen, die zum Erstellen von App Links erforderlich sind.

App Link Assistant unter Android

Für Schritt 1 geben Sie den URL-Mapping-Editor ein und klicken Sie auf die Schaltfläche +, um den URL-Mapping-Dialog zu öffnen.

URL-Mapping-Dialog

Nachdem Sie auf OK klicken, wird der Code angezeigt, der stattdessen in der AndroidManifest.xml verwendet worden wäre.

<activity android:name=".CustomUriActivity">
  <intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="http" android:host="css-tricks.com"/>
  </intent-filter>
</activity>

Hinweis: Dies ist genau dasselbe wie bei einem benutzerdefinierten URI. In Schritt 2 wählen Sie die von Ihnen zugewiesene Aktivität aus, und es wird der Code zum Laden der Aktion hinzugefügt. Der Code ist auch genau derselbe wie oben für benutzerdefinierte URIs verwendet.

In Schritt 3 wird die JSON-Datei generiert, die auf der Website als application/json MIME unter https://css-tricks.de/.well-known/assetlinks.json hinzugefügt werden muss.

[{
  "relation": ["delegate_permission/common.handle_all_urls"],
  "target": {
    "namespace": "css_tricks",
    "package_name": "com.css-tricks.android",
    "sha256_cert_fingerprints":
    ["17:CC:87:9C:C8:39:B1:89:48:E8:2E:9E:6F:FC:7D:03:69:4D:05:90:2A:84:B8:AE:5D:6B:30:97:F8:1C:2B:BF"]
  }
}]

Android Studio automatisiert die Generierung des Fingerabdrucks, der die Anwendungsidentität verifiziert. Diese Identität unterscheidet sich für die Debug- und die Release-Version der Anwendung.

Instant Link

Instant Apps unter Android erfordern geringfügige Änderungen gegenüber den zuvor behandelten App-Links. Um Instant Apps zu aktivieren, ändern Sie den oben deklarierten Intent wie folgt:

<activity android:name=".CustomUriActivity">
  <intent-filter android:autoVerify="true">
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="http" android:host="css-tricks.com"/>
    <data android:scheme="https"/>
  </intent-filter>
</activity>

Dadurch können sowohl http- als auch https-URLs mit der App verknüpft werden, und autoVerify weist den Android (Google Play) Store an, den Manifest-Eintrag automatisch zu überprüfen. Instant App ist eine Funktion von Play Store/Google Chrome. Die Änderungen an der App zur Unterstützung hiervon sind minimal.

Electron

Electron-Apps sind traditionelle MacOS- und Windows-Apps mit der Chromium-Laufzeit. Diese Plattformen unterstützen nur benutzerdefinierte URIs, die ohne Änderung des kompilierten Codes aktiviert werden können.

Für MacOS bearbeiten Sie info.plist wie im MacOS-Abschnitt beschrieben. Die Ereignisse werden vom App-Objekt empfangen als:

// In main.js
require('electron').app.on('open-url', (event, url) => {
  console.log(url);
});

Für Windows fügen Sie den Registrierungseintrag wie im Windows-Abschnitt definiert hinzu. Die App empfängt die benutzerdefinierte URL in process.argv.

// In main.js
console.log(process.argv[2])

In Electron können Sie externe Webseiten laden, die URLs öffnen können. Wenn Sie nur diese URLs intern verarbeiten möchten, können Sie dies über eine Electron-API registrieren.

require('electron').protocol.registerHttpProtocol('css-tricks', (req, cb) => {
  console.log(req.url)
});

Web

Ein Website kann auch benutzerdefinierte URIs registrieren (z. B. das Handling von mailto: Links über eine Website). Beachten Sie, dass dies nur Links betrifft, die auf anderen Websites bereitgestellt werden, und nichts mit Links in anderen Anwendungen zu tun hat. Die API ist sehr restriktiv und kann nur für eine ausgewählte Linkart verwendet werden: web+<hier beliebigen Text einfügen>. Browser erlauben die Registrierung einer vordefinierten Liste von Top-Level-Protokollen.

  • Chrome: mailto, mms, nntp, rtsp, webcal
  • Firefox: bitcoin, geo, im, irc, iris, magnet, mailto, mms, news, sip, sms, smite, ssh, tel, urn, webcal, wti, xmpp

Um ein Protokoll zu registrieren, müssen Sie dieselbe Domain angeben wie die Website, die es registriert (d. h. https://css-tricks.de kann nur https://css-tricks.de registrieren und nicht https://css-tricks.de).

if (navigator.registerProtocolHandler) {
  navigator.registerProtocolHandler("web+csstricks", "https://css-ticks.com/?s=%s", "CSS Tricks custom URI");
}

Die benutzerdefinierten URIs werden von Suchmaschinen nicht indiziert und daher gibt es nicht viel Nutzen für diese, abgesehen vom Handling von Links wie mailto, webcal usw., die bereits an mehreren Stellen im Web vorhanden sind.

Zusammenfassend

Das Hinzufügen von Hyperlinks zu nativen Apps ist eine einfache und effektive Möglichkeit, den Benutzer nahtlos zwischen Anwendungen zu wechseln, mit einer eleganten Handhabung, falls die Anwendung nicht installiert ist. Mit diesen Links können Anwendungen Pfade im gesamten Internet bereitstellen, was ein effektiver Werbemechanismus sein kann. Links bieten Websites auch die Möglichkeit, Daten bereitzustellen und Anwendungen auf einer bestimmten Seite zu starten, ohne die Sicherheitsbedenken, die herunterladbare Dateien oder Befehlszeilenskripte plagen, und ermöglichen so effektive Tutorials und Fehlerberichte. Routing und URLs bieten die Kernfunktionen des World Wide Web wie Navigation, die Zurück-Schaltfläche, Lesezeichen und Suche. Hyperlinks in Apps bringen diese Erkenntnisse aus den (fast) 30 Jahren World Wide Web in native Anwendungen.