Add iOS Safari data persistence warning for personal-wp#3415
Open
Add iOS Safari data persistence warning for personal-wp#3415
Conversation
Implement detection of iOS/iPadOS Safari users who haven't installed the app as a PWA, and display a dismissible warning about Safari's 7-day ITP storage wipe policy. The notice encourages users to add the app to their Home Screen for safer data persistence. - Add is-ios-safari.ts utility with isIOS, isIOSSafari, isRunningAsPWA - Add IosPwaNotice component using WordPress Notice component - Integrate notice into Layout component - Add comprehensive unit tests for iOS detection Co-authored-by: ashfame <858906+ashfame@users.noreply.github.com>
Move IosPwaNotice inside the siteView flex column so it appears as a compact banner above the browser chrome toolbar, instead of as a column beside the viewport. Co-authored-by: ashfame <858906+ashfame@users.noreply.github.com>
- Wrap localStorage.getItem and setItem in try-catch to handle private browsing mode and storage quota errors - Remove zero-width no-break space character from share icon span Co-authored-by: ashfame <858906+ashfame@users.noreply.github.com>
Copilot
AI
changed the title
[WIP] [persona-wp] Implement iOS user notification and PWA prompt
Add iOS Safari data persistence warning for personal-wp
Mar 18, 2026
Contributor
There was a problem hiding this comment.
Pull request overview
Adds an in-app warning banner for personal-wp users on iOS Safari to mitigate silent data loss risk from Safari’s 7‑day ITP storage purge by prompting installation as a Home Screen PWA.
Changes:
- Added iOS/iPadOS + Safari detection helpers (and unit tests) to target affected environments.
- Introduced a dismissible
IosPwaNoticethat persists dismissal inlocalStorage. - Integrated the notice into the main layout and adjusted layout CSS to support stacking above the viewport.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/playground/personal-wp/src/lib/is-ios-safari.ts | Adds iOS/Safari + PWA detection helpers used to decide when to show the warning. |
| packages/playground/personal-wp/src/lib/is-ios-safari.spec.ts | Adds Vitest coverage for iOS and iOS Safari detection logic. |
| packages/playground/personal-wp/src/components/layout/style.module.css | Updates layout to flex column so the new notice can sit above the site viewport. |
| packages/playground/personal-wp/src/components/layout/index.tsx | Renders the new IosPwaNotice within the layout. |
| packages/playground/personal-wp/src/components/ios-pwa-notice/* | Implements the warning banner UI, styling, and dismissal persistence. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| * (standalone display mode). | ||
| */ | ||
| export function isRunningAsPWA(): boolean { | ||
| return window.matchMedia('(display-mode: standalone)').matches; |
Comment on lines
+55
to
+57
| */ | ||
| export function isRunningAsPWA(): boolean { | ||
| return window.matchMedia('(display-mode: standalone)').matches; |
Comment on lines
+65
to
+71
| export function isIOSSafariWithoutPWA( | ||
| ua?: string, | ||
| platform?: string, | ||
| maxTouchPoints?: number | ||
| ): boolean { | ||
| return isIOSSafari(ua, platform, maxTouchPoints) && !isRunningAsPWA(); | ||
| } |
Comment on lines
+69
to
+70
| role="img" | ||
| aria-label="share" |
Comment on lines
+3
to
+5
| color: #1e1e1e; | ||
| font-size: inherit; | ||
| border-left-color: #dba617; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Safari's ITP policy wipes all script-writable storage after 7 days of inactivity. Users on iOS Safari who haven't installed the app as a PWA are at risk of losing their WordPress data without warning.
Changes
src/lib/is-ios-safari.ts):isIOS,isIOSSafari,isRunningAsPWA— handles iPhone, iPad, iPadOS 13+ (reports as MacIntel), and excludes WKWebViews/CriOS/FxiOSIosPwaNoticecomponent: Dismissible warning banner using WordPressNoticecomponent, shown only to iOS Safari users not running as a standalone PWA. Dismissal persisted via localStorage (with try-catch for private browsing)Screenshot
Warning
Firewall rules blocked me from connecting to one or more addresses (expand for details)
I tried to connect to the following addresses, but was blocked by firewall rules:
cdn.cypress.io/home/REDACTED/work/_temp/ghcca-node/node/bin/node node index.js --exec install(dns block)If you need me to access, download, or install something from one of these locations, you can either:
Original prompt
📍 Connect Copilot coding agent with Jira, Azure Boards or Linear to delegate work to Copilot in one click without leaving your project management tool.