- Oops! Playground failed to start. Here's what to do: -
- -- It also disables the required Service Worker API. Please re-enable - third-party cookies and try again. -
- -- Click the button below and grant storage access. Note the button may - not work if you have disabled third-party cookies in your browser. -
- `; - const reportIssues = - document.createElement('p'); - reportIssues.innerHTML = ` - If neither method helped, please + fragment.append(button); + + const reportIssues = document.createElement('p'); + reportIssues.innerHTML = ` + If the problem persists, please + report an issue on GitHub. + `; + fragment.append(reportIssues); + + return fragment; + } + + async function renderStorageErrorUI() { + const fragment = document.createDocumentFragment(); + + /** + * Chrome does not allow Service Workers to be registered from cross-origin iframes + * when third-party cookies are disabled unless `requestStorageAccess()` is called + * and the user grants storage access. + * + * Let's assess the situation and provide a helpful message. + */ + let hasStorageAccess = false; + try { + const { state } = await navigator.permissions.query({ + name: 'storage-access', + }); + hasStorageAccess = state === 'granted'; + } catch (e) { + // noop + } + + if (hasStorageAccess || !('requestStorageAccess' in document)) { + const div = document.createElement('div'); + + // The user has granted storage access, but the error still persists. + // Let's explain why. + div.innerText = + 'It looks like you have disabled third-party cookies in your browser. This ' + + 'also disables the Service Worker API used by WordPress Playground. Please re-enable ' + + 'third-party cookies and try again.'; + fragment.append(div); + + const button = document.createElement('button'); + button.innerText = 'Try again'; + button.onclick = () => { + window.location.reload(); + }; + fragment.append(button); + } else { + const div = document.createElement('div'); + + // The user has not granted storage access. + // There's a chance we can fix this by asking for storage access. + div.innerText = + 'WordPress Playground needs to use storage in your browser.'; + fragment.append(div); + + const button = document.createElement('button'); + button.innerText = 'Allow storage access'; + fragment.append(button); + + button.onclick = async () => { + try { + await document.requestStorageAccess(); + window.location.reload(); + } catch (e) { + // Either the user denied storage access OR chrome is not allowing + // storage access to be requested from an iframe for some reason. + + // The two errors are indistinguishable and just say "requestStorageAccess not allowed" + // https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/dom/document.cc;drc=daf56cfa413f10dee6aa15b0b1e4572fcf5578df;l=462 + // It's confusing! But we can at least tell the user what to do. + div.innerHTML = ` ++ Oops! Playground failed to start. Here's what to do: +
+ ++ It also disables the required Service Worker API. Please re-enable + third-party cookies and try again. +
+ ++ Click the button below and grant storage access. Note the button may + not work if you have disabled third-party cookies in your browser. +
++ If neither method helped, please + target="_blank"> report an issue on GitHub . +
`; - document.body.append(reportIssues); - } - }; - } + } + }; } - document.body.append(button); - } finally { - document.body.classList.remove('is-loading'); + return fragment; }