What kind of Framework are you using for the frontend? Could you maybe use something like a serverless function from NextJS/Netlify to handle the request? (Basically you call the server endpoint, which in turn does the desired actions on the Miro board async outside of the panel itself, meaning it will run even when the board is closed) 

Hy Addison,

I’m using Vite. I think that is the default framework for Miro Web apps. Just to clarify one point. I’m trying to keep the app running after closing the panel not the board.

1. I click on the app icon
2. a panel opens
3. I click on a button inside the panel
4. the panel closes (now my app stops to run here)
5. (What I want) the app should stay active, running and modifying the board.

Is your suggestion still the best approach?

thank you!!

Hello Adilson,

Another alternative to Addison’s robust server side solution.

One concept I’ve been exploring is using the headless iframe to do the long running work.

The headless iframe is usually used to listen for the icon click on the board and runs as long as the board is open:
https://developers.miro.com/docs/app-panels-and-modals#iframes

When you open a panel, this opens another iframe that only exists as long as the panel is open.

Instead of including the code for the long running task in the panel js, you could use the panel js to trigger the long running task in the headless iframe. You could do this with the postMessage api:
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

In the app panel you could get the open frames your origin and post a message to each. 

For example:

app-panel.js

const frames = window.parent.frames
const message = {task: "whatever you want to trigger"}
for (let i = 0; i < frames.length; i++) {
  try{
    frames i].postMessage(message, window.origin)
  }catch(e){
     console.log(e)
  }
}

Then in your page that’s listening for the "icon:click" event, you could also listen for the message sent by the app panel, and use the message contents to trigger the corresponding long running task.

app.js 

window.addEventListener("message", (event) => {
  // Do we trust the sender of this message?
  if (event.origin !== "your.domain.com")
    return;

  triggerLongRunningTask(event.data.task)
});

This way the long running task is offloaded to headless iframe which will run as long as the board is kept open.

I’ve tried this with one use case and it seems work quite well. Hope this helps.

Hey @Sean Winters ,

Many months after your answer I got in the same situation again and decided to try your solution. It worked like a charm! Many thanks!