如何在浏览器中实现文件变更自动监听？含指定工作流需求

Hey there! Let's walk through how to solve both your automated file monitoring needs and the Chrome caching problem for your workflow. The key here is leveraging modern browser APIs while working within security constraints.

First: Understand Browser Security Constraints #

Browsers operate in a sandbox, so you can't directly access or monitor local files without explicit user permission. The File System Access API is the ideal tool here—it's supported in Chrome, Edge, and other Chromium-based browsers, and it lets you read/write files and listen for changes natively.

Step 1: Implement Automated File Change Listening #

Here's how to set up automatic monitoring once the user selects a file:

1. Get User Authorization & Save the File Handle #

First, you need to let the user select a file and save the file handle so you can access it later (no repeated user clicks required). You can store the handle in localStorage (after serialization) or keep it in a global variable.

let fileHandle;
const abortController = new AbortController();

async function openFile() {
  // Ask user to select a file and request read/write permission
  [fileHandle] = await window.showOpenFilePicker({
    types: [{ description: 'Text Files', accept: { 'text/plain': ['.txt'] } }],
    mode: 'readwrite'
  });

  // Optional: Persist permission so user doesn't re-select next time
  const permission = await fileHandle.requestPermission({ mode: 'readwrite' });
  if (permission === 'granted') {
    const serializedHandle = await fileHandle.toString();
    localStorage.setItem('savedFileHandle', serializedHandle);
  }

  // Start monitoring the file immediately
  await startWatchingFile();
}

2. Set Up Automatic Change Detection #

Use the file handle's watch() method to listen for modifications made by your local app. This callback triggers automatically whenever the file changes—no manual button clicks needed.

async function startWatchingFile() {
  if (!fileHandle) return;

  const watcher = await fileHandle.watch({ signal: abortController.signal });
  
  watcher.onchange = async () => {
    console.log('File updated by local app! Fetching latest content...');
    // Read fresh content (we'll fix caching next)
    const updatedFile = await fileHandle.getFile({ cache: 'reload' });
    const content = await updatedFile.text();
    
    // Update your web app's UI or logic with the new content here
    document.getElementById('file-content-display').textContent = content;
  };
}

3. Automate Web App File Writes #

When your web app needs to write to the file, use the file handle's createWritable() method—no extra user interaction is needed once permission is granted:

async function writeToFile(content) {
  if (!fileHandle) return;

  const writable = await fileHandle.createWritable();
  await writable.write(content);
  await writable.close();
  console.log('Web app wrote to file successfully');
}

Step 2: Fix Chrome's File Caching Issue #

Chrome caches file content retrieved via getFile() by default, which means you might get stale data even after the local app modifies the file. The fix is straightforward: add the cache: 'reload' option when calling getFile()—this forces the browser to fetch the latest version directly from disk instead of using cached data.

We already included this in the onchange callback, but let's highlight it clearly:

// Bypass cache to get fresh file content every time
const updatedFile = await fileHandle.getFile({ cache: 'reload' });

For extra validation, you can also track the lastModified timestamp to confirm the file has actually changed:

let lastModifiedTimestamp = 0;

watcher.onchange = async () => {
  const updatedFile = await fileHandle.getFile({ cache: 'reload' });
  if (updatedFile.lastModified > lastModifiedTimestamp) {
    lastModifiedTimestamp = updatedFile.lastModified;
    const content = await updatedFile.text();
    // Update app content only when a real change occurs
  }
};

Important Notes & Limitations #

• Browser Support: The File System Access API works in Chrome 86+, Edge 86+, and Brave. For other browsers, you'll need a fallback (like manual file re-uploads).
• Permission Expiry: Browsers might revoke permissions after inactivity, so always check access before performing operations.
• Stop Monitoring: Use the AbortController to halt monitoring when needed (e.g., when the user closes the tab):

  function stopWatchingFile() {
    abortController.abort();
  }
  

Final Automated Workflow #

Your process now runs without manual triggers:

1. User clicks once to select a file and grant permission.
2. Web app writes to the file via writeToFile().
3. Local app modifies the file—watcher.onchange triggers automatically.
4. Web app reads fresh content using getFile({ cache: 'reload' }) and updates itself.
5. Repeat step 2 as needed, no extra user input required!

内容的提问来源于stack exchange，提问作者Mascarpone