Vad är Universal Links och App Links och hur implementerar man dem?

I det här blogginlägget går vi igenom hur man implementerar Universal Links och App Links.

Men först är det viktigt att förstå det grundläggande konceptet bakom deep linking, och hur Universal Links och App Links uppstod.

Vad är deep linking?

Deep linking är en teknik som utvecklare använder för att möjliggöra precis navigering inom webbplatser och mobilappar. Tänk er hur ni snabbt kan komma åt en pågående konversation i en meddelandeapp, eller se innehållet i er varukorg i en e-handelsapp.

Deep linking i mobilappar

I mobilappar handlar deep linking om att använda en Uniform Resource Identifier (URI) för att leda användaren till en specifik destination inom en mobilapp, istället för att bara starta appen. Mobila deep links integreras ofta i genvägar och notiser, vilket låter användare komma åt appens kärnfunktioner med ett enda klick. På webben fungerar deep linking per automatik, tack vare den underliggande tekniken i HTTP och URL:er. Mobilappar måste däremot konfigureras för att hantera URI:er korrekt.

Anpassade URI-scheman för mobilappar

Den ursprungliga metoden för att implementera deep linking i mobilappar var anpassade URI-scheman. Utvecklare skapade ett anpassat URI-schema unikt för sin app, vilket gjorde det möjligt att referera till innehåll i appen och att öppna appen från andra appar eller processer. En app kan till exempel registrera ett anpassat URI-schema som myapp://. Länken till specifikt innehåll skulle då se ut så här: myapp://path/to/content.

Tyvärr medför anpassade URI-scheman flera problem. För det första försämras användarupplevelsen märkbart när appen inte är installerad. I sådana fall stannar användaren helt enkelt kvar där de befann sig när de klickade på länken, utan någon vidare vägledning. För det andra, och ännu viktigare, finns risken för URI-kollisioner, vilket kan leda till potentiella säkerhetsproblem. Detta hänvisar till det faktum att flera appar kan använda samma myapp://-schema, vilket innebär att en skadlig app kan utge sig för att vara den avsedda appen när den till exempel utför en återkoppling för auktorisering.

Universal Links och App Links introduceras

För att undvika dessa brister har Apple och Google infört nästa generations standarder för djup länkning: Universal Links för iOS och App Links för Android.

Låt oss titta på skillnaden i URL-struktur mellan djuplänkar och Universal Links/App Links:

1. Djup länk: mytravelsapp://view-destination?name=paris
2. Universal Link / App Link: www.mytravels.com/destination/paris

Tänk dig att du driver en resewebbplats som har en tillhörande mobilapp. Inom ditt ekosystem speglar en webblänk till en resplan (t.ex. https://mytravels.com/itinerary/copenhagen-nordhavn-walk) en identisk resplan i er app. Om appen är installerad på användarens enhet öppnas innehållet i appen när man klickar på länken. Om appen saknas omdirigeras länken istället till mobilwebbversionen av er webbplats. Denna smidiga upplevelse möjliggörs av universella länkar (iOS) och app-länkar (Android).

Vad är Universal Links?

Universal Links introducerades av Apple 2015 och finns tillgängliga på iOS version 9 och senare. De är vanliga https:// -URL:er (t.ex. https://mytravels.com), men har den unika förmågan att länka till samma innehåll djupt inne i er app och på motsvarande webbsida.

När en Universal Link klickas kontrollerar iOS först om länken är registrerad för den aktuella domänen. Därefter kontrolleras om motsvarande app redan är installerad. Om appen finns öppnas den, om inte öppnar Safari webbversionen av innehållet.

Detta ger utvecklare en smidig reservlösning (fallback) som inte fanns med vanliga deep links. En och samma länk kan användas för att antingen öppna den inbyggda appen eller leda användarna till en motsvarande mobilwebbplats. Saknas appen kan en Universal Link också guida användarna till att ladda ner den från App Store. Tänk bara på att ni behöver en mobilwebbplats (eller åtminstone en fungerande webbserver) att smidigt falla tillbaka på om användaren inte har appen installerad. 

Vad är App Links?

Google introducerade App Links som ett svar på Apples Universal Links i samband med lanseringen av Android Marshmallow. App Links fungerar på samma sätt som Universal Links: när man klickar på en https:// -länk öppnas den motsvarande appen omedelbart. För användare som inte har appen installerad öppnas det begärda innehållet i en webbversion. 

Till skillnad från vanliga deep links på Android visar App Links inte en dialogruta där användaren kan välja webbläsare eller en annan hanterare. Appen öppnas alltid direkt vid klick.

Precis som Universal Links skapar App Links en bro mellan webb- och appinnehåll, vilket ger en bättre användarupplevelse. (Även här krävs en fungerande webbserver för en smidig reservlösning.)

Så här implementerar ni Universal Links

För att konfigurera Universal Links och koppla specifika webbsidor till destinationer i appen måste ni skapa en tvåvägsassociation mellan er app och er webbplats. Det innebär att placera en associated domain-fil på er webbplats och lägga till rätt entitlement i appen.

Ett betalt Apple Developer-konto krävs för att konfigurera Universal Links, eftersom ni måste koppla ert fullständiga Apple Developer Team ID.

Här är de generella stegen för att implementera Universal Links:

1. Konfigurera er webbplats för att hosta associated domains-filen

Filen apple-app-site-association (AASA) ligger på er webbplats och kopplar samman er domän med er native app. Den fungerar som ett ägarskapsbevis för domänen gentemot iOS. Endast ni kan lagra denna fil på er server, vilket är det som gör Universal Links unika och säkra.

När en användare installerar er app försöker iOS ladda ner AASA-filen och verifiera domänerna i ert entitlement.

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

• appID skapas genom att kombinera ert Team-ID (finns under ”Medlemskapsinformation” på https://developer.apple.com/account) och Bundle-identifieraren (finns under fliken ”Allmänt” i ditt Xcode-projekt). I exemplet ovan är P56KU6NT8A team-ID:t och com.mytravelapp är paket-ID:t.
• Components definierar reglerna för hur olika typer av URL:er hanteras inom appen. Här kan ni ange matchande URL-sökvägar eller specifika regler, till exempel för att exkludera vissa länkar från att behandlas som Universal Links.

Filens URL ska ha följande format: https://<fully qualified domain>/.well-known/apple-app-site-association. Den måste vara hostad via https:// med ett giltigt certifikat och utan omdirigeringar.

2. Lägg till entitlementet för associated domains i er app

Klicka på ”Add” (+) längst ner i tabellen Domains. Ersätt platshållaren med prefixet för den tjänst ni behöver (applinks för Universal Links) och er webbplats domän. Inkludera bara önskad subdomän och toppdomän, till exempel: applinks:mytravels.com. 

3. Konfigurera er appdelegat för att hantera Universal Links

När en användare trycker på en Universal Link startar iOS er app och ni tar emot ett NSUserActivity-objekt med värdet NSUserActivityTypeBrowsingWeb för activityType. Uppdatera er app delegate för att hantera user activity-objektet enligt Apples dokumentation här. 

Om ni utvecklar med SwiftUI kan ni fånga Universal Links med hjälp av instansmetoden onOpenURL. Den är särskilt utformad för Universal Links och låter ef registrera en hanterare som anropas när appen öppnas via en Universal Link, oavsett appens tillstånd (förgrund, bakgrund eller tvångsavslutning).

Den kan läggas till på valfri View och tar emot ett URL-objekt som parameter. I kodexemplet nedan är onOpenURL kopplad till NavigationView och skriver ut den fullständiga URL-strängen när appen öppnas via en 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 ni använda objektet UISceneDelegate.

Om er app inte körs skickar systemet URL:en till delegatmetoden scene(_:willConnectTo:options:) efter start.

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.
  // ...
}

För att hantera situationer där appen redan körs och en URL öppnas bör ni implementera metoden scene(_:openURLContexts:).

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

Mer information finns i Apples officiella dokumentation om Universal Links.

Så här implementerar ni App Links

Att implementera App Links är något enklare. Här är de övergripande stegen för att få App Links att fungera i er app:

1. Skapa deep links till specifikt innehåll i er app

Intent-filter instruerar Android att starta er app istället för webbplatsen när en användare klickar på en relevant länk.

Lägg till attributet autoVerify i era intent-filter för att uppmana systemet att automatiskt verifiera om er app är kopplad till de URL-domäner som anges i era intent-filter. Det rekommenderas att lägga till autoVerify i varje <intent-filter> -element för att säkerställa enhetlighet.

@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. Verifiera era App Links

App-länkar använder Digital Asset Links API för att säkerställa att er app är auktoriserad av webbplatsen att öppna länkar för den domänen. När systemet bekräftar att ni äger URL:erna dirigerar det automatiskt dessa URL-intents till er app. 

Skapa en assetlinks.json-fil och lägg upp den på er webbplats på .well-known/assetlinks.json. Här är ett exempel på en assetlinks.json -fil som auktoriserar en app att öppna länkar:

[{
  "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 är applikations-ID:t som anges i appens build.gradle -fil.
• sha256_cert_fingerprints representerar SHA256-fingeravtrycken som är kopplade till er apps signeringscertifikat. Dessa kan genereras med hjälp av Java-verktyget keytool genom att köra:

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

För mer information, se den officiella dokumentationen för App Links på Android

Sammanfattning

Oavsett om ni utvecklar för iOS eller Android är Universal Links och App Links era allierade när ni ska skapa en smidigare och mer intuitiv användarupplevelse.

Ur ett säkerhetsperspektiv bygger båda på HTTP-URL:er som kopplas till er webbplatsdomän, vilket ger er som utvecklare exklusiv rätt till dem. Som vi såg tidigare är det ett viktigt steg i implementationen att bekräfta ägarskapet av domänen.

Båda dessa länkningsstrategierna blir allt vanligare. Universal Links blev till exempel ett krav vid implementering av appväxling med MitID. Svenskt BankID går i samma riktning. 

Vi hoppas att den här guiden gav er en överblick över vad Universal Links och App Links kan göra, och hur ni kan implementera dem i era projekt.

Lycka till med kodningen!