如何通过JavaScript强制Android端PWA返回其start_url？

针对Android端PWA与浏览器、其他PWA共享存储空间的问题，可通过以下纯JS方案实现PWA的唯一识别，从而安全存储并读取专属初始URL：

• 基于当前PWA的起始URL生成唯一存储键前缀
  每个用户的PWA都有专属的start_url，直接利用当前页面的完整URL生成唯一标识，比如通过Base64编码处理得到短前缀，再作为localStorage键的一部分：

  // 生成唯一键前缀
  const urlHash = btoa(window.location.href).replace(/[+/=]/g, '').slice(0, 12);
  const initialUrlKey = `${urlHash}_initialUrl`;
  
  // 存储初始URL
  localStorage.setItem(initialUrlKey, window.location.href);
  
  // 读取初始URL
  const initialUrl = localStorage.getItem(initialUrlKey);
  

  由于每个PWA的start_url唯一，生成的键前缀也不会重复，避免存储冲突。

• 使用专属IndexedDB数据库隔离存储
  为每个PWA创建独立的IndexedDB数据库，数据库名称基于当前PWA的start_url生成，确保不同PWA的存储完全隔离：

  // 生成唯一数据库名
  const dbName = 'pwa_initial_' + encodeURIComponent(window.location.href).replace(/[^a-z0-9]/gi, '_');
  
  // 打开专属数据库并存储初始URL
  const request = indexedDB.open(dbName, 1);
  request.onupgradeneeded = (e) => {
    const db = e.target.result;
    db.createObjectStore('config', { keyPath: 'id' });
  };
  request.onsuccess = (e) => {
    const db = e.target.result;
    const tx = db.transaction('config', 'readwrite');
    tx.objectStore('config').put({ id: 'initialUrl', value: window.location.href });
    tx.complete;
  };
  
  // 读取初始URL
  const readRequest = indexedDB.open(dbName);
  readRequest.onsuccess = (e) => {
    const db = e.target.result;
    const tx = db.transaction('config', 'readonly');
    const getRequest = tx.objectStore('config').get('initialUrl');
    getRequest.onsuccess = () => {
      const initialUrl = getRequest.result?.value;
      // 使用初始URL跳转
    };
  };
  

• 借助Service Worker注册范围做唯一标识
  每个PWA的Service Worker注册范围与start_url绑定，可通过注册对象的scope属性生成唯一存储键：

  async function saveInitialUrl() {
    const registration = await navigator.serviceWorker.getRegistration();
    if (registration) {
      const key = `initialUrl_${registration.scope}`;
      localStorage.setItem(key, window.location.href);
    }
  }
  
  async function getInitialUrl() {
    const registration = await navigator.serviceWorker.getRegistration();
    if (registration) {
      const key = `initialUrl_${registration.scope}`;
      return localStorage.getItem(key);
    }
    return null;
  }
  

  这种方式依赖Service Worker的正确注册，适合已启用Service Worker的PWA场景。

额外注意：读取初始URL后，建议验证其域名和路径是否与当前页面匹配，防止极端情况下的存储串扰。

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