Можно ли достичь родной PWA с несколькими вкладками в одном и том же окне браузера? - PullRequest
Новая
       5

Можно ли достичь родной PWA с несколькими вкладками в одном и том же окне браузера?

0 голосов
/ 25 декабря 2018

Я создал веб-приложение для клиента на PHP .И я реализовал PWA (Progressive Web App) приложение для этого веб-приложения, которое работает довольно хорошо.

Но недавно мой клиент попросил меня добавить вкладки окна для этого приложения PWA .Но проблема в том, что я уже закончил эту работу, и я не хочу перестраивать свою архитектуру с нуля.

Мне бы хотелось, чтобы (если это возможно), когда пользователь щелкает ссылку, страница открываетсяв том же приложении, что и сейчас, но в новой вкладке.

Когда я добавляю target="_blank" к своим ссылкам, примерно так: 

<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>

страница открывается за пределами окна PWAв новом браузере Android.Это не то поведение, которое он принимает.

Я искал в Интернете, но не смог найти правильный ответ.Здесь есть ссылка здесь , которая мне совсем не помогла.

Я знаю, что могу сделать это с PHP Sessions и AJAX, но это значит, что нужно проделать большую работу.

Я хочу достичь этого изначально, но не знаю, если это возможно.

Буду признателен, если вы поделитесь своими мыслями по этому поводу.

Ответы [ 2 ]

0 голосов
/ 27 декабря 2018

Для тех, кто сталкивается с той же проблемой, вот что я сделал:

Я ничего не изменил в своей текущей архитектуре.Но создал новую пустую страницу с помощью Bootstrap Nav, созданной динамически, например: 

$('.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');
});

И изменил мою текущую навигацию на: 

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

Thw jquery-код принимает атрибут data-linki и загружаетстраница, использующая функцию jQuery load(), выглядит следующим образом: 

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

Надеюсь, это поможет кому-то с такой же проблемой.

0 голосов
/ 26 декабря 2018

Не совсем уверен, что ваши требования, но 3 решения плавают в моей голове.

remove target = "_ blank", которая всегда открывает новое окно / вкладку браузера.Если вы запустили домашний экран, пользовательский агент интерпретирует его как новое окно вне контекста приложения PWA.

** примечание: при использовании target = "_ blank" всегда используйте rel = "noopener";)

Если вы хотите пообедать в браузере Chrome, а не в полноэкранном режиме, вы можете открыть вкладку одноуровневого браузера, и он не запустит браузер из PWA, поскольку PWA уже находится в контексте выполнения браузера.

Если под вкладкой подразумевается пользовательский интерфейс с вкладками, вы можете просто создать этот пользовательский интерфейс.Это довольно простой, набор родственных элементов с обработчиками события click для переключения видимого содержимого вкладки.В этом контексте проблема скорее адаптивная, чем проблема PWA.

...