0

I have asked a question in Hide div in a Custom Tab opened from a Trusted Web Activity Let me explain a little bit more.

My twa website is https://www.monsoonmalabar.com/ In the above site there is a link to external site which is https://keralapsc.monsoonmalabar.com/ when clicking this link in twa app, this link opens in in-app browser. In that in-app browser(website: https://keralapsc.monsoonmalabar.com) there is a button floats left side with link https://play.google.com/store/apps/details?id=com.monsoonmalabar.app.

I want to hide that link(button) when user using twa(in-app browser). According to your suggestion in the stackoverflow site, I added the external link as https://keralapsc.monsoonmalabar.com/?hideDiv=true
And added a code in external site as

<script>
  var url_string = window.location.href; //window.location.href
var url = new URL(url_string);
if(url.searchParams.get("hideDiv")) {
  document.write('<div></div>');
} else {
  document.write('<div id="play_button"><a class="btn_openinapp" data-attr="btn_openinapp" href="https://play.google.com/store/apps/details?id=com.monsoonmalabar.app" style="left: 0px;"><i class="fab fa-google-play"></i></a></div>');
}

</script>

Now what happens is during the first visit from twa(which has hideDive=true) the button disappears. But when I continue to surf external site by going to another page in that external site button shows again. Maybe I didn't understand you correctly. Can you please explain a little bit more with codes. I am new to coding. My twa app is https://play.google.com/store/apps/details?id=com.monsoonmalabar.app

Below is the screenshot of external link marked.

enter image description here

Jason Aller
  • 3,391
  • 28
  • 37
  • 36
Justine Chacko
  • 29
  • 1
  • 6

1 Answers1

0

The solution is to save the hideDiv information into the sessionStorage, so you can load the information from there when navigating to other pages.

The code would look something like this:

<script>
  // Set `hideDiv` to `true` on sessionStorage when we receive the `hideDiv` parameter.
  const url = new URL(window.location.href);
  if(url.searchParams.get('hideDiv')) {
    sessionStorage.setItem('hideDiv', true);
  }

  // sessionStorage is persisted across page loads, but cleared if the tab is closed and
  // a new navigation session starts. We check if it's been set to `true` in this session.
  if(sessionStorage.getItem('hideDiv')) {
    document.write('<div></div>');
  } else {
    document.write('<div id="play_button"><a class="btn_openinapp" data-attr="btn_openinapp" href="https://play.google.com/store/apps/details?id=com.monsoonmalabar.app" style="left: 0px;"><i class="fab fa-google-play"></i></a></div>');
  }
</script>
andreban
  • 3,575
  • 1
  • 16
  • 40