Зависание PWA при навигационных щелчках в Safari iOS (13.5) после входа в Microsoft OpenID - PullRequest
Новая
       54

Зависание PWA при навигационных щелчках в Safari iOS (13.5) после входа в Microsoft OpenID

1 голос
/ 19 июня 2020

Зависание PWA после того, как OpenID авторизует пользователя [iOS Safari Standalone]

Я создал простой PWA для наших сотрудников службы безопасности, который позволяет сотрудникам нажимать ссылки и просматривать контент о политике нашей компании по различным вопросам. Приложение использует библиотеку промежуточного программного обеспечения Microsoft OWIN для авторизации доступа наших сотрудников к приложению через их корпоративные права входа в Microsoft. Когда пользователь нажимает кнопку «Войти в систему» ​​на нашей странице входа, он перенаправляется в домен Microsoft для завершения процесса входа. После завершения входа они перенаправляются обратно на домашнюю страницу нашего приложения.

Проблема

Проблема появляется только возникает, когда iOS пользователей (v13) закрепите приложение на рабочем столе, а затем запустите приложение в автономном режиме, и только после пользователь полностью завершил работу приложения и затем вернулся. Мы протестировали приложение в Chrome, Safari (автономный режим), Firefox, и проблема не возникает в этих браузерах. Приложение работает без проблем до тех пор, пока пользователь не завершит вход в Microsoft и не будет перенаправлен обратно на домашнюю страницу. На этом этапе, если пользователь щелкает ссылку на другую страницу (в приложении), приложение полностью блокируется, не реагирует на дальнейшие нажатия кнопок и не загружает страницу, запрошенную пользователем. В консоли не возникает никаких ошибок.

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

Возможные причины

Моя текущая рабочая теория заключается в том, что проблема вызвана некоторой комбинацией следующих факторов:

  • Перенаправление на портал входа Microsoft . Когда пользователя отправляют в Microsoft для аутентификации, а затем отправляют обратно в наш домен, могут возникнуть проблемы с непрерывностью сеанса / готовки ie.
  • iOS автономный режим . В связи с вышеизложенным, возможно ли, что использование сторонней аутентификации и кратковременный выход из домена PWA вызывает проблемы с навигацией по страницам в будущем. Это подтверждается идеей о том, что ни у одного другого браузера или устройства нет этой проблемы, и мои исследования показывают, что поддержка Apple для PWA все еще находится на начальной стадии.
  • Сбой сервис-воркера . Мы провели серьезное тестирование, чтобы убедиться, что сервис-воркер правильно установлен и зарегистрирован при первом входе пользователя на сайт. У нас есть проверки для повторной регистрации ПО на случай, если он упадет в любой момент навигации по странице. Мы уверены, что в то время, когда пользователь перенаправляется обратно на нашу домашнюю страницу после аутентификации, есть активный сервисный воркер, который обрабатывает запросы GET страницы. Я также протестировал явное кэширование связанных страниц, доступных с нашей домашней страницы во время регистрации сервисного работника, чтобы увидеть, может ли обслуживание страницы из кеша решить проблему. Это не так. Это код в sw. js, который обрабатывает запросы на выборку (взяты из удобного руководства Google): 
    // "cache-first" approach for requests from client. Will try to get the file from the cache.
    // If no match found, it will send the request onto the network. If both fail serve fallback page.
    self.addEventListener("fetch", function (event) {
        if (event.request.method !== "GET") return;
        event.respondWith(
            // Try the cache
            caches.match(event.request).then(function (response) {
                console.log("[service worker] attempting to fetch file from cache...");
                return response || fetch(event.request);
            }).catch(function () {
                // If both fail, show a generic fallback:
                return caches.match(offlineFallbackPage);
            })
        );
    });

Я удаленно отлаживал PWA в автономном режиме, используя Ma c, и что я подтвердил, так это то, что событие click, которое срабатывает, когда пользователь щелкает ссылку для перехода на новую страницу, обрабатывается должным образом, поэтому проблема действительно проявляется в l ie при загрузке самих связанных страниц. Кроме того, удаленная отладка подтвердила, что при попытке перехода на другие страницы сайта вообще не возникает никаких ошибок HTTP GET (или любых других ошибок).

Это первый PWA, который я когда-либо создавал и я новичок во всем этом. Так что я хотел бы знать, упускаю ли я что-нибудь или где я могу go отсюда. Я обыскал все форумы и нигде не нашел ответов. Спасибо!

...