PWA Signature

A lightweight Progressive Web App for phones and small devices.
Sign PDFs and images with your signature, date-time stamp them, add text annotations, and save with identifiable filenames.

---

What It Does

1. Upload a PDF or image file.
2. Place your signature (PNG with transparent background) anywhere on the document — tap to place, drag to adjust.
3. Add text annotations with the "Add Text" button — type anywhere on the document.
4. Pan and zoom with two fingers to navigate large documents.
5. Add a date-time stamp automatically.
6. Save the signed file with a filename that includes your initials or name for easy differentiation.

---

Version

v0.04 (2026-05-07)

• In-app debug console for diagnostics (visible by default)
• Download Ready fallback modal with real clickable link
• Comprehensive error handling and logging on all export paths
• Fixed triggerDownload reliability across browsers

v0.03 (2026-05-07)

• Settings page replaces About modal with 3 tabs: About, Signatures, Initials
• Fix: PNG upload can now be re-selected (clears input before click)
• Signature management: view active, browse stored, delete from Settings
• Initials management: view and delete stored presets from Settings

v0.02 (2026-05-07)

• Store multiple signatures on device with thumbnail picker
• Store multiple initials presets as quick-select chips
• All signature and initials data persisted locally via IndexedDB

Current version: v0.04 — displayed in the app header. Tap the Settings icon to view the full changelog.

Live Demo

https://pages.gi7b.org/cgg/pwa-signature/

---

Goals

Phase 1 -- Core Signing (MVP) ✅

• File upload (PDF, PNG, JPG, WEBP)
• Signature overlay (tap to place, drag to move)
• Date-time stamp overlay (auto-generated, positionable)
• File export with custom naming pattern: DocumentName_YYYYMMDD_HHMM_Initials.pdf
• PWA installability (manifest + service worker)
• Touch-optimized UI for phones and tablets

Phase 1b -- Document Navigation ✅

• Pan -- two-finger drag to move around the document
• Zoom -- pinch to zoom in/out, plus +/- buttons for desktop
• Fit to screen -- auto-fit document on load and on demand
• Text overlays -- tap "Add Text" to create editable text fields anywhere on the document

Phase 1c -- Reliability & Diagnostics ✅

• PNG re-upload fix (clear input value)
• Parse-time SyntaxError fix (avoid await in forEach callbacks)
• Download fallback modal with real anchor link
• In-app debug console for mobile diagnostics

Phase 2 -- User Experience

• Draw signature directly on screen (canvas)
• Save signature PNG for reuse
• Multiple signature slots per document
• Page navigation for multi-page PDFs
• Preview before export
• Offline support (cache assets)

Phase 3 -- Authentication & Trust (Advanced)

• Device ID binding -- each signing session tagged with a unique device identifier
• Signing keys -- cryptographic key pair generated per device
• Signature metadata embedded in exported file (signer name, device ID, timestamp, key fingerprint)
• Verification endpoint -- third parties can verify a signature's authenticity
• Audit log -- tamper-resistant record of who signed what, when, and from which device

---

How to Use

Basic Signing

1. Open the app on your phone or desktop.
2. Upload a document (PDF or image).
3. Upload your signature as a transparent PNG.
4. Tap once on the document to place your signature.
5. Drag the signature to adjust position. Use the Size slider to resize.
6. Enter your Initials.
7. Tap Download Signed.

Text Annotations

1. Tap Aa Add Text to create a text field.
2. Type directly into the blue-bordered box.
3. Drag the blue handle (⋮⋮) to reposition the text.
4. Tap ✕ Texts to clear all text annotations.

Pan & Zoom

Gesture	Action
Two-finger drag	Pan around the document
Pinch	Zoom in/out
Single tap	Place signature
+ / − buttons	Zoom (desktop fallback)
Fit button	Reset zoom to fit screen

---

Tech Stack

Layer	Technology
Frontend	Vanilla JS (single inlined HTML file)
PWA	Web App Manifest + Service Worker (blob URL)
PDF rendering	pdf.js
PDF modification	PDF-Lib.js
Image handling	HTML5 Canvas
Hosting	Forgejo Pages (static)

---

File Naming Convention

{OriginalName}_{YYYYMMDD}_{HHMM}_{Initials}.pdf

Example:

Contract_20260507_1549_JAQ.pdf

---

Security Model (Phase 3)

+-------------+     +-------------+     +-------------+
|   Device    |---->|  Signing    |---->|  Exported   |
|   Key Pair  |     |  Request    |     |  Document   |
+-------------+     +-------------+     +-------------+
       |                   |                   |
       v                   v                   v
  Device ID          Timestamp          Signature
  (hardware-bound)   (UTC)              Metadata Block

• Device Key: Generated once per device, stored in IndexedDB (non-exportable)
• Signing Key: Used to sign the document hash
• Metadata: Embedded as JSON in PDF annotations or image EXIF

---

Known Issues & RCA

See RCA.md for a running log of problems, root causes, and lessons learned.

---

License

MIT -- Comfac Global Group