Skip to content

Add mobile web app support (Add to Home Screen)#91

Merged
kraftbj merged 17 commits intotrunkfrom
mobile-web-app
Apr 3, 2026
Merged

Add mobile web app support (Add to Home Screen)#91
kraftbj merged 17 commits intotrunkfrom
mobile-web-app

Conversation

@kraftbj
Copy link
Copy Markdown
Collaborator

@kraftbj kraftbj commented Mar 6, 2026

Summary

Enables Press This to work as a standalone mobile web app that can be added to the home screen on Android and iOS. Implements the core features from #2 (originally WordPress core Trac #33195).

  • Add Web App Manifest served via REST endpoint (/press-this/v1/manifest) with Share Target API support (Android)
  • Add mobile web app meta tags (mobile-web-app-capable, apple-mobile-web-app-capable, theme-color, etc.)
  • Add app icons (pencil on WordPress blue) at 180px, 192px, and 512px
  • Handle standalone display mode: skip window.close() in redirects, add "View Site" and "New Post" menu items
  • Sync fallback script dependencies with generated asset file

Share Target

The manifest share_target reuses Press This's existing GET params (?u=...&t=...), so sharing a URL from another Android app opens Press This with the URL pre-filled — no editor changes needed.

Future enhancements

These are out of scope for this PR but documented for future work:

  • Service Worker — cache app shell for instant loading (caveat: iOS evicts SW cache after ~7 days of inactivity)
  • Apple splash screensapple-touch-startup-image tags per device resolution
  • Push notifications — notify of pending drafts or publishing status (requires iOS 16.4+)
  • Share Target file sharing — accept shared images/files via POST + multipart/form-data
Feature Android iOS
Add to Home Screen Yes Yes
Standalone mode Yes Yes
Share Target Yes No (WebKit limitation)

Test plan

  • Load Press This, view source — confirm all meta tags present in <head>
  • Fetch /wp-json/press-this/v1/manifest — confirm valid JSON with correct dynamic URLs
  • Android: Open in Chrome, install as app, launch from home screen — confirm standalone mode with pencil icon
  • iOS: Open in Safari, Share > Add to Home Screen, launch — confirm standalone mode with proper icon
  • Android: Install PWA, share a URL from another app — confirm Press This opens with the shared URL
  • In standalone mode: confirm "More actions" menu shows "View Site" and "New Post" options
  • In standalone mode: publish a post — confirm redirect goes to the post URL instead of trying window.close()
  • Launch from home screen with no URL params — confirm editor loads as empty post

Enable Press This to work as a standalone mobile web app via Add to
Home Screen on Android and iOS. Adds Web App Manifest with Share Target
API support, app icons, mobile web app meta tags, and standalone mode
UI handling.

Closes #2

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@kraftbj kraftbj requested a review from Copilot March 6, 2026 23:30
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds Progressive Web App (Add to Home Screen) support for Press This, including a web app manifest endpoint and UI behavior tweaks for standalone display mode.

Changes:

  • Serve a Web App Manifest via a new public REST endpoint, including Share Target support.
  • Add standalone-mode behavior adjustments (redirect behavior + menu items).
  • Add mobile web app meta tags and icon/manifest links in the Press This HTML head.

Reviewed changes

Copilot reviewed 5 out of 8 changed files in this pull request and generated 3 comments.

Show a summary per file
File Description
src/components/PressThisEditor.js Detects standalone mode to adjust redirect behavior.
src/components/Header.js Adds standalone-only menu items and standalone detection.
press-this-plugin.php Registers a new REST route and returns the manifest JSON.
includes/class-press-this-assets.php Syncs script dependencies by adding wp-keyboard-shortcuts.
class-wp-press-this-plugin.php Injects mobile web app meta tags and manifest/icon links.

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

Comment thread press-this-plugin.php Outdated
Comment thread press-this-plugin.php
Comment thread class-wp-press-this-plugin.php Outdated
Set Content-Type to application/manifest+json per W3C spec. Localize
the app name in both the manifest endpoint and the apple-mobile-web-app-title
meta tag for translation support.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 5 out of 8 changed files in this pull request and generated 4 comments.


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

Comment thread src/components/PressThisEditor.js Outdated
Comment thread src/components/Header.js Outdated
Comment thread src/components/Header.js Outdated
Comment thread src/components/PressThisEditor.js
@kraftbj kraftbj added this to the 2.1.0 milestone Mar 16, 2026
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 7 out of 10 changed files in this pull request and generated 3 comments.


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

Comment thread press-this-plugin.php
Comment thread src/components/Header.js Outdated
Comment thread src/components/PressThisEditor.js Outdated
kraftbj added 3 commits April 2, 2026 07:48
Replace string-matching tests (reading source with fs.readFileSync and
checking for substrings) with proper behavioral tests that import
isStandaloneMode() and assert return values against mocked browser APIs.

Covers: matchMedia standalone match, navigator.standalone (iOS Safari),
neither condition met, and matchMedia unavailable (graceful degradation).
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 8 out of 11 changed files in this pull request and generated 3 comments.


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

Comment thread tests/utils/standalone.test.js
Comment thread src/components/Header.js
Comment thread press-this-plugin.php
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 8 out of 11 changed files in this pull request and generated 1 comment.


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

Comment thread press-this-plugin.php
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 9 out of 12 changed files in this pull request and generated 1 comment.


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

Comment thread tests/php/test-rest-endpoints.php
@kraftbj kraftbj added this pull request to the merge queue Apr 3, 2026
@github-merge-queue github-merge-queue bot removed this pull request from the merge queue due to a conflict with the base branch Apr 3, 2026
Resolve conflicts in Header.js: keep both standalone mode
(mobile-web-app) and scheduling (trunk) features, with standalone
menu items in their own MenuGroup inside the dropdown.
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 8 out of 11 changed files in this pull request and generated no new comments.

Comments suppressed due to low confidence (1)

tests/php/test-rest-endpoints.php:116

  • Since this test suite now includes a GET-only /press-this/v1/manifest route, the later test docblock Test that all routes use POST method. is no longer accurate (it only checks the POST routes list). Consider updating that docblock (and/or the test name) to clarify it asserts POST methods only for the POST routes, to avoid confusion when adding future GET routes.
	 * Test that all 5 REST routes are registered.
	 */
	public function test_routes_are_registered() {
		do_action( 'rest_api_init' );

		$server = rest_get_server();
		$routes = $server->get_routes();

		$this->assertArrayHasKey( '/press-this/v1/manifest', $routes );
		$this->assertArrayHasKey( '/press-this/v1/scrape', $routes );
		$this->assertArrayHasKey( '/press-this/v1/save', $routes );
		$this->assertArrayHasKey( '/press-this/v1/sideload', $routes );
		$this->assertArrayHasKey( '/press-this/v1/validate-embeds', $routes );
	}

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

Adds missing tab level to match sibling MenuGroup indentation,
fixing prettier/prettier lint errors.
@kraftbj kraftbj added this pull request to the merge queue Apr 3, 2026
Merged via the queue into trunk with commit 32930f7 Apr 3, 2026
6 checks passed
@kraftbj kraftbj deleted the mobile-web-app branch April 3, 2026 16:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants