SvelteKit应用中online/offline事件监听器的放置位置咨询

优先选根+layout.svelte的onMount #

直接把监听器加在根+layout.svelte的onMount钩子里是最优解，理由如下：

• 根布局是应用全局渲染的组件，客户端启动时只会执行一次onMount，完全符合你“只需在应用启动时添加”的要求。
• 能直接结合Svelte的响应式特性，比如用变量控制离线提示的显示/隐藏，不用手动操作DOM。

给你个现成的代码示例：

<script>
  import { onMount } from 'svelte';
  let isOnline = navigator.onLine;

  const showOnlineTip = () => {
    isOnline = true;
    // 这里写在线提示逻辑，比如弹出个通知
  };

  const showOfflineTip = () => {
    isOnline = false;
    // 这里写离线提示逻辑，比如显示顶部警告栏
  };

  onMount(() => {
    window.addEventListener('online', showOnlineTip);
    window.addEventListener('offline', showOfflineTip);

    // 返回清理函数，组件销毁时自动移除监听器
    return () => {
      window.removeEventListener('online', showOnlineTip);
      window.removeEventListener('offline', showOfflineTip);
    };
  });
</script>

{#if !isOnline}
  <div class="offline-alert" style="padding: 10px; background: #ffcccc; text-align: center;">
    哎呀，你现在离线了
  </div>
{/if}

<slot />

要不要移除监听器？ #

必须要。虽然根布局一般不会被销毁，但从内存管理和代码健壮性考虑，移除监听器是好习惯：

• 避免重复绑定（比如未来如果布局有嵌套或替换的情况）；
• 防止内存泄漏，尤其是在组件销毁时（哪怕根布局很少出现这种情况）。
• 上面的示例里用onMount返回清理函数的方式，就等价于在onDestroy里写移除逻辑，代码更简洁。你也可以单独写onDestroy钩子来移除，效果一样：

import { onMount, onDestroy } from 'svelte';

// ... 其他代码

onDestroy(() => {
  window.removeEventListener('online', showOnlineTip);
  window.removeEventListener('offline', showOfflineTip);
});

为什么不推荐用app.html？ #

别在app.html里加，原因有两个：

• app.html里的脚本是全局顶级脚本，会在Svelte应用初始化前执行，没法直接和Svelte的响应式状态、组件逻辑交互，要显示提示只能手动操作原生DOM，不符合Svelte的开发模式。
• 这种方式代码耦合度高，不好维护，也没法利用Svelte的生命周期钩子来管理监听器的销毁。

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