sveltekit 保存整个应用程序的离线/在线状态

Question

在使用 sveltekit 创建的客户端应用程序中保存和使用在线/离线状态的最佳方法是什么？

会话/Cookie？ 该应用程序使用 addapter_static 部署为静态，作为具有离线支持的 PWA

为了避免每个页面都写下面的代码。

// addEventListener version
window.addEventListener("offline", (event) => {
  console.log("The network connection has been lost.");
});

// onoffline version
window.onoffline = (event) => {
  console.log("The network connection has been lost.");
};

根据更改状态我想更改顶部菜单背景颜色，在每个页面上显示背景图像，并在某些情况下禁用按钮

Answer 1

从 Svelte 5.11 开始，您可以直接将无功值导入 Svelte 模块：

import { online } from 'svelte/reactivity/window';

online.current // continuously updates

在 v5 之前，您可以将其包装在其自己的模块中的 store 中。