Embedded Notebook not rendering on mobile?

Community Help
1

Hello,

I am working on a project that includes embedding notebooks into a static site, generated with docusaurus.

The embed workflow I am using is close to the one used in the jekyll examples, where I link to a js file as a module from within a Markdown document, and the js file imports the runtime and my notebook.

All is well on desktop, both on the localhost dev server and as deployed on s3.

But I cannot get the notebooks to show on mobile. Any theories on this one?

2

Can you link to an example of the failing embed, so that we can take a closer look?

3

@jashkenas

reproduced an example for you.

notebook: https://observablehq.com/d/c345e74ae295df4a (obviously it is not anything to do with the complexity of the notebook…)

url: http://dlw52clseo7n8.cloudfront.net/docs/exampleEmbed.html

this is a static page on s3, distributed on cloudfront and protected with a lamba@edge login function.

username: test
pw: test

It is working for me on desktop, but not on mobile. I think it is something to do with the login feature because if I host on a public s3 bucket, I cannot reproduce the error.

the js module I call in the html doc is:

  import notebook from "https://api.observablehq.com/d/c345e74ae295df4a.js";

  const target = document.querySelector("#visual");
  const renders = {
    "helloWorld": "#helloWorld",

  };


  // BOILERPLATE
  import {Inspector, Runtime} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@3/dist/runtime.js";
  for (let i in renders) {
    let s = renders[i], a = s.match(/^\w+/);
    if (a) {
      renders[i] = document.createElement(a[0]);
      target.appendChild(renders[i]);
      if (a = s.match(/\.(\w+)$/))
        renders[i].className = a[1];
    }
    else
      renders[i] = document.querySelector(renders[i]);
  }
  Runtime.load(notebook, (variable) => {
    if (renders[variable.name]) {
      return new Inspector(renders[variable.name]);
    } else {
      return true; // uncomment to run hidden cells
    }
  });
4

It might be a Safari vs other browsers issue, since I’m getting the same CORS error on both mobile and desktop Safari when I visit your test site:

Blocked http://dlw52clseo7n8.cloudfront.net/js/helloWorld.js from asking for credentials because it is a cross-origin request.

(Chrome and Firefox seem to handle the page fine.) According to this SO question, it looks like Safari is a little more finicky about CORS headers.

2 Likes
5

This is very helpful - great call to check Safari on desktop. I read around about how type=“module” tags are imported with CORS. I added “crossorigin” to the script tag and also added a CORS policy on the S3 bucket.

Not sure which one did the trick but it is working now. Voila !!!

Thank you!!

And @jashkenas you as well - this is an amazing platform and I am absolutely in love with it.

2 Likes