Stack Overflow Asked by Velojet on November 4, 2021
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:
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?
Generating Webapp manifest and changing start_url
has it's own consequences.
For example Sometimes the data we want to pass is not available right away and also if data is passed in url we should make sure that passed login data are invalidated after first Webapp opening because otherwise sharing bookmark would also share login credentials of the user.
By doing so you lose the power of start_url
which means if users add your website when it's in subdirectory1
it would always open in subdirectory1
after that.
What's the alternative ?
Since ios 14, safari shares cacheStorage with Webapps. so the developer can save credentials as cache in the cacheStorage and access them inside the Webapp.
Code compatibility
About ios14 availability we should consider that before ios 14 more than 90% of users had updated to ios 13 and the fact that ios 14 is supported by all devices that support ios 13, we can assume that ios 14 usage would soon reach 90%+ and the other ~5% can alway login again inside Webapp. it has already reached 28% in 12 days based on statcounter
Here is the code i use in my Webapp and it works successfully with ios add to home screen.
///change example.com with your own domain or relative path.
function createCookie(name, value, days) {
if (days) {
var date = new Date();
date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
var expires = "; expires=" + date.toGMTString();
} else var expires = "";
document.cookie =
name + "=" + value + expires + "; path=/; domain=.example.com";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(";");
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == " ") c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return undefined;
}
async function setAuthFromCookie() {
caches.open("auth").then(function (cache) {
console.log("Set Cookie");
return cache.add(["https://example.com/cacheAuth.php"]);
});
}
async function setAuthToCookie() {
var uid = readCookie("uid");
var authKey = readCookie("authKey");
caches.open("auth").then((cache) => {
cache
.match("https://example.com/cacheAuth.php", {
ignoreSearch: true,
})
.then((response) => response.json())
.then((body) => {
if (body.uid && uid == "undefined") {
/// and if cookie is empty
console.log(body.authKey);
createCookie("authKey", body.authKey, 3000);
}
})
.catch((err) => {
console.log("Not cached yet");
});
});
}
setTimeout(() => {
setAuthFromCookie();
//this is for setting cookie from server
}, 1000);
setAuthToCookie();
Answered by Pooya Estakhri on November 4, 2021
It can be done. Here's how we've succeeded in doing it:
access.data
).start_url
to the index page and append a query string incorporating the UID e.g. "start_url": "/<appname>/index.html?accessID=<UID>"
.access=granted
.access
cookie tells the app to extract the UID from the query string.access.data
.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
.
Answered by Velojet on November 4, 2021
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP