enhancement: Extend Share Target hook to support POST method and file sharing

[kevalyq]

Context

The current useShareTarget() hook (implemented in PR #100) uses a simplified GET-based approach that reads shared data from URL parameters. However, the PWA manifest configuration in vite.config.ts is already set up to use POST method with multipart/form-data, which supports file sharing.

Current Implementation

Hook: src/hooks/useShareTarget.ts

// Current: GET method, URL parameters only
if (url.pathname === "/share" && url.searchParams.size > 0) {
  const data: SharedData = {
    title: url.searchParams.get("title") || undefined,
    text: url.searchParams.get("text") || undefined,
    url: url.searchParams.get("url") || undefined,
  };
}

Manifest: vite.config.ts (lines 112-127)

share_target: {
  action: "/share",
  method: "POST",
  enctype: "multipart/form-data",
  params: {
    title: "title",
    text: "text",
    url: "url",
    files: [
      {
        name: "files",
        accept: ["image/*", "application/pdf", ".doc", ".docx"],
      },
    ],
  },
}

Gap

The hook doesn't handle:

1. ❌ POST request data (currently only reads URL params)
2. ❌ FormData parsing
3. ❌ File handling from files parameter
4. ❌ Service Worker integration for file caching

Proposed Enhancement

Option 1: Client-Side FormData Handling

Create a dedicated /share route component that:

1. Reads FormData from POST request on initial load
2. Extracts text fields (title, text, url) and files
3. Passes data to the hook or context
4. Handles file preview/upload

Option 2: Service Worker Integration

Enhance the service worker to:

1. Intercept POST requests to /share
2. Cache files in IndexedDB
3. Forward metadata to the client
4. Allow client to retrieve cached files

Option 3: Hybrid Approach (Recommended)

• Use GET for text-only sharing (current implementation)
• Add POST handler for file sharing in a separate route component
• Keep both methods working in parallel
• Update manifest to support both:

share_target: [
  {
    action: "/share/text",
    method: "GET",
    enctype: "application/x-www-form-urlencoded",
    params: { title: "title", text: "text", url: "url" }
  },
  {
    action: "/share/files",
    method: "POST",
    enctype: "multipart/form-data",
    params: { title: "title", text: "text", url: "url", files: [...] }
  }
]

Tasks

• Research best practices for POST-based Share Target API
• Decide on implementation approach (Option 1, 2, or 3)
• Create /share route component for handling POST requests
• Update useShareTarget hook or create new useShareTargetFiles hook
• Add FormData parsing logic
• Implement file handling (preview, validation, upload)
• Add Service Worker support for file caching (if needed)
• Update tests to cover POST method and file handling
• Update PWA_PHASE3_TESTING.md with file sharing test scenarios
• Add examples to documentation

Benefits

• 🎯 Full utilization of existing manifest configuration
• 📁 Support for sharing files (images, PDFs, documents)
• 🔗 Richer integration with OS share dialogs
• 💪 More powerful PWA capabilities

References

• Web Share Target API - MDN
• Receiving shared data - web.dev
• Current PR: feat: Implement PWA Phase 3 features (Push Notifications, Share Target API, Offline Analytics) #100
• Related Issue: Phase 3: Advanced PWA Features #67 (PWA Phase 3)

Priority

Medium - The current GET-based implementation works for text sharing. File support is a nice-to-have enhancement that can be added incrementally.

Labels

enhancement, pwa, good-first-issue

[github-actions]

✅ This issue has been added to the SecPal Feature Roadmap with status: 💡 Ideas

New idea - needs discussion and evaluation

Status Flow:
💡 Ideas → 💬 Discussion → 📥 Backlog → 📋 Planned → 🚧 In Progress → 👀 In Review → ✅ Done

Note: Ideas that won't be implemented should be moved to 🚫 Won't Do with a reason.