同一网站下多独立PWA能否共存并添加至设备主屏？

Absolutely! You can have multiple independent Progressive Web Apps living in separate subfolders of the same domain—no problem at all. The key is to configure each PWA with proper isolation settings so browsers recognize them as distinct apps. Here’s how to pull it off:

1. Configure Unique Manifest Files #

Each manifest.json needs to have settings that clearly distinguish it from the other:

• Unique identifiers: Set distinct name and short_name values (e.g., "Client One Portal" vs "Other Client Dashboard"). This helps users tell them apart on their home screens.
• Locked-down scope: Add a scope field set to the subfolder path for each PWA. For ClientOne, that would be "scope": "/ClientOne/". This restricts the PWA’s service worker and navigation to only that subfolder, preventing cross-PWA interference.
• Correct start URL: Make sure start_url points directly to the PWA’s entry page relative to the domain, like "start_url": "/ClientOne/ClientOnePWA.html". Browsers use this to map the app to its launch point.

2. Register Service Workers with Explicit Scopes #

When registering each service worker in your entry HTML file, explicitly define its scope to match the subfolder. For example, in ClientOnePWA.html:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/ClientOne/serviceworker.js', {
      scope: '/ClientOne/' // Critical: locks this worker to the subfolder
    });
  });
}

Do the same for OtherClientPWA.html, swapping in the /OtherClient/ path. Browsers treat service workers with different scopes as separate entities, so they won’t conflict.

3. Isolate Caching Strategies #

To avoid cache overlap, use unique cache names in each service worker’s caching logic. For ClientOne’s service worker:

const CACHE_NAME = 'client-one-cache-v1';
// Cache logic using this unique name

And for OtherClient’s:

const CACHE_NAME = 'other-client-cache-v2';
// Separate cache logic here

This ensures each PWA stores its assets and data in its own cache storage, with no cross-contamination.

4. Verify Isolation in DevTools #

Once set up, use your browser’s DevTools (under the Application tab) to confirm:

• Each PWA appears as a separate entry in the Progressive Web Apps section.
• Service workers are registered with the correct scopes.
• Caches are named uniquely and contain only the assets for their respective PWA.

When users add each PWA to their home screen, browsers will treat them as fully independent apps—they’ll launch in separate contexts, have their own icons, and won’t interfere with one another.

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