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

Question

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

Я создал веб-приложение для клиента в 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, но это значит, много работы.

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

Я ценю, если вы поделитесь своими мыслями по этому поводу.

0

ajax browser php progressive-web-apps

Решение

Другие решения

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

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

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

Код JQuery принимает data-linki атрибут и загружает страницу с помощью jQuery’s load() функционировать так:

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

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

0

Источник

Accepted Answer

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

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

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

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

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

0