feat: add web browser support for Cloudflare Pages deployment

mojtabakarimi · mojtabakarimi · commit 4157e066ded1 · 2026-03-19T13:02:15.000+01:00
- Add web API fallbacks in platform.js (file open/save via browser dialogs,
  localStorage for session/preferences, download-based file saving)
- Remove Tauri-only guards from loader.js and saver.js so PDF open/save
  works in browser
- Hide window control buttons (min/max/close) in browser mode
- Add _redirects file for Cloudflare Pages SPA routing
- Bump version to 1.33.0
diff --git a/open-pdf-studio/js/core/platform.js b/open-pdf-studio/js/core/platform.js
@@ -2,8 +2,14 @@
  * Tauri API wrapper module
  * Provides a unified interface for Tauri 2.x APIs
  * Uses the global __TAURI__ object instead of ES module imports
+ * Falls back to Web APIs when running in a browser (non-Tauri)
  */
 
+// ── Web file cache ──────────────────────────────────────────────────────────
+// When running in a browser, files opened via <input type="file"> are stored
+// here so that readBinaryFile() can retrieve them by name.
+const _webFileCache = new Map(); // filename -> Uint8Array
+
 // Extract a display-friendly file name from a path or content:// URI
 export function extractFileName(pathOrUri) {
   if (!pathOrUri) return 'Document';
@@ -95,47 +101,79 @@ export async function closeWindow() {
 }
 
 // File dialogs - using Tauri commands since plugin APIs may not be globally available
-export async function openFileDialog() {
-  if (!isTauri()) return null;
-
-  // Try using the dialog plugin via window.__TAURI__.dialog
-  if (window.__TAURI__.dialog) {
-    try {
-      const result = await window.__TAURI__.dialog.open({
-        multiple: false,
-        filters: [{ name: 'PDF Files', extensions: ['pdf'] }]
-      });
-      return result;
-    } catch (e) {
-      console.error('Dialog plugin error:', e);
+export async function openFileDialog(extensions) {
+  if (isTauri()) {
+    const filters = extensions
+      ? [{ name: 'Files', extensions }]
+      : [{ name: 'PDF Files', extensions: ['pdf'] }];
+
+    // Try using the dialog plugin via window.__TAURI__.dialog
+    if (window.__TAURI__.dialog) {
+      try {
+        const result = await window.__TAURI__.dialog.open({
+          multiple: false,
+          filters
+        });
+        return result;
+      } catch (e) {
+        console.error('Dialog plugin error:', e);
+      }
     }
+
+    // Fallback: use invoke to call a custom command
+    return await invoke('open_file_dialog');
   }
 
-  // Fallback: use invoke to call a custom command
-  return await invoke('open_file_dialog');
+  // Web fallback: use HTML <input type="file">
+  const accept = extensions
+    ? extensions.map(e => '.' + e).join(',')
+    : '.pdf';
+  return new Promise((resolve) => {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = accept;
+    input.style.display = 'none';
+    input.addEventListener('change', async () => {
+      const file = input.files?.[0];
+      document.body.removeChild(input);
+      if (!file) { resolve(null); return; }
+      const data = new Uint8Array(await file.arrayBuffer());
+      _webFileCache.set(file.name, data);
+      resolve(file.name);
+    });
+    input.addEventListener('cancel', () => {
+      document.body.removeChild(input);
+      resolve(null);
+    });
+    document.body.appendChild(input);
+    input.click();
+  });
 }
 
 export async function saveFileDialog(defaultPath, filters) {
-  if (!isTauri()) return null;
-
-  if (!filters) {
-    filters = [{ name: 'PDF Files', extensions: ['pdf'] }];
-  }
+  if (isTauri()) {
+    if (!filters) {
+      filters = [{ name: 'PDF Files', extensions: ['pdf'] }];
+    }
 
-  // Try using the dialog plugin
-  if (window.__TAURI__.dialog) {
-    try {
-      const result = await window.__TAURI__.dialog.save({
-        defaultPath: defaultPath,
-        filters: filters
-      });
-      return result;
-    } catch (e) {
-      console.error('Dialog plugin error:', e);
+    // Try using the dialog plugin
+    if (window.__TAURI__.dialog) {
+      try {
+        const result = await window.__TAURI__.dialog.save({
+          defaultPath: defaultPath,
+          filters: filters
+        });
+        return result;
+      } catch (e) {
+        console.error('Dialog plugin error:', e);
+      }
     }
+
+    return null;
   }
 
-  return null;
+  // Web fallback: return the suggested filename (writeBinaryFile will trigger download)
+  return defaultPath || 'document.pdf';
 }
 
 // Folder picker dialog
@@ -160,7 +198,12 @@ export async function openFolderDialog(title) {
 
 // File system operations
 export async function readBinaryFile(path) {
-  if (!isTauri()) return null;
+  // Web fallback: check the in-memory file cache first
+  if (!isTauri()) {
+    const cached = _webFileCache.get(path);
+    if (cached) return cached;
+    return null;
+  }
 
   // Use the fs plugin directly
   if (window.__TAURI__.fs) {
@@ -171,7 +214,26 @@ export async function readBinaryFile(path) {
 }
 
 export async function writeBinaryFile(path, data) {
-  if (!isTauri()) return false;
+  if (!isTauri()) {
+    // Web fallback: trigger a browser download
+    const fileName = path.replace(/^.*[\\/]/, '') || 'download';
+    const ext = fileName.split('.').pop()?.toLowerCase();
+    const mimeMap = {
+      pdf: 'application/pdf', png: 'image/png', jpg: 'image/jpeg',
+      jpeg: 'image/jpeg', csv: 'text/csv', xfdf: 'application/xml',
+      xml: 'application/xml',
+    };
+    const blob = new Blob([data], { type: mimeMap[ext] || 'application/octet-stream' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = fileName;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+    return true;
+  }
 
   // Use the fs plugin directly - no fallback to slow base64 method
   if (window.__TAURI__.fs) {
@@ -322,7 +384,9 @@ export async function buildUserAgent() {
 
 // Get app version from Tauri config
 export async function getAppVersion() {
-  if (!isTauri()) return null;
+  if (!isTauri()) {
+    return typeof __APP_VERSION__ !== 'undefined' ? __APP_VERSION__ : null;
+  }
   try {
     return await window.__TAURI__.app.getVersion();
   } catch {
@@ -346,10 +410,20 @@ export async function getOpenedFiles() {
 
 // Session management
 export async function saveSession(data) {
+  if (!isTauri()) {
+    try { localStorage.setItem('pdfStudioSession', JSON.stringify(data)); } catch { /* ignore */ }
+    return;
+  }
   return await invoke('save_session', { data: JSON.stringify(data) });
 }
 
 export async function loadSession() {
+  if (!isTauri()) {
+    try {
+      const s = localStorage.getItem('pdfStudioSession');
+      return s ? JSON.parse(s) : null;
+    } catch { return null; }
+  }
   const result = await invoke('load_session');
   if (result) {
     try {
diff --git a/open-pdf-studio/js/main.js b/open-pdf-studio/js/main.js
@@ -315,7 +315,6 @@ function setupSessionSaveOnClose() {
   }
 
   window.addEventListener('beforeunload', async () => {
-    if (!isTauri()) return;
     await saveSessionData();
   });
 }
diff --git a/open-pdf-studio/js/pdf/loader.js b/open-pdf-studio/js/pdf/loader.js
@@ -117,26 +117,27 @@ export async function loadPDF(filePath, docIndex, preloadedData = null) {
       // Use pre-loaded bytes (e.g. from virtual printer capture, or browser file input)
       typedArray = preloadedData instanceof Uint8Array ? preloadedData : new Uint8Array(preloadedData);
       originalBytesCache.set(filePath, typedArray.slice());
-    } else if (isTauri()) {
-      // Lock the file to prevent other apps from writing while we have it open
-      // (skip on Android — content:// URIs don't support filesystem locking)
-      const { isMobile } = await import('../core/platform.js');
-      if (isClosed()) return;
-      if (!isMobile()) {
-        await lockFile(filePath);
+    } else {
+      if (isTauri()) {
+        // Lock the file to prevent other apps from writing while we have it open
+        // (skip on Android — content:// URIs don't support filesystem locking)
+        const { isMobile } = await import('../core/platform.js');
         if (isClosed()) return;
+        if (!isMobile()) {
+          await lockFile(filePath);
+          if (isClosed()) return;
+        }
       }
 
-      // Read file using Tauri fs plugin (handles content:// URIs on Android)
+      // Read file using Tauri fs plugin or web file cache
       const data = await readBinaryFile(filePath);
       if (isClosed()) return;
+      if (!data) throw new Error('File system access not available');
       typedArray = new Uint8Array(data);
 
       // Cache a copy of original bytes for saver (pdf.js transfers the buffer
       // to a web worker, which detaches the original Uint8Array making it length 0)
       originalBytesCache.set(filePath, typedArray.slice());
-    } else {
-      throw new Error('File system access not available');
     }
 
     // Load PDF using pdf.js (this transfers the buffer to a worker)
@@ -256,11 +257,6 @@ export async function loadPDF(filePath, docIndex, preloadedData = null) {
 
 // Open file dialog and load PDF
 export async function openPDFFile() {
-  if (!isTauri()) {
-    console.warn('File dialogs require Tauri environment');
-    return;
-  }
-
   try {
     const result = await openFileDialog();
     if (result) {
diff --git a/open-pdf-studio/js/pdf/saver.js b/open-pdf-studio/js/pdf/saver.js
@@ -18,11 +18,6 @@ export async function savePDF(saveAsPath = null) {
     return await savePDFAs();
   }
 
-  if (!isTauri()) {
-    showMessage(i18next.t('saveRequiresTauri'));
-    return false;
-  }
-
   try {
     showLoading('Saving PDF...');
 
@@ -1662,11 +1657,6 @@ export async function savePDFAs() {
     return false;
   }
 
-  if (!isTauri()) {
-    showMessage(i18next.t('saveRequiresTauri'));
-    return false;
-  }
-
   // Use current path as default, or the untitled file name
   const doc = getActiveDocument();
   const defaultPath = state.currentPdfPath || (doc ? doc.fileName : 'Untitled.pdf');
diff --git a/open-pdf-studio/js/solid/components/TitleBar.jsx b/open-pdf-studio/js/solid/components/TitleBar.jsx
@@ -143,24 +143,26 @@ export default function TitleBar() {
         <button class="send-feedback-btn" onClick={() => openDialog('feedback')}>
           {tCommon('sendFeedback')}
         </button>
-        <button class="window-btn" title={tCommon('minimize')} disabled={hasDialogs()}
-          onClick={() => import('../../core/platform.js').then(m => m.minimizeWindow())}>
-          <svg width="10" height="1" viewBox="0 0 10 1"><rect width="10" height="1" fill="currentColor"/></svg>
-        </button>
-        <button class="window-btn" title={isMaximized() ? tCommon('restore') : tCommon('maximize')} disabled={hasDialogs()}
-          onClick={() => import('../../core/platform.js').then(m => m.maximizeWindow())}>
-          {isMaximized() ? (
-            <svg width="10" height="10" viewBox="2 2 12 12" fill="currentColor">
-              <path d="M5.08496 4C5.29088 3.4174 5.8465 3 6.49961 3H9.99961C11.6565 3 12.9996 4.34315 12.9996 6V9.5C12.9996 10.1531 12.5822 10.7087 11.9996 10.9146V6C11.9996 4.89543 11.1042 4 9.99961 4H5.08496ZM4.5 5H9.5C10.3284 5 11 5.67157 11 6.5V11.5C11 12.3284 10.3284 13 9.5 13H4.5C3.67157 13 3 12.3284 3 11.5V6.5C3 5.67157 3.67157 5 4.5 5ZM4.5 6C4.22386 6 4 6.22386 4 6.5V11.5C4 11.7761 4.22386 12 4.5 12H9.5C9.77614 12 10 11.7761 10 11.5V6.5C10 6.22386 9.77614 6 9.5 6H4.5Z"/>
-            </svg>
-          ) : (
-            <svg width="10" height="10" viewBox="0 0 10 10"><rect x="0.5" y="0.5" width="9" height="9" fill="none" stroke="currentColor" stroke-width="1.2"/></svg>
-          )}
-        </button>
-        <button class="window-btn window-btn-close" title={tCommon('close')} disabled={hasDialogs()}
-          onClick={handleClose}>
-          <svg width="10" height="10" viewBox="0 0 10 10"><line x1="0" y1="0" x2="10" y2="10" stroke="currentColor" stroke-width="1.2"/><line x1="10" y1="0" x2="0" y2="10" stroke="currentColor" stroke-width="1.2"/></svg>
-        </button>
+        {isTauri() && <>
+          <button class="window-btn" title={tCommon('minimize')} disabled={hasDialogs()}
+            onClick={() => import('../../core/platform.js').then(m => m.minimizeWindow())}>
+            <svg width="10" height="1" viewBox="0 0 10 1"><rect width="10" height="1" fill="currentColor"/></svg>
+          </button>
+          <button class="window-btn" title={isMaximized() ? tCommon('restore') : tCommon('maximize')} disabled={hasDialogs()}
+            onClick={() => import('../../core/platform.js').then(m => m.maximizeWindow())}>
+            {isMaximized() ? (
+              <svg width="10" height="10" viewBox="2 2 12 12" fill="currentColor">
+                <path d="M5.08496 4C5.29088 3.4174 5.8465 3 6.49961 3H9.99961C11.6565 3 12.9996 4.34315 12.9996 6V9.5C12.9996 10.1531 12.5822 10.7087 11.9996 10.9146V6C11.9996 4.89543 11.1042 4 9.99961 4H5.08496ZM4.5 5H9.5C10.3284 5 11 5.67157 11 6.5V11.5C11 12.3284 10.3284 13 9.5 13H4.5C3.67157 13 3 12.3284 3 11.5V6.5C3 5.67157 3.67157 5 4.5 5ZM4.5 6C4.22386 6 4 6.22386 4 6.5V11.5C4 11.7761 4.22386 12 4.5 12H9.5C9.77614 12 10 11.7761 10 11.5V6.5C10 6.22386 9.77614 6 9.5 6H4.5Z"/>
+              </svg>
+            ) : (
+              <svg width="10" height="10" viewBox="0 0 10 10"><rect x="0.5" y="0.5" width="9" height="9" fill="none" stroke="currentColor" stroke-width="1.2"/></svg>
+            )}
+          </button>
+          <button class="window-btn window-btn-close" title={tCommon('close')} disabled={hasDialogs()}
+            onClick={handleClose}>
+            <svg width="10" height="10" viewBox="0 0 10 10"><line x1="0" y1="0" x2="10" y2="10" stroke="currentColor" stroke-width="1.2"/><line x1="10" y1="0" x2="0" y2="10" stroke="currentColor" stroke-width="1.2"/></svg>
+          </button>
+        </>}
       </div>
     </div>
   );
diff --git a/open-pdf-studio/package.json b/open-pdf-studio/package.json
@@ -1,6 +1,6 @@
 {
   "name": "open-pdf-studio",
-  "version": "1.32.0",
+  "version": "1.33.0",
   "description": "A free, open-source PDF annotation editor built with Tauri",
   "scripts": {
     "dev": "vite",
diff --git a/open-pdf-studio/public/_redirects b/open-pdf-studio/public/_redirects
@@ -0,0 +1 @@
+/* /index.html 200
diff --git a/open-pdf-studio/src-tauri/Cargo.toml b/open-pdf-studio/src-tauri/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "open-pdf-studio"
-version = "1.32.0"
+version = "1.33.0"
 description = "A free, open-source PDF annotation editor"
 authors = ["OpenAEC Foundation"]
 license = "MIT"
diff --git a/open-pdf-studio/src-tauri/tauri.conf.json b/open-pdf-studio/src-tauri/tauri.conf.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "Open PDF Studio",
-  "version": "1.32.0",
+  "version": "1.33.0",
   "identifier": "org.openaec.openpdfstudio",
   "build": {
     "frontendDist": "../dist",

Original file line number	Diff line number	Diff line change
`@@ -315,7 +315,6 @@ function setupSessionSaveOnClose() {`
`315`	`315`	`}`
`316`	`316`
`317`	`317`	`window.addEventListener('beforeunload', async () => {`
`318`		`- if (!isTauri()) return;`
`319`	`318`	`await saveSessionData();`
`320`	`319`	`});`
`321`	`320`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "open-pdf-studio",`
`3`		`- "version": "1.32.0",`
	`3`	`+ "version": "1.33.0",`
`4`	`4`	`"description": "A free, open-source PDF annotation editor built with Tauri",`
`5`	`5`	`"scripts": {`
`6`	`6`	`"dev": "vite",`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"$schema": "https://schema.tauri.app/config/2",`
`3`	`3`	`"productName": "Open PDF Studio",`
`4`		`- "version": "1.32.0",`
	`4`	`+ "version": "1.33.0",`
`5`	`5`	`"identifier": "org.openaec.openpdfstudio",`
`6`	`6`	`"build": {`
`7`	`7`	`"frontendDist": "../dist",`