0

I have built a web application for a client in PHP. And I implemented a PWA (Progressive Web App) app for this web app, which is working quite well.

But recently my client asked me to add window tabs for this PWA application. But the problem is i already finished this job, and i do not want to re-build my architecture from scratch.

I would like it so that (if possible) when the user clicks a link, the page opens in the same app as it is right now, but in a new tab.

When i add target="_blank" to my links, like so:

<li class="nav-item">
  <a target="_blank" class="nav-link raporlarSol" href="/app/bankadurumlari"><i class="material-icons">euro_symbol</i>
    <span>Banka Durumları</span>
  </a>
</li>

the page opens outside PWA window in a new android browser. Which is not a behaviour he accepts.

I have searched the web, but i haven't been able to find a proper answer. There is link here which didn't help me at all.

I know that i can do it with PHP Sessions and AJAX, but this means a lot of work to do.

I want to achieve this natively but do not know if possible.

I appreciate if you share your thoughts on this.

Rüzgar
  • 947
  • 9
  • 20
  • There are a number of answers in this [SO post](https://stackoverflow.com/questions/29444051/link-with-target-blank-does-not-open-in-new-tab-in-chrome). Maybe one of them could help you. – Jacque Dec 26 '18 at 07:01
  • Thank you for your answer, but that's not the case. It is a Progressive Web App issue. But i think i found a workaround. I'm going to post it when it's done. – Rüzgar Dec 26 '18 at 08:00

2 Answers2

1

For those who are facing the same issue here is what i did:

I didn't change anything on my current architecture. But created a new blank page with Bootstrap Navs created dynamically like so:

$('.add-raporsayfasi').click(function (e) {
    e.preventDefault();
    var linki = $(this).data('linki');
    var ismi = $(this).text();
    var id = $("#raporTabContainer .nav-item").children().length;
    var tabId = 'raporsayfasi_' + id;
    $(this).closest('li').before('<li class="nav-item"><a class="nav-link raportablink" id="raporsayfasi-tab_' + id + '" data-toggle="tab" href="#raporsayfasi_' + id + '">'+ismi+'</a></li>');
    $('#raporTabContainerContent').append('<div class="tab-pane" id="' + tabId + '"></div>');
   $('#'+tabId).load( linki );
   $(this).addClass('disabled').removeClass('add-raporsayfasi');
   $(this).remove();
   addSwipeTo(".nav-item");
   $('#raporsayfasi-tab_'+id).tab('show');
});

And changed my current navigation to :

<a class="nav-link add-raporsayfasi" data-linki="/app/bankadurumlari" id="ekle" href="#">Banka Durumları</a>

Thw jquery code takes the data-linki attribute and loads the page using jQuery's load() function like so:

$('#'+tabId).load( linki );

Hope it helps anyone with the same problem.

Rüzgar
  • 947
  • 9
  • 20
0

Not exactly sure what your requirements are, but 3 solutions are floating in my head.

remove target="_blank" that always opens a new browser window/tab. If you launched form the homescreen the user agent interprets that as a new window, outside the PWA application context.

** side note: when using target="_blank" always use rel="noopener" too ;)

If you want to lunch with the browser chrome, not full screen, you can open a sibling browser tab and it won't launch the browser from the PWA since the PWA is already within the browser's execution context.

If by tab you mean a tabbed UI then you can just create that UI. It is pretty basic, a series of sibling divs with click event handlers to toggle the visible tab content. In this context the problem more a responsive design problem than a PWA problem.

Chris Love
  • 3,740
  • 1
  • 19
  • 16
  • Thank you for your answer and kind advice. But the main problem was that i didn't want to move from MPA to SPA, because of the current structure of the main classes such as routing and authentication on the Server-Side. But finally i managed to solve my problem, and i'm going to post it here asap. – Rüzgar Dec 26 '18 at 18:23
  • 1
    Not sure what MPA refers to. But progressive web app does not mean single page application FWIW :) https://love2dev.com/blog/pwa-spa/ It is a common misconception. Glad you found a solution! – Chris Love Jan 23 '19 at 20:23
  • https://mathiasbynens.github.io/rel-noopener/ -- appears you no longer need to specify noopener assuming you don't support old browsers. Interesting read on how things get hacked. – KenF Aug 26 '22 at 02:25