bubble app postMessage experiment

[sync-by-unito]

Try to experiment and find out if adding an event listener in the bubble app is possible.

window.addEventListener('back-button-pressed-from-ionic-side', event => {
// IMPORTANT: check the origin of the data!
if (event.origin === 'https://our-ionic-site.com') {
// The data was sent from your site.
// Data sent with postMessage is stored in event.data:
console.log(event.data);
// This is good place to navigate back etc.
} else {
// The data was NOT sent from our ionic app!
// Be careful! Do not use it. This else branch is
// here just for clarity, you usually shouldn't need it.
return;
}
});

More details at https://stackoverflow.com/a/25098153/6133329

┆Issue is synchronized with this Asana task by Unito
┆Created By: Sam

[sync-by-unito]

➤ Tammy Yang commented:

SamEthan Wu I think this is something that we can give it a try https://bubble.io/plugin/%F0%9F%90%9D--iframe-complete-embed-1657267144487x391836917536391200 ( https://bubble.io/plugin/%F0%9F%90%9D--iframe-complete-embed-1657267144487x391836917536391200 )

[sync-by-unito]

➤ Sam commented:

Tammy Yang, Ethan Wu any progress on this experiment?
If not then Comment by @sam on [issue]*in explore tab, android back button can't work. ( https://app.asana.com/0/1203096738207862/1202720013896988/1203267099291666 ) should be postponed to the next sprint.

[sync-by-unito]

➤ Ethan Wu commented:

Sam no progress on this experiment.

can you provide me with more details on this one? i'm not exactly sure what we needs to be done

[sync-by-unito]

➤ Sam commented:

Ethan Wu, currently we need a way of communication between ionic and iframe. Maybe this claap ( https://app.claap.io/numbers-protocol/dev-bubble-app-post-message-api-c-O35CsUM4Uy-uwvX6bPoxJIB ) be a good intro.

For example, on explore tab, we need to navigate to the root of the iframe. It supposes to be 3 simple steps.

1. (from ionic side): detect if user wants to go to the root page of explore tab
2. (from ionic side): var myiFrame = document.getElementById("ourBubbleAppIframe)
3. (from ionic side): myiFrame.src = captureappiframe.numbersprotocol.io

But because ionic is host is localhost and iframe host is captureappiframe.numbersprotocol.io at step #3 we will get SecurityError: Blocked a frame with origin from accessing a cross-origin frame. This StackOverflow ( https://stackoverflow.com/questions/25098021/securityerror-blocked-a-frame-with-origin-from-accessing-a-cross-origin-frame ) explains better 😅

To solve this we can do
A. host ionic app on captureappiframe.numbersprotocol.io so we will have the same origin (however it will not solve android back button issue)

B. use post Window.postMessage() ( https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage ) (will solve android back button issue)

Another example using option B (aka postMessage()), lets say user

1. goes to explore tab
2. open some asset
3. open owner of the asset
4. open another asset etc (aka goes 3-4 levels down)

then user presses android back button (currently nothing will happen)

But using postMessage() we can do the following (when user presses back button)

1. [from bubble side]: document.addEventListener("android-back-button-pressed", ()=> window.history.back())
2. from ionic side: detect the android back button press.
3. from ionic side: exploreTabiFrame = document.getElementById("iframe")

Please let me know if you have any questions.

[sync-by-unito]

➤ Sam commented:

I'm not sure if we need this bubble plugin ( https://bubble.io/plugin/%F0%9F%90%9D--iframe-complete-embed-1657267144487x391836917536391200 )to be able to use postMessage() or not. But the main idea is to use postMessage() API to communicate between iframe and capture app.

[sync-by-unito]

➤ Ethan Wu commented:

Sam thanks for the clarification. I'm thinking we don't need to use the plugin. I can try to add an html element to the page with the <script> message listener and see if that works.

[sync-by-unito]

➤ Ethan Wu commented:

Sam so will this work if the origins are different?

[sync-by-unito]

➤ Sam commented:

Ethan Wu, yes it supposes to work even if the origins are different.

[sync-by-unito]

➤ Sam commented:

Ethan Wu, do you have any experimental pages so I can play around from the ionic side?

[sync-by-unito]

➤ Ethan Wu commented:

Sam i'm still investigating this. i'll let you know when i've made some progress

[sync-by-unito]

➤ Sam commented:

Ethan Wu, just want to ask if have you ever had this issue before.
Refused to frame 'my-experiment.bubble.app' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'none'".

Currently I'm trying to use my-experiment bubble app in capture app iframe but getting error. Maybe you had similar error when dealing with https://captureappiframe.numbersprotocol.io

Here is the [claap ( https://app.claap.io/numbers-protocol/ethan-bubble-iframe-experiment-c-O35CsUM4Uy-3tAaTIwyzl5G )]

[sync-by-unito]

➤ Sam commented:

Oh now I know I just need to enable Allow to render the app in a frame/iframe (X-Frame-Options)from Settings.YouTube ( https://youtu.be/N7AoUpVwzbc?t=84 ) 😅

[sync-by-unito]

➤ Ethan Wu commented:

Sam so i think its possible to add a script to bubble app body but it will require a paid account in order to activate the functionality

[sync-by-unito]

➤ Sam commented:

Ethan Wu, do you mean to add a postMessage listener to the body and not for every page?

window.addEventListener('message', event => {
console.log(event)

// IMPORTANT: check the origin of the data!
if (event.origin === 'https://your-first-site.example ( https://your-first-site.example )') {
// do our logic
} else {
// ignore event
return;
}
});

[sync-by-unito]

➤ Sam commented:

Ethan Wu, is it possible to add window.addEventListener('message') to body?

Currently I run JS on page load and the bad thing is we need to add listener to all pages where we need to android back button to work.

By the way I'm available for calls if it speeds up the conversation.

[sync-by-unito]

➤ Ethan Wu commented:

yes. see here:

[sync-by-unito]

➤ Ethan Wu commented:

i'm trying this experiment out now

[sync-by-unito]

➤ Ethan Wu commented:

ok so i've successfully added it to the page body Sam

[sync-by-unito]

➤ Sam commented:

Can we have a call or claap on that for better understanding

[sync-by-unito]

➤ Ethan Wu commented:

Sam

[sync-by-unito]

➤ Ethan Wu commented:

yes lets have a call. huddle?

[sync-by-unito]

➤ Sam commented:

sure

[sync-by-unito]

➤ Ethan Wu commented:

link: https://captureappiframe.numbersprotocol.io/version-v221107-ethan-from-qa/ ( https://captureappiframe.numbersprotocol.io/version-v221107-ethan-from-qa/ )

[sync-by-unito]

➤ Sam commented:

Ethan Wu, it should work if you pass as a second parameter https://captureappiframe.numbersprotocol.io ( https://captureappiframe.numbersprotocol.io/version-v221107-ethan-from-qa/ )

So in html script change it from postMessage(message)
to postMessage(message, https://captureappiframe.numbersprotocol.io ( https://captureappiframe.numbersprotocol.io/version-v221107-ethan-from-qa/ ))

[sync-by-unito]

➤ Sam commented:

Ethan Wu, https://app.claap.io/numbers-protocol/ethan-post-message-got-working-c-O35CsUM4Uy-XaDX52veUF1H ( https://app.claap.io/numbers-protocol/ethan-post-message-got-working-c-O35CsUM4Uy-XaDX52veUF1H )

[sync-by-unito]

➤ Ethan Wu commented:

Sam so what do want me to change?

[sync-by-unito]

➤ Sam commented:

Can I see the sandbox code please?

[sync-by-unito]

➤ Sam commented:

Can I see the sandbox code please? from https://ltvdsf.csb.app/ ( https://ltvdsf.csb.app/ ) for sending postMessage()

[sync-by-unito]

➤ Ethan Wu commented:

var button = document.querySelector("#sendMessage");

function sendMessage() {
const message = document.querySelector("#message").value;
// console.log(message);
const iframe = document.querySelector("iframe");
// console.log(iframe);
iframe.contentWindow.postMessage(message, "*");
}

button.addEventListener("click", sendMessage);

[sync-by-unito]

➤ Ethan Wu commented:

oh i see

[sync-by-unito]

➤ Ethan Wu commented:

replace "*" with the iframe url

[sync-by-unito]

➤ Sam commented:

iframe.contentWindow.postMessage(message, "https://captureappiframe.numbersprotocol.io ( https://captureappiframe.numbersprotocol.io/version-v221107-ethan-from-qa/ )")

[sync-by-unito]

➤ Ethan Wu commented:

ok it works!

[sync-by-unito]

➤ Sam commented:

Ethan Wu, so you can see message from bubble side right?

[sync-by-unito]

➤ Ethan Wu commented:

Sam yes

[sync-by-unito]

➤ Ethan Wu commented:

Sam see here: https://app.claap.io/numbers-protocol/bubble-post-message-iframe-experiment-c-O35CsUM4Uy-1_XfVwBsefXH ( https://app.claap.io/numbers-protocol/bubble-post-message-iframe-experiment-c-O35CsUM4Uy-1_XfVwBsefXH )

[sync-by-unito]

➤ Ethan Wu commented:

let me know if the above is the expected result

[sync-by-unito]

➤ Sam commented:

Ethan Wu,saw you claap, yes exactly.

So we can change the global script to something like

window.addEventListener('message', event => {
if(event.data === "android-back-button") {
window.history.back()
}
});

I recorded similar claap ( https://app.claap.io/numbers-protocol/ethan-another-working-example-c-O35CsUM4Uy-MsHW_JDdTlOt )

[sync-by-unito]

➤ Ethan Wu commented:

ok i can make the adjustment to the script.

[sync-by-unito]

➤ Sam commented:

Ethan Wu, just to confirm tested your URL ( https://captureappiframe.numbersprotocol.io/version-v221107-ethan-from-qa/ ) and it's working. [claap ( https://app.claap.io/numbers-protocol/ethan-working-preview-of-iframe-communication-of-android-back-button-c-O35CsUM4Uy-6HRi3xF5Hel5 )]

This can be considered as completed.

[sync-by-unito]

➤ Ethan Wu commented:

Sam awesome. thanks for the support

[sync-by-unito]

➤ Ethan Wu commented:

Sam one thing you might need to consider on the ionic side is when users navigate through capture iframe the url changes.

for example:

explorer => baseurl
asset page => baseurl + /asset_page
user profile => baseurl + /user_profile

so when you send message in
iframe.contentWindow.postMessage(message, ) you may need to change it depending on which page the user is on.

[sync-by-unito]

➤ Ethan Wu commented:

nvm i just saw your claap. no issues haha

[sync-by-unito]

➤ Sam commented:

Ethan Wu, I'm not sure about that 😅. I believe just need to be origin ( https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage ).

[sync-by-unito]

➤ Ethan Wu commented:

it seemed to work fine in your claap so i think it should be fine.

[sync-by-unito]

➤ Sam commented:

Ethan Wu, (cc: Kenny Hung) added data policy iframe is working.
https://app.claap.io/numbers-protocol/kenny-ethan-data-policy-iframe-is-integrated-need-some-clarification-c-O35CsUM4Uy-1anbmagq8rra ( https://app.claap.io/numbers-protocol/kenny-ethan-data-policy-iframe-is-integrated-need-some-clarification-c-O35CsUM4Uy-1anbmagq8rra )

Once URL for "Terms of use" will be provided we can consider it as completed.

[sync-by-unito]

➤ Kenny Hung commented:

Sam The order should be

1. Profile
2. Contract
3. Wallets
4. Settings
5. Invitation
6. Privacy
7. About
8. Data Policy
9. Terms of use

[sync-by-unito]

➤ Tammy Yang commented:

Kenny Hung if you are talking about the "Settings", it should be

Wallet
Invite Friends (with small text saying "Get 5 Credits for each accepted invitation", similar to Uber)
Settings (integrate Privacy, phone verification and Email verification into it.)
Help (old Contact)
About
Data Policy
Terms of Use

[sync-by-unito]

➤ Tammy Yang commented:

I will open a new task for the updates

[sync-by-unito]

➤ Tammy Yang commented:

[Sprint 2] Update Menu ( https://app.asana.com/0/1201016280880500/1203594105954143/f )