[Full Clock 技术复盘] 二、SvelteKit 实战避坑指南：PWA、SSR 样式断裂、持久化防抖

如 https://www.cnblogs.com/cup11/p/20207070 所述，接下来几天我将要发表关于全屏时钟的技术解析的文章。

Svelte + PWA

在 SvelteKit 2 不要用 vite-plugin-pwa，否则你还要去找各种文件；套了 i18n 你就更不知道生成文件的目录了，导致前端每次都会报错：

javascript 复制代码

workbox-3105ea8d.js:1 Uncaught (in promise) non-precached-url: non-precached-url :: [{"url":"index.html"}]
    at O.createHandlerBoundToURL (workbox-3105ea8d.js:1:13313)
    at Object.createHandlerBoundToURL (workbox-3105ea8d.js:1:14966)
    at sw.js:1:1398
    at sw.js:1:558

在 SvelteKit 2 环境下，强烈建议使用官方内置的 $service-worker ：https://svelte.js.cn/docs/kit/$service-worker

全智能处理，框架原生支持。

Svelte SSR 样式断裂

对于在用户端会重新渲染（与屏幕大小关联，或与用户自定义主题关联）的情况，SSR 渲染产物和用户实际期待画面会不一致。这时，会造成首屏样式的断裂。

解决方法：加 CSS transition，用户感觉还是自然进入自己设置的主题。

localStorage 缓存踩坑

之前为了优化 localStorage 被反复写入的情况，加了这样一段代码：

typescript 复制代码

let settings = $state({ theme: 'dark', fontSize: 16 });

$effect(() => {
    debouncedSave(settings); 
});

function debouncedSave(data: any) {
    clearTimeout(timer);
    timer = setTimeout(() => {
        localStorage.setItem('settings', JSON.stringify(data));
    }, 300);
}

这个防抖乍看没什么问题，但是代码一旦上线，问题可就大了------设置数据永远不会被保存。

为什么呢？因为 Svelte 的 $effect 只会追踪同步执行路径上被访问到的属性，记录其为依赖。既然数据读取发生在 setTimeout 的异步中，Svelte 自然也无从得知，便认为该$effect 没有依赖------这就麻烦大了。

解决方案：

typescript 复制代码

$effect(() => {
    const snapshot = $state.snapshot(settings); 
    debouncedSave(snapshot); 
});

$state.snapshot 访问了每一个属性，从而将其转换成了 JavaScript 对象。这样一来，就实现了依赖记录和追踪。

后记

若读者对此项目本身感兴趣，可阅读项目介绍：https://www.cnblogs.com/cup11/p/20207070

欢迎交流！