使用Nativescript Angular解析iOS通用链接? [英] Parse iOS Universal Links with Nativescript Angular?

问题描述

遵循Apple文档和Branch的文档

Following the apple documentation and Branch's documentation here, I have set up a working universal link in my Nativescript Angular (iOS) app. But, how do I parse the link when the app opens?

例如，当有人从链接中打开应用程序时，我想让我的应用程序读取链接，以便它可以转到应用程序的正确页面.

For example, when someone opens the app from the link, I want to have my app read the link so it can go to the correct page of the app.

此答案中有一些有用的代码，但我不断收到错误.这可能是因为代码是用Vanilla JS编写的，而我没有将其正确翻译成Angular.使用"_extends"和"routeUrL"都会给我带来错误.

There is some helpful code in this answer, but I keep getting errors with it. This could be bc the code is written in vanilla JS and I am not translating it into Angular correctly. The use of "_extends" and "routeUrL" both cause errors for me.

如果没有进一步的代码，Nativescript url-handler插件似乎无法工作.

And the Nativescript url-handler plugin does not seem to work without further code.

因此，在设置了通用链接并安装了nativescript url-handler插件之后，我在 app.module.ts中输入了以下内容:

So, after setting up the universal link, and installing the nativescript url-handler plugin, I have entered the following in app.module.ts:

const Application = require("tns-core-modules/application");

import { handleOpenURL, AppURL } from 'nativescript-urlhandler';
declare var NSUserActivityTypeBrowsingWeb

if (Application.ios) {   
  const MyDelegate = (function (_super) {

   _extends(MyDelegate, _super);
    function MyDelegate() {
      _super.apply(this, arguments);
    }
    MyDelegate.prototype.applicationContinueUserActivityRestorationHandler = function (application, userActivity) {
      if (userActivity.activityType === NSUserActivityTypeBrowsingWeb) {
        this.routeUrl(userActivity.webpageURL);
      }
      return true;
    };
    MyDelegate.ObjCProtocols = [UIApplicationDelegate];
    return MyDelegate;
  })(UIResponder);
  Application.ios.delegate = MyDelegate;
}

...
export class AppModule {

ngOnInit(){
        handleOpenURL((appURL: AppURL) => {
            console.log('Got the following appURL = ' + appURL);
        });
    } 
}

问题似乎主要在于"_extends"和"_super.apply".例如，我收到此错误:

The trouble seems to be mostly with "_extends" and "_super.apply". For example, I get this error:

'NativeScript encountered a fatal error: TypeError: undefined is not an object (evaluating '_extends')

编辑:请注意，nativescript-urlhandler插件为不再更新.有人知道如何使用Nativescript解析通用链接吗?

EDIT: Note that the nativescript-urlhandler plugin is no longer being updated. Does anyone know how to parse universal links with Nativescript?

推荐答案

我想出了一种使该工作正常的方法:

I have figured out a method to get this working:

通常的想法是使用iOS App Delegate方法:applicationContinueUserActivityRestorationHandler.

The general idea is to use the iOS App Delegate method: applicationContinueUserActivityRestorationHandler.

Nativescript文档中有关应用程序委托的语法对我不起作用.您可以在此处查看该文档.

The syntax in the Nativescript documentation on app delegates did not work for me. You can view that documentation here.

这似乎起作用:

-一旦您建立了通用链接，请遵循

--once you have a universal link set up, following documentation like here, and now you want your app to read ("handle") the details of the link that was tapped to open the app:

编辑:此代码示例将所有内容放在app.module.ts中的一个位置.但是，大多数情况下，最好将其移出app.module并移至单独的服务中. 此处中提供了用于执行此操作的示例代码. 因此，下面提供了有效的代码，但请记住，最好将此代码放在单独的服务中.

This code sample puts everything in one spot in app.module.ts. However, most of the time its better to move things out of app.module and into separate services. There is sample code for doing that in the discussion here. So the below has working code, but keep in mind it is better to put this code in a separate service.

app.module.ts

    declare var UIResponder, UIApplicationDelegate
    if (app.ios) {
        app.ios.delegate = UIResponder.extend({
            applicationContinueUserActivityRestorationHandler: function(application, userActivity) {
                if (userActivity.activityType === NSUserActivityTypeBrowsingWeb) {
                    let tappedUniversalLink = userActivity.webpageURL
                    console.log('the universal link url was = ' + tappedUniversalLink)
                } 
                return true;
            }
        },
        {
           name: "CustomAppDelegate",
            protocols: [UIApplicationDelegate]
        });
   }

注意:要使NSUserActivity/Application Delegate内容与打字稿一起使用，我还需要下载tns-platforms-declarations插件并配置应用程序.所以:

NOTE: to get the NSUserActivity/Application Delegate stuff to work with typescript, I also needed to download the tns-platforms-declarations plugin, and configure the app. So:

$ npm i tns-platforms-declarations

和

references.d.ts

/// <reference path="./node_modules/tns-platform-declarations/ios.d.ts" />

上面的代码对我有用，当链接打开应用程序时，我可以读取被点击的通用链接的详细信息.

The above code works for me to be able to read the details of the tapped universal link when the link opens the app.

从那里，您可以确定要使用该信息做什么.例如，如果您要根据通用链接的详细信息导航到应用程序的特定页面，那么我发现它可以正常工作:

From there, you can determine what you want to do with that information. For example, if you want to navigate to a specific page of your app depending on the details of the universal link, then I have found this to work:

app.module.ts

    import { ios, resumeEvent, on as applicationOn, run as applicationRun, ApplicationEventData } from "tns-core-modules/application";

    import { Router } from "@angular/router";

    let univeralLinkUrl = ''

    let hasLinkBeenTapped = false

    if (app.ios) {
       //code from above, to get value of the universal link
        applicationContinueUserActivityRestorationHandler: function(application, userActivity) {
                if (userActivity.activityType === NSUserActivityTypeBrowsingWeb) {
                   hasLinkBeenTapped = true  
                   universalLinkUrl =  userActivity.webpageURL
                } 
                return true;
        },

            {
                name: "CustomAppDelegate",
                protocols: [UIApplicationDelegate]
            });

    }

    @ngModule({...})

    export class AppModule {
       constructor(private router: Router) {

            applicationOn(resumeEvent, (args) => {
               if (hasLinkBeenTapped === true){
                   hasLinkBeenTapped = false  //set back to false bc if you don't app will save setting of true, and always assume from here out that the universal link has been tapped whenever the app opens
                   let pageToOpen = //parse universalLinkUrl to get the details of the page you want to go to
                   this.router.navigate(["pageToOpen"])
                } else {
                    universalLinkUrl = '' //set back to blank
                    console.log('app is resuming, but universal Link has not been tapped') 
                }
            })
        }
    }

这篇关于使用Nativescript Angular解析iOS通用链接?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！