Merge pull request OwnTube-tv#284 from mykhailodanilenko/feature/linking

Add deep linking (OwnTube-tv#217)

Author: mykhailodanilenko

.github/workflows/deploy_web.yml

@@ -17,10 +17,6 @@ on:
         required: false
         type: boolean
         description: "Should a parent repo be used for customizations? (Required for branded builds)"
-      custom_deployment_url:
-        required: false
-        type: string
-        description: "Here you can specify a custom deployment url that you have configured in GitHub Pages settings"
 
 jobs:
   deploy_web:
@@ -53,15 +49,45 @@ jobs:
         run: |
           echo "${{ inputs.customizations_env_content }}" > ./OwnTube.tv/.env
 
+      - name: Create association files for deeplinking
+        run: |
+          mkdir -p ./OwnTube.tv/public/.well-known
+
+          cat > ./OwnTube.tv/public/.well-known/apple-app-site-association << 'EOF'
+          {
+            "applinks": {
+              "details": [
+                {
+                  "appID": "${{ vars.APPLE_DEVELOPMENT_TEAM }}.${{ vars.APPLE_BUNDLE_ID }}",
+                  "paths": ["*"]
+                }
+              ]
+            }
+          }
+          EOF
+
+          cat > ./OwnTube.tv/public/.well-known/assetlinks.json << 'EOF'
+          [
+            {
+              "relation": ["delegate_permission/common.handle_all_urls"],
+              "target": {
+                "namespace": "android_app",
+                "package_name": "${{ vars.ANDROID_PACKAGE }}",
+                "sha256_cert_fingerprints": [
+                  "${{ vars.ANDROID_FINGERPRINT }}"
+                ]
+              }
+            }
+          ]
+          EOF
+
       - name: Inject Build Info
         run: |
           cat > ./OwnTube.tv/build-info.json << 'EOF'
           ${{ inputs.build_info }}
           EOF
 
       - name: Build Web App by @${{ github.actor }}
-        env:
-          EXPO_PUBLIC_CUSTOM_DEPLOYMENT_URL: ${{ vars.CUSTOM_DEPLOYMENT_URL }}
         run: cd OwnTube.tv/ && cat build-info.json && npx expo export --platform web
 
       - name: Setup Pages

OwnTube.tv/app.config.ts

@@ -28,6 +28,9 @@ export default {
     buildNumber: getBuildNumber({ platform: "ios" }),
     supportsTablet: true,
     bundleIdentifier: process.env.EXPO_PUBLIC_IOS_BUNDLE_IDENTIFIER || "com.owntubetv.owntube",
+    associatedDomains: process.env.EXPO_PUBLIC_CUSTOM_DEPLOYMENT_URL
+      ? [`applinks:${process.env.EXPO_PUBLIC_CUSTOM_DEPLOYMENT_URL}`]
+      : undefined,
   },
   experiments: {
     baseUrl: !process.env.EXPO_PUBLIC_CUSTOM_DEPLOYMENT_URL
@@ -45,6 +48,22 @@ export default {
       backgroundColor: process.env.EXPO_PUBLIC_ANDROID_ADAPTIVE_ICON_BG_COLOR || "#F95F1E",
     },
     package: process.env.EXPO_PUBLIC_ANDROID_PACKAGE || "com.owntubetv.owntube",
+    intentFilters: process.env.EXPO_PUBLIC_CUSTOM_DEPLOYMENT_URL
+      ? [
+          {
+            action: "VIEW",
+            autoVerify: true,
+            data: [
+              {
+                scheme: "https",
+                host: process.env.EXPO_PUBLIC_CUSTOM_DEPLOYMENT_URL,
+                pathPrefix: "/",
+              },
+            ],
+            category: ["BROWSABLE", "DEFAULT"],
+          },
+        ]
+      : undefined,
   },
   web: {
     output: "static",

OwnTube.tv/app/+html.tsx

@@ -11,6 +11,7 @@ export default function Root({ children }: PropsWithChildren) {
           name="viewport"
           content="height=device-height, width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"
         />
+        <meta name="apple-itunes-app" content={`app-id=${process.env.EXPO_PUBLIC_IOS_BUNDLE_IDENTIFIER}`} />
         {/* Link the PWA manifest file. */}
         <link rel="manifest" href="manifest.json" />
         <style id="expo-reset">{"html, body { height: 100%; } #root { display: flex; height: 100%; flex: 1; }"}</style>

OwnTube.tv/screens/LandingScreen/LandingScreen.tsx

@@ -91,7 +91,7 @@ export const LandingScreen = () => {
     <Screen
       style={{
         ...styles.screenContainer,
-        paddingTop: isDesktop ? spacing.xxxl : insets.top,
+        paddingTop: insets.top || spacing.xxxl,
       }}
     >
       <View style={[styles.container, { maxWidth: isDesktop ? "38%" : "95%" }]}>

docs/pipeline.md

@@ -19,6 +19,15 @@ You can set up a custom domain for your web client deployments, for this configu
 `github-pages` environment in repository environments settings. From then on, OwnTube should automatically switch to your
 custom website address. Please note that some of the changes needed to configure this may take considerable time, such as DNS cache propagation.
 
+Setting up a custom domain also opens the road to having deep links set up. Fortunately, the build pipeline can handle this
+process automatically, all you need to do is add the following values to `github-pages` environment variables:
+
+- `ANDROID_FINGERPRINT`: the SHA256 fingerprint of you app signing key certificate (obtained from Google Play console after first manual release);
+- `ANDROID_PACKAGE`: the Android package name for the app;
+- `APPLE_BUNDLE_ID`: bundle ID for the Apple version of the app;
+- `APPLE_DEVELOPMENT_TEAM`: Apple Development Team ID from App Store Connect;
+- `CUSTOM_DEPLOYMENT_URL`: should be added for custom domains to work in the first step;
+
 ## TestFlight upload ⏫
 
 Before uploading to TestFlight, create an "`owntube`" environment in repository settings if you haven't already, then add the following secrets to the environment: