Navigation is blocked: Intent blocked by chrome

[iiLearner]

Description

Hello! I'm trying to use model-viewer for the sole purpose of using Augmented reality, however im facing an issue on Android, specifically chrome:

Once the 'load' event from the model-viewer is emitted (do i have to wait for this?), I programmatically click the ar-button to go into AR, this works fine on ios! however on android chrome blocks the navigation. This is what get in console:

Attempting to present in AR with Scene Viewer...
Navigation is blocked: intent:[...]

However if i manually click the ar button it works fine! Do you guys have any idea why is that? I'm not using this inside an iframe.

Version

https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js

• model-viewer: 1.10.1

Browser Affected

• [ x] Chrome, version: 98.0.xxxx
• Edge
• Firefox
• IE
• Safari

OS

• [ X] Android // 10
• iOS
• Linux
• MacOS
• Windows

AR

• WebXR
• [X ] SceneViewer
• QuickLook

[samaneh-kazemi]

Hi @iiLearner, can you please share more details on how you use it and a link to your code/project so we can try it?

[elalish]

Usually you get an error like "requires user action". This is a Chrome security thing; they won't let you leave the browser or start a WebXR session without being triggered by a user gesture like click. So what you're trying to do is explicitly disallowed by Chrome because it could be used to fool users.

[iiLearner]

Hi,
Thank you for your replies @elalish @samaneh-kazemi

since I have already seen other applications do it and im actually trying to replicate it... im sure theres a way to do it.
I have a main that that integrates my threejs 3d viewer as iframe (screenshot), I need to have the ar activation button on the main page and as you can see in the screenshot its outside.

Once the ar button is clicked, I send a postMessage to my iframe which then executes this code:

if (isAndroid()) {
    const noArViewerSigil = "#model-viewer-no-ar-fallback";
    const location = self.location.toString();
    const locationUrl = new URL(location);
    const modelUrl = urls.android;
    const params = new URLSearchParams();

    locationUrl.hash = noArViewerSigil;

    // modelUrl can contain title/link/sound etc.
    params.set("mode", "ar_preferred");
    if (!params.has("disable_occlusion")) {
      params.set("disable_occlusion", "true");
    }

    const intent = `intent://arvr.google.com/scene-viewer/1.0?${
      params.toString() + "&file=" + encodeURIComponent(modelUrl.toString())
    }#Intent;scheme=https;package=com.google.ar.core;action=android.intent.action.VIEW;S.browser_fallback_url=${encodeURIComponent(
      locationUrl.toString()
    )};end;`;

    const undoHashChange = () => {
      if (self.location.hash === noArViewerSigil) {
        assets.setSceneViewerBlocked(true);
        self.history.back();
        console.warn("Error while trying to present in AR with Scene Viewer");
      }
    };

    self.addEventListener("hashchange", undoHashChange, { once: true });
    const arAnchor = document.createElement("a");
    arAnchor.setAttribute("href", intent);
    document.body.appendChild(arAnchor);
    console.log("Attempting to present in AR with Scene Viewer...");
    arAnchor.click();
  }

This ends up in resulting chrome blocking the navigation:
https://i.imgur.com/QbtPE2m.png

I have a library application from another provider that does the same the thing but it works for them so im a bit confused. They trigger a click the same way i do.

[elalish]

Hmm, if you're using model-viewer, why are you writing all of that intent code? You can just call activateAR(), since it sounds like you already have a user activation. If the SV intent is giving you trouble, you can also add the xr-spatial-tracking permission to your iframe and use WebXR instead.

[iiLearner]

Maybe I got off the topic a bit now, in this case I'm not using model viewer as I'm trying let the users into AR directly from ios and Android devices. I really to use scene viewer.

…

On Thu, Feb 17, 2022, 18:39 Emmett Lalish ***@***.***> wrote: Hmm, if you're using model-viewer, why are you writing all of that intent code? You can just call activateAR() <https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-methods-activateAR>, since it sounds like you already have a user activation. If the SV intent is giving you trouble, you can also add the xr-spatial-tracking <https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy/xr-spatial-tracking> permission to your iframe and use WebXR instead. — Reply to this email directly, view it on GitHub <#3209 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AFZASJ7AYEXXOVMDTI3OJN3U3UXFPANCNFSM5OVK7EIQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you were mentioned.Message ID: ***@***.***>

[eugenecys]

Do you have any examples of other applications doing it?

As far as I know, like @elalish mentioned, Android Chrome explicitly blocks Javascript redirects to an app. On iOS, Chrome's policy for link handling is done by the system, so it makes sense that it works on iOS.

Is there a reason for wanting to programmatically clicking the button? All the workarounds I've seen on issues related to this (such as they wanting to perform some ajax calls before triggering the deeplink) require a direct user trigger for the redirect