CODEWITHSUNDEEP
phpajaxbrowserprogressive-web-apps
Rüzgar
Rüzgar

Reputation: 997

Is it possible to achieve native multi tab PWA within the same browser window?

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.

Upvotes: 0

Views: 3300

Answers (2)

R&#252;zgar
R&#252;zgar

Reputation: 997

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.

Upvotes: 1

Chris Love
Chris Love

Reputation: 3893

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.

Upvotes: 0

Related Questions