Refine PWA launches on iOS#3742
Conversation
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
This PR refines PWA launch/shortcut behavior for the Playground website and Personal WP apps, adds iOS install metadata + maskable icons, and introduces tests to lock down manifest/install metadata expectations.
Changes:
- Expanded static and dynamic manifests with stable
id, screenshots, categories, shortcuts (website only), and maskable icons. - Updated HTML install metadata (Apple touch icons + iOS standalone meta) and tightened manifest URL persistence for standalone launches.
- Added focused unit tests covering manifest content, iOS install metadata, and dynamic manifest identity stability.
Reviewed changes
Copilot reviewed 8 out of 12 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/playground/website/src/lib/pwa-manifest.spec.ts | Adds tests for website manifest fields, iOS metadata, and dynamic-manifest identity behavior. |
| packages/playground/website/public/manifest.json | Enriches website manifest (id, screenshots, shortcuts, categories, maskable icons). |
| packages/playground/website/public/dynamic-manifest.json.php | Adds stable manifest id, richer install metadata, and shortcut URL generation. |
| packages/playground/website/index.html | Adds iOS install meta and reworks manifest URL selection/persistence. |
| packages/playground/personal-wp/src/lib/pwa-manifest.spec.ts | Adds tests for personal-wp manifest fields, iOS metadata, and dynamic manifest identity behavior. |
| packages/playground/personal-wp/public/manifest.json | Updates personal-wp manifest start/id to /my-apps/, adds screenshots/categories/maskable icons, removes shortcuts. |
| packages/playground/personal-wp/public/dynamic-manifest.json.php | Adds stable manifest id and richer install metadata; adjusts start URL default to /my-apps/. |
| packages/playground/personal-wp/index.html | Adds iOS install meta and reworks manifest URL selection/persistence. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
@fellyph It seems like an "after" screenshot is missing |
|
This is Playground on iOS: and my WordPress: 
|
fellyph
changed the title
| const runningOnDevServer = | ||
| window.location.port === '5400' || | ||
| window.location.pathname.startsWith('/website-server/'); | ||
|
|
There was a problem hiding this comment.
Let's export an isDevServer function from the remote package and reuse it here. There are a few more dev servers we should support https://github.com/bgrgicak/wordpress-playground/blob/77a9939a22962b51d55bb08f3681d231a4db1c3a/packages/playground/remote/src/lib/offline-mode-cache.ts#L173-L187
There was a problem hiding this comment.
Thanks, Bero. I have moved to a separate module
Summary
/website-server/use the static dev manifest and relative icon assets, so mobile PWA testing works through HTTPS tunnels.Testing
npm exec nx test playground-website --testFile=pwa-manifest.spec.tsnpm exec nx test playground-personal-wp --testFile=pwa-manifest.spec.tsgit diff --checkshortcuts.Mobile PWA testing with HTTPS tunnels
Use iOS Safari for installation testing. If an older version of the app is already installed, remove it from the Home Screen first so iOS refreshes the icon and manifest metadata.
WordPress Playground
Start the Playground dev server:
Expose it with Cloudflare Tunnel:
Or expose it with ngrok:
Open this URL on iOS Safari:
Then tap Share -> Add to Home Screen.
My WordPress
If the shared Playground dev server is already running, start only the Personal WP standalone app:
npm exec nx dev:standalone playground-personal-wp --configuration=development --output-style=stream-without-prefixesIf the shared dev server is not running, start the full Personal WP dev target instead:
npm exec nx dev playground-personal-wpExpose Personal WP with Cloudflare Tunnel:
Or expose it with ngrok:
Open this URL on iOS Safari:
Then tap Share -> Add to Home Screen.
Keep both the dev server and tunnel process running while testing.
before:
