Add Android deep link interstitial (dubinc#3836)

Co-authored-by: Steven Tey <stevensteel97@gmail.com>

Author: pepeladeira

apps/web/app/app.dub.co/(deeplink)/deeplink/[domain]/[[...key]]/action-buttons.tsx

@@ -1,16 +1,18 @@
 "use client";
 
 import { Link } from "@dub/prisma/client";
-import { Button, IOSAppStore, useCopyToClipboard } from "@dub/ui";
+import { AndroidLogo, Button, IOSAppStore, useCopyToClipboard } from "@dub/ui";
 import { useSearchParams } from "next/navigation";
 import { getTranslations, Language } from "./translations";
 
 export function DeepLinkActionButtons({
   link,
   language,
+  platform,
 }: {
   link: Pick<Link, "shortLink">;
   language: Language;
+  platform: "ios" | "android";
 }) {
   const t = getTranslations(language);
   const searchParams = useSearchParams();
@@ -28,14 +30,16 @@ export function DeepLinkActionButtons({
     window.location.href = `${link.shortLink}?skip_deeplink_preview=1${searchParamsString ? `&${searchParamsString}` : ""}`;
   };
 
+  const Icon = platform === "android" ? AndroidLogo : IOSAppStore;
+
   return (
     <div className="flex flex-col items-center gap-4">
       <Button
         text={t.openInApp}
         className="h-12 w-full rounded-xl bg-neutral-900 text-white"
         variant="primary"
         onClick={() => handleClick({ withCopy: true })}
-        icon={<IOSAppStore className="size-6" />}
+        icon={<Icon className="size-6" />}
       />
 
       <button

apps/web/app/app.dub.co/(deeplink)/deeplink/[domain]/[[...key]]/page.tsx

@@ -5,11 +5,18 @@ import {
 import { deepViewDataSchema } from "@/lib/zod/schemas/deep-links";
 import { prisma } from "@dub/prisma";
 import { Grid, Wordmark } from "@dub/ui";
-import { ArrowRight, Copy, IOSAppStore, MobilePhone } from "@dub/ui/icons";
+import {
+  AndroidLogo,
+  ArrowRight,
+  Copy,
+  IOSAppStore,
+  MobilePhone,
+} from "@dub/ui/icons";
 import { cn } from "@dub/utils";
 import { headers } from "next/headers";
 import Link from "next/link";
 import { redirect } from "next/navigation";
+import { userAgent } from "next/server";
 import { DeepLinkActionButtons } from "./action-buttons";
 import { BrandLogoBadge } from "./brand-logo-badge";
 import { getLanguage, getTranslations } from "./translations";
@@ -27,6 +34,10 @@ export default async function DeepLinkPreviewPage(props: {
   const language = getLanguage(acceptLanguage);
   const t = getTranslations(language);
 
+  const ua = userAgent({ headers: headersList });
+  const platform: "ios" | "android" =
+    ua.os?.name === "Android" ? "android" : "ios";
+
   // Encode the key for case-sensitive domains before querying
   const encodedKey = encodeKeyIfCaseSensitive({
     domain,
@@ -46,9 +57,11 @@ export default async function DeepLinkPreviewPage(props: {
       shortLink: true,
       url: true,
       ios: true,
+      android: true,
       shortDomain: {
         select: {
           appleAppSiteAssociation: true,
+          assetLinks: true,
           deepviewData: true,
         },
       },
@@ -62,10 +75,16 @@ export default async function DeepLinkPreviewPage(props: {
 
   const deepViewData = deepViewDataSchema.parse(link.shortDomain.deepviewData);
 
-  // if the link domain doesn't have an AASA file configured (or deepviewData is null)
-  // we skip the deep link preview and redirect to the link's URL
-  if (!link.shortDomain.appleAppSiteAssociation || !deepViewData) {
-    redirect(link.ios ?? link.url);
+  // if the domain isn't set up for deep linking on the user's platform, skip
+  // the preview and forward to the platform-specific URL (or the canonical URL)
+  if (platform === "android") {
+    if (!link.shortDomain.assetLinks || !deepViewData) {
+      redirect(link.android ?? link.url);
+    }
+  } else {
+    if (!link.shortDomain.appleAppSiteAssociation || !deepViewData) {
+      redirect(link.ios ?? link.url);
+    }
   }
 
   // decode the link if the domain is case sensitive
@@ -149,14 +168,22 @@ export default async function DeepLinkPreviewPage(props: {
                 <div className="flex items-center justify-center gap-3">
                   <Copy className="text-content-default size-6" />
                   <ArrowRight className="text-content-subtle size-3" />
-                  <IOSAppStore className="text-content-default size-6" />
+                  {platform === "android" ? (
+                    <AndroidLogo className="text-content-default size-6" />
+                  ) : (
+                    <IOSAppStore className="text-content-default size-6" />
+                  )}
                   <ArrowRight className="text-content-subtle size-3" />
                   <MobilePhone className="text-content-default size-6" />
                 </div>
               </div>
             </div>
 
-            <DeepLinkActionButtons link={link} language={language} />
+            <DeepLinkActionButtons
+              link={link}
+              language={language}
+              platform={platform}
+            />
           </div>
         </div>
       </main>

apps/web/lib/middleware/link.ts

@@ -30,6 +30,7 @@ import { detectBot } from "./utils/detect-bot";
 import { getFinalUrl } from "./utils/get-final-url";
 import { getIdentityHash } from "./utils/get-identity-hash";
 import { isAppsFlyerTrackingUrl } from "./utils/is-appsflyer-tracking-url";
+import { isGooglePlayStoreUrl } from "./utils/is-google-play-store-url";
 import { isIosAppStoreUrl } from "./utils/is-ios-app-store-url";
 import { isSingularTrackingUrl } from "./utils/is-singular-tracking-url";
 import { isSupportedCustomURIScheme } from "./utils/is-supported-custom-uri-scheme";
@@ -498,6 +499,40 @@ export async function LinkMiddleware(req: NextRequest, ev: NextFetchEvent) {
       }),
     );
 
+    // if it's a Google Play Store URL (and skip_deeplink_preview is not set)
+    // we need to show the interstitial page + cache deep link click data
+    if (
+      isGooglePlayStoreUrl(android) &&
+      !req.nextUrl.searchParams.get("skip_deeplink_preview")
+    ) {
+      ev.waitUntil(
+        cacheDeepLinkClickData({
+          req,
+          clickId,
+          link: {
+            id: linkId,
+            domain,
+            key,
+            url, // pass the main destination URL to the cache (for deferred deep linking)
+          },
+        }),
+      );
+
+      // redirect to the deeplink interstitial splash page "DeepLinkPreviewPage"
+      return createResponseWithCookies(
+        NextResponse.redirect(
+          new URL(`/deeplink/${domain}${fullPath}`, APP_DOMAIN),
+          {
+            headers: {
+              ...DUB_HEADERS,
+              ...(!shouldIndex && { "X-Robots-Tag": "googlebot: noindex" }),
+            },
+          },
+        ),
+        cookieData,
+      );
+    }
+
     return createResponseWithCookies(
       NextResponse.redirect(finalUrl, {
         headers: {