Hvad er universelle links og app-links, og hvordan implementerer man dem?

I dette blogindlæg vil vi tale om, hvordan man implementerer Universal Links og App Links.

Men først er det vigtigt at forstå det grundlæggende koncept bag deep linking og se, hvordan Universal Links og App Links opstod.

Hvad er deep linking?

Deep linking er en teknik, som udviklere bruger til at muliggøre præcis navigation indenfor hjemmesider og mobilapplikationer. Tænk for eksempel på hurtigt at få adgang til igangværende samtaler i en messaging-app eller at se varer, der er lagt i din indkøbskurv på en e-handelsplatform. 

Deep linking på mobilen

I forbindelse med mobilapps handler deep linking om at bruge en URI (Uniform Resource Identifier) til at føre brugeren til en bestemt destination inden for en mobilapp, i modsætning til blot at starte appen. Mobile deep links er ofte integreret i genveje og notifikationer, så brugerne kan få adgang til appens kernefunktioner med blot et enkelt tryk. På internettet fungerer deep linking som standard takket være den underliggende teknologi med HTTP og URL'er. Mobilapps skal derimod først konfigureres til at håndtere URI'er korrekt.

Brugerdefinerede URI-skemaer til mobilapps

Den oprindelige metode til at implementere deep linking i mobilapps var via brugerdefinerede URI-skemaer. Udviklere oprettede et brugerdefineret URI-skema, der var unikt for deres applikationer, hvilket gav dem mulighed for at henvise til indhold inde i appen og gav en måde at starte appen fra andre apps eller processer. For eksempel kunne en app registrere et brugerdefineret URI-skema som myapp://. Linket til specifikt indhold ville så se ud som myapp://path/to/content.

Desværre er der flere problemer forbundet med brugerdefinerede URI-skemaer. For det første opleves der et mærkbart fald i brugeroplevelsen, når appen ikke er installeret. I sådanne tilfælde forbliver brugeren simpelthen der, hvor vedkommende var, da vedkommende klikkede på linket, uden yderligere vejledning. For det andet, og endnu mere betydningsfuldt, er der risikoen for URI-kollisioner, hvilket kan føre til potentielle sikkerhedsproblemer. Dette henviser til, at flere apps kan gøre krav på det samme myapp://- skema, så en ondsindet app kan udgive sig for at være den tilsigtede app, når den f.eks. udfører en autorisations-callback.

Universal Links og App Links introduceres

For at undgå disse ulemper har Apple og Google indført den næste generation af standarder for deep linking: Universal Links til iOS og App Links til Android.

Lad os se nærmere på forskellen i URL-strukturen mellem deep links og Universal Links / App Links:

1. Deep link: mytravelsapp://view-destination?name=paris
2. Universal Link / App Link: www.mytravels.com/destination/paris

Forestil dig, at du administrerer et rejsewebsted, der har en tilhørende mobilapp. Inden for dit økosystem afspejler et web-link til en rejseplan (f.eks. https://mytravels.com/itinerary/copenhagen-nordhavn-walk) en identisk rejseplan i din app. Hvis appen er installeret på brugerens enhed, åbner et klik på linket indholdet i appen. Hvis appen ikke er installeret, omdirigerer linket i stedet til mobilbrowserversionen af din hjemmeside. Denne sømløse oplevelse muliggøres af Universal Links (iOS) og App Links (Android).

Hvad er Universal Links?

Universal Links blev introduceret af Apple i 2015 og er tilgængelige på iOS version 9 og nyere. Det er standard-URL’er af typen https:// (f.eks. https://mytravels.com), men de har den unikke egenskab, at de kan forbinde til det samme indhold dybt inde i din app og på den tilsvarende webside.

Når der klikkes på et Universal Link, tjekker iOS først, om linket er registreret for det tilknyttede domæne. Derefter tjekkes det, om den tilhørende app allerede er installeret. Hvis appen er der, åbnes den. Hvis ikke, åbner Safari webversionen af indholdet.

Dette giver udviklere en elegant fallback-mulighed, som ikke var tilgængelig med almindelige dybe links. Et enkelt link kan bruges til enten at åbne den native app eller omdirigere brugerne til et tilsvarende mobilwebsted. Hvis appen mangler, kan et Universal Link også guide brugerne til at downloade den fra App Store. Husk blot, at du har brug for et mobilwebsted (eller i det mindste en fungerende webserver) at falde tilbage på, hvis brugeren ikke har appen installeret. 

Hvad er App Links?

Google introducerede App Links som et svar på Apples Universal Links i forbindelse med udgivelsen af Android Marshmallow. App Links fungerer på samme måde som Universal Links: Når der klikkes på et https:// -link, åbnes den tilhørende app straks. For brugere, der ikke har appen installeret, åbnes det ønskede indhold i en webversion. 

I modsætning til almindelige dybe links på Android viser App Links ikke en dialogboks, hvor brugeren kan vælge en browser eller en anden håndteringsfunktion. De åbner altid blot appen, når der klikkes på dem. 

Ligesom Universal Links skaber App Links en bro mellem web- og app-indhold, hvilket giver en bedre brugeroplevelse. (Igen skal du have en fungerende webserver for at sikre en smidig fallback.) 

Sådan implementeres Universal Links

For at konfigurere Universal Links og forbinde bestemte websider med destinationer i appen skal du oprette en tovejsforbindelse mellem din app og din hjemmeside. Dette indebærer, at du placerer den tilknyttede domænefil på din hjemmeside og tilføjer den relevante rettighed til din app.

Der kræves en betalt Apple Developer -konto for at konfigurere Universal Links, da du skal knytte dit fuldt kvalificerede Apple Developer Team-ID.

Her er de generelle trin til implementering af Universal Links:

1. Konfigurer din hjemmeside til at huse filen med de tilknyttede domæner

Apple-app-site-association-filen (AASA) ligger på din hjemmeside og knytter dit webstedsdomæne sammen med din native app. Den fungerer som bevis på domæneejerskab for iOS. Kun du kan gemme denne fil på din server, hvilket gør Universal Links unikke og sikre. 

Når en bruger installerer din app, vil iOS forsøge at downloade AASA-filen og verificere domænerne i din rettighed.

{
  "applinks": {
    "apps": [],
    "details": [
      {
        "appID": "P56KU6NT8A.com.mytravelapp",
        "components": [
          {
            "/": "/trip/*",
            "comment": "Matches any URL with a path that starts with /trip/."
          }
        ]
      }
    ]
  }
}

• appID opbygges ved at kombinere dit Team-ID (findes under »Medlemsoplysninger« på https://developer.apple.com/account) og Bundle-identifikatoren (findes under fanen »Generelt« i dit Xcode-projekt). I eksemplet ovenfor er P56KU6NT8A team-ID'et, og com.mytravelapp er bundle-ID'et.
• Komponenter definerer reglerne for håndtering af forskellige typer URL'er i appen. Her kan du angive matchende URL-stier eller indstille specifikke regler, f.eks. at udelukke bestemte links fra at blive behandlet som Universal Links.

Filens URL skal have følgende format: https://<fuldt kvalificeret domæne>/.well-known/apple-app-site-association. Den skal være hostet via https:// med et gyldigt certifikat og uden omdirigeringer.

2. Tilføj rettigheden til de tilknyttede domæner til din app

Klik på »Add« (+) nederst i tabellen »Domains«. Erstat pladsholderen med præfikset for den tjeneste, du har brug for (»applinks« for Universal Links), og dit websteds domæne. Medtag kun det ønskede underdomæne og topdomænet, for eksempel: applinks:mytravels.com. 

3. Konfigurer din app-delegat til at håndtere Universal Links

Når en bruger trykker på et Universal Link, starter iOS din app, og du modtager et NSUserActivity-objekt med en activityType-værdi på NSUserActivityTypeBrowsingWeb. Opdater din app-delegat, så den reagerer på brugeraktivitetsobjektet som beskrevet her. 

Hvis du udvikler med SwiftUI, kan du opfange Universal Links ved hjælp af instansmetodenonOpenURL. Den er specielt designet til Universal Links og giver dig mulighed for at registrere en handler, der kaldes, når din app åbnes via et Universal Link, uanset appens tilstand (forgrund, baggrund eller tvungen afslutning).

Den kan tilføjes til enhver View og tager et URL-objekt som parameter. I kodestykket nedenfor er onOpenURL knyttet til NavigationView, og den udskriver den absolutte URL-streng, når appen åbnes via et Universal Link.

struct ContentView: View {
    var body: some View {
        NavigationView {
            Text("Welcome to My Travel App")
        }
        .onOpenURL { url in
            print("Opened URL:", url.absoluteString)
        }
    }
}

Med UIKit kan du bruge UISceneDelegate -objektet.

Hvis din app ikke kører, sender systemet URL'en til delegatmetoden scene(_:willConnectTo:options:) efter opstart.

func scene(
  _ scene: UIScene, willConnectTo session: UISceneSession,
  options connectionOptions: UIScene.ConnectionOptions
) {


  // Get URL components from the incoming user activity.
  guard let userActivity = connectionOptions.userActivities.first,
    userActivity.activityType == NSUserActivityTypeBrowsingWeb,
    let incomingURL = userActivity.webpageURL,
    let components = NSURLComponents(url: incomingURL, resolvingAgainstBaseURL: true)
  else {
    return
  }

  // Check for specific URL components that you need.
  // ...
}

For at håndtere tilfælde, hvor din app allerede kører, og en URL åbnes, bør du implementere metoden scene(_:openURLContexts:).

func scene(_ scene: UIScene, openURLContexts URLContexts: Set<UIOpenURLContext>) {
  for context in URLContexts {
    let url = context.url
    // handleLink(url)
  }
}

Du kan finde flere oplysninger i Apples officielle dokumentation om Universal Links.

Sådan implementeres App Links

Det er lidt nemmere at implementere App Links. Her er de overordnede trin til at få App Links til at fungere i din app:

1. Opret dybe links til specifikt indhold i din app

Intent-filtre instruerer Android om at starte din app i stedet for hjemmesiden, når en bruger klikker på et relevant link.

Inkluder attributten autoVerify i dine intent-filtre for at få systemet til automatisk at verificere, om din app er tilknyttet de URL-domæner, der er angivet i dine intent-filtre. Det anbefales at tilføje autoVerify til hvert <intent-filter> -element for at sikre konsistens.

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_destination);

    Intent intent = getIntent();
    Uri data = intent.getData();
    if (data != null) {
        // Extract data from the URI and navigate to the corresponding content
        // Example: Retrieve destination ID and display details
    }
}

2. Bekræft dine app-links

App-links bruger Digital Asset Links API til at sikre, at din app er godkendt af hjemmesiden til at åbne links for det pågældende domæne. Når systemet bekræfter, at du ejer URL'erne, dirigerer det automatisk disse URL-intents til din app. 

Opret en assetlinks.json -fil, og host den på din hjemmeside under .well-known/assetlinks.json. Her er et eksempel på en assetlinks.json -fil, der giver en app tilladelse til at åbne links:

[{
  "relation": ["delegate_permission/common.handle_all_urls"],
  "target": {
    "namespace": "android_app",
    "package_name": "com.mytravels",
    "sha256_cert_fingerprints":
    ["1B:9A:6C:2E:33:E5:3E:AE:32:EC:40:97:11:BF:87:76:EE:56:78:EC:2A:3A:62:C9:A4:BC:D0:C2:7A:BC:11:4D"]
  }
}]

• package_name erapplikations-ID'et, der er angivet i appens build.gradle -fil.
• sha256_cert_fingerprints repræsentererde SHA256-fingeraftryk, der er knyttet til din apps signeringscertifikat. Disse kan genereres ved hjælp af Java-værktøjet keytool ved at køre:

keytool -list -v -keystore my-release-key.keystore

For yderligere oplysninger henvises til den officielle dokumentation for App Links på Android

Resumé

Uanset om du udvikler til iOS eller Android, er Universal Links og App Links dine allierede i arbejdet med at skabe en mere smidig og intuitiv brugeroplevelse. 

Hvad angår sikkerhed, er begge baseret på HTTP-URL'er, der forbinder til dit websteds domæne, hvilket giver dig som udvikler eksklusive rettigheder. Som vi så tidligere, er bekræftelse af domæneejerskab et vigtigt trin i implementeringsprocessen.

Begge linkstrategier bliver stadig mere udbredte. For eksempel blev Universal Links et krav ved implementering af app-skift med MitID. Det svenske Bank-ID bevæger sig i samme retning. 

Vi håber, at denne guide har hjulpet dig med at få et overblik over, hvad Universal Links og App Links kan, og forklaret, hvordan du kan integrere dem i dine projekter.

God fornøjelse med kodningen!