Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to maintain login status in a PWA initially loaded via Safari 14/iOS 14?

Our requirement is to have our users login to an app via a URL and, having added the app to their homescreen as a PWA, maintain that logged-in status, so that a second login to the installed PWA is not required. This is certainly possible under Android/Chrome where the logged-in status can be initially stored and accessed by the PWA via a variety of mechanisms (including cookie, IndexedDB, cache).

However, it now appears to us that a PWA under iOS 14/iPadOS 14 is tightly sandboxed and Safari has no way of passing logged-in status to it. Over the years, and through the various versions of iOS, a variety of sharing mechanisms have been offered - and rendered obsolete in a subsequent version. These include:

  1. the cache, accessed via a fake endpoint (ref)
  2. a session cookie (ref)

A mechanism that doesn't rely on browser-shared storage is the addition of a server-generated token to the URL (ref), (ref) - the problem here is that it upsets Android/Chrome, which uses an unmodified start_url in the web app manifest.

This is an issue which has provoked a number of SO questions over the years (three of them referenced above) and some of them have been answered with solutions that apparently worked under earlier versions of iOS. What we're wanting now is a solution which works under the latest version as well as it works under Android/Chrome. Any offers?

like image 374
Velojet Avatar asked Jul 01 '20 04:07

Velojet


People also ask

Does iOS Safari support PWA?

On desktop, Safari and Firefox do not support PWA installation. They do support offline capabilities, but the experience will always start within the browser user interface. It may get fullscreen, but never a standalone window on desktop.

Does iOS allow progressive Web Apps?

You can use Progressive Web Apps (PWAs) for a fast web experience on your computer or mobile device. You can install the PWA for faster access and additional functionality, like more storage for content to use offline. Chrome for iOS does not support PWAs.


1 Answers

It can be done. Here's how we've succeeded in doing it:

  1. When the user initially logs in to the app in the browser, we generate a UID on the server.
  2. We pair this UID with the username in a server file (access.data).
  3. We generate the web app manifest dynamically. In it we set the start_url to the index page and append a query string incorporating the UID e.g. "start_url": "/<appname>/index.html?accessID=<UID>".
  4. We create a cookie to verify that the app has been accessed e.g. access=granted.
  5. When the user accesses the app as an iOS PWA, the app looks for this cookie and doesn't find it (cunning ;) - we use one of the iOS deficiencies (not sharing cookies between Safari and the PWA) to defeat that same deficiency).
  6. The absence of the access cookie tells the app to extract the UID from the query string.
  7. It sends the UID back to the server, which looks for a match in access.data.
  8. If the server finds a match, it tells the app that the PWA user is already logged in and there's no need to again display the login screen. Mission accomplished!

Note: Android/Chrome simply ignores the accessID in the query string - I was wrong in my question to imply that Android/Chrome requires an unmodified start_url.

like image 67
Velojet Avatar answered Sep 20 '22 07:09

Velojet