对于 PWA,获取每个设备设置的最简单方法是什么(如读取 .ini 文件或环境变量)?

For PWA, what is the easiest way to get per-device settings (as in reading a .ini file or environment variables)?

对于 PWA,获取每个设备设置的最简单方法是什么(如读取 .ini 文件或环境变量)?

我正在为基于安卓的平板电脑(仅限)制作一个非常简单的公司内部反应 PWA。我只想存储几个设置(使用设备的房间号和设备 ID)并在启动时读取这些设置。 我最近在 Windows 的经验,所以我正在想象一个文本文件,我可以将其放置在每个平板电脑上,并带有设置。这对我们的 PWA 有意义吗? 还是有 better/easier 方法来进行应用程序设置? 谢谢。

答案取决于数据最初是如何配置的,以及您需要什么样的保证才能“防篡改”。

假设您可以在 Web 应用程序的初始启动期间提供信息,并且您可以使用通过浏览器的开发人员工具公开的存储(即您的威胁模型不包括使用 DevTools 的有动机的用户 erase/modify 数据),一个简单的方法是 a) 使用缓存存储 API 将数据 read/write 作为 JSON,使用合成的 URL 作为键和b) 请求 persistent storage 只是为了增加保证,如果设备最终 运行 存储空间不足,它不会被清除。

这可能看起来像:

// Just use any URL that doesn't exist on your server.
const SETTINGS_KEY = '/_settings';
const SETTINGS_CACHE_NAME = 'settings';

async function getSettings() {
  const cache = await caches.open(SETTINGS_CACHE_NAME);
  const cachedSettingsResponse = await cache.match(SETTINGS_KEY);
  if (cachedSettingsResponse) {
    return await cachedSettingsResponse.json();
  }

  // This assumes a generateInitialSettings function that does provisioning
  // and returns an object that can be stringified.
  const newSettings = await generateInitialSettings();
  await cache.put(SETTINGS_KEY, JSON.stringify(newSettings), {
    headers: {
      'content-type': 'application/json',
    }
  });

  // Optional: request persistent storage.
  // This call may trigger a permissions dialog in the local browser, so it is
  // a good idea to explain to the user what's being stored first.
  // See https://web.dev/persistent-storage/#when-should-i-ask-for-persistent-storage
  if (navigator.storage && navigator.storage.persist) {
    // This returns a promise, but we don't have to delay the
    // rest of the program execution by await-ing it.
    navigator.storage.persist();
  }

  return newSettings;
}