Add a notice to open Playground in a separate view#3387

Merged

zaerl merged 10 commits intotrunkfrom

add/safari-webview-overlay

Mar 13, 2026

Collaborator

zaerl commented Mar 13, 2026 •

edited

Loading

Motivation for the change, related issues

https://a8c.slack.com/archives/C04BURZDHFH/p1773349742845509

Implementation details

Service Workers do not work on simple WKWebView (that Linkedin uses) but only inside SFSafariViewController. This PR add a way to the user to open the page in a real browser.

immagine

Testing Instructions (or ideally a Blueprint)

Download the test app Playground inspector.zip
npm run dev Playground
Run the app, it should show the modal
Run from a browser, nothing should happen

The Open in Safari will not work with http://localhost:5400/website-server/ for WKWebView security reason. If you want to experiment with a real site change let url = URL(string: "http://localhost:5400/website-server/")! with let url = URL(string: "https://my.wordpress.net/")! and uncomment the swift code that inject the HTML. By clicking it Safari will be spawn at that URL.

immagine

zaerl self-assigned this

zaerl requested review from adamziel and ashfame

March 13, 2026 13:25

zaerl marked this pull request as ready for review

March 13, 2026 13:26

zaerl requested review from a team, Copilot and mho22

March 13, 2026 13:26

Copilot AI reviewed

View reviewed changes

Contributor

Copilot AI left a comment

Pull request overview

Adds an early-rendered notice for iOS in-app browsers (WKWebView) so users can open WordPress Playground in a full browser where required features (e.g., Service Workers) are available.

Changes:

Added a pre-React WKWebView detection flow in index.html that displays a modal notice and provides “Open in Safari” / “Copy URL” actions.
Added global CSS for the WKWebView notice overlay and adjusted some existing styling.
Refactored the Playground logo rendering in the React overlay to use a raw SVG import.

Reviewed changes

Copilot reviewed 5 out of 6 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
packages/playground/website/src/styles.css	Adds global styles for the WKWebView notice overlay.
packages/playground/website/src/main.tsx	Reorders imports (no functional change).
packages/playground/website/src/components/overlay/style.module.css	Updates logo styling to accommodate inline SVG injection.
packages/playground/website/src/components/overlay/index.tsx	Switches logo rendering to `dangerouslySetInnerHTML` with raw SVG import.
packages/playground/website/index.html	Adds WKWebView notice markup + detection script and attempts to prevent app boot in WKWebView.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

packages/playground/website/index.html

               		</main>
               		<script type="module">
-              			if (!shouldLazyLoadPlayground) {
+              			if (!shouldLazyLoadPlayground && !window.__isWKWebView) {

packages/playground/website/index.html

+              				if (!isWebView) {
+              					return;
+              				}

packages/playground/website/index.html Outdated

Comment on lines +162 to +167

+              				document.getElementById('wkwebview-safari-link').href =
+              					'x-safari-https://' +
+              					window.location.host +
+              					window.location.pathname +
+              					window.location.search +
+              					window.location.hash;

packages/playground/website/index.html

Comment on lines +169 to +182

+              				document
+              					.getElementById('wkwebview-copy-btn')
+              					.addEventListener('click', function () {
+              						var btn = this;
+              						navigator.clipboard
+              							.writeText(window.location.href)
+              							.then(function () {
+              								var original = btn.textContent;
+              								btn.textContent = 'Copied!';
+              								setTimeout(function () {
+              									btn.textContent = original;
+              								}, 2000);
+              							});
+              					});

packages/playground/website/index.html

Comment on lines +100 to +116

+              		<div id="wkwebview-notice" role="dialog" aria-modal="true">
+              			<div class="card">
+              				<div class="logo">
+              					<img
+              						src="./src/playground-logo.svg"
+              						alt="WordPress Playground logo"
+              						width="40"
+              						height="40"
+              					/>
+              					<span>Playground</span>
+              				</div>
+              				<h1>Open in your browser</h1>
+              				<p>
+              					WordPress Playground requires features that are not
+              					available in in-app browsers. Please open this page in
+              					Safari or your preferred browser to continue.
+              				</p>

packages/playground/website/src/components/overlay/index.tsx

Comment on lines +18 to +22

+              			{/* eslint-disable-next-line react/no-danger */}
+              			<span
               				className={css.logoIcon}
-              			>
-              				<path
-              					fillRule="evenodd"
-              					clipRule="evenodd"
-              					d="M14.755 45.1665C12.0512 48.8962 10.6245 53.4789 10.3951 58.5153C10.358 59.3301 10.3522 60.1566 10.3774 60.9934C10.7191 72.3238 16.7432 85.5209 27.6103 96.388C44.2413 113.019 66.3294 118.307 78.8323 109.243C73.5732 108.004 68.2526 106.073 63.0136 103.496C61.6689 103.437 60.222 103.262 58.6713 102.952C56.0196 102.421 53.2158 101.511 50.3594 100.216C50.3593 100.216 50.3592 100.215 50.359 100.215C45.1354 97.8469 39.7361 94.1934 34.7704 89.2277C29.8052 84.2625 26.1519 78.8637 23.784 73.6406C23.7838 73.6405 23.7836 73.6405 23.7834 73.6404C22.4884 70.7839 21.5779 67.9798 21.0476 65.3279C20.7375 63.7776 20.5621 62.3309 20.5032 60.9865C17.9263 55.7471 15.9944 50.426 14.755 45.1665ZM4.33861 76.7002C4.71713 76.3217 5.11425 75.9686 5.52862 75.6407C6.7468 79.1965 8.35436 82.7444 10.3249 86.214C10.06 87.3833 10.0041 88.9848 10.4335 91.1319C11.2858 95.3936 13.9437 100.626 18.659 105.341C23.3743 110.056 28.6064 112.714 32.8681 113.567C35.0158 113.996 36.6176 113.94 37.787 113.675C41.2566 115.645 44.8043 117.252 48.36 118.47C48.0319 118.885 47.6786 119.283 47.2998 119.661C39.3909 127.57 23.3622 124.365 11.4988 112.501C-0.364596 100.638 -3.57033 84.6091 4.33861 76.7002ZM43.7198 80.2786C67.4466 104.005 99.5039 110.417 115.322 94.599C121.041 88.8798 123.854 81.0375 123.994 72.2337C124.239 56.6885 116.149 38.1454 101.001 22.9976C77.2746 -0.729192 45.2173 -7.14065 29.3994 8.67722C23.6725 14.4041 20.8595 22.2597 20.7271 31.078C20.4941 46.6158 28.5836 65.1423 43.7198 80.2786ZM77.1341 84.4888C77.5747 86.6917 77.7433 88.6853 77.6924 90.4738C68.7821 87.3724 59.3392 81.5782 50.88 73.119C42.4208 64.6598 36.6267 55.2171 33.5253 46.3068C35.3138 46.2559 37.3074 46.4245 39.5104 46.8651C47.0115 48.3653 55.7301 52.9069 63.4112 60.588C71.0923 68.2691 75.6339 76.9877 77.1341 84.4888ZM36.5596 15.8374C32.2725 20.1245 29.985 27.0976 31.1373 36.3235C43.2662 35.1444 58.3841 41.2404 70.5714 53.4278C82.7587 65.6151 88.8548 80.7329 87.6757 92.8617C96.9016 94.014 103.875 91.7265 108.162 87.4394C112.932 82.6694 115.226 74.5742 113.061 63.7503C110.913 53.0099 104.488 40.8048 93.8412 30.1578C83.1942 19.5108 70.9891 13.0857 60.2487 10.9376C49.4248 8.7728 41.3296 11.0674 36.5596 15.8374Z"
-              					fill="#e5e6e6"
-              				/>
-              			</svg>
+              				dangerouslySetInnerHTML={{ __html: playgroundLogoSvg }}
+              			/>

packages/playground/website/src/components/overlay/style.module.css

+              	width: 32px;
+              	height: 32px;
               }

brandonpayton reviewed

View reviewed changes

packages/playground/website/src/components/overlay/index.tsx

-              				fill="none"
-              				xmlns="http://www.w3.org/2000/svg"
+              			{/* eslint-disable-next-line react/no-danger */}
+              			<span

Member

brandonpayton Mar 13, 2026

@zaerl if this change isn't needed, let's go ahead and revert it.

Member

brandonpayton Mar 13, 2026

Oh, I see the file is reused. Ignore this.

Collaborator Author

zaerl Mar 13, 2026

Yes, the svg file is the same. To avoid having to hardcode it twice.

zaerl added 10 commits

March 13, 2026 23:11


          Add a notice to open Playground in a separate view

5c647e6


          Reuse logo SVG

a45c0b7


          Move checks to index.html

dfc361d


          Add changes to my.wp

fd2dfec


          Add "share" button if opened under X app

1bda536


          Add missing declaration of __isWKWebView

6b6474d


          Fix: change modules order

034b4d1


          Change link URL

c1eb26b


          Fix: change other link

f57b186


          Change the URL of safari link

91ae9f8

zaerl force-pushed the add/safari-webview-overlay branch from 758c167 to 91ae9f8 Compare

March 13, 2026 22:12

brandonpayton approved these changes

View reviewed changes

Member

brandonpayton left a comment

This tests well in the test app. It launches the sites in the main iOS Safari browser, and it doesn't display "open in safari" UI in actual Safari.

The dev servers for Playground and personal-wp all load well in desktop browsers.

zaerl merged commit 3986c89 into trunk

43 checks passed

zaerl deleted the add/safari-webview-overlay branch

March 13, 2026 22:26

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

brandonpayton brandonpayton approved these changes

adamziel Awaiting requested review from adamziel

ashfame Awaiting requested review from ashfame

mho22 Awaiting requested review from mho22 mho22 was automatically assigned from WordPress/playground-maintainers

Labels

None yet