逐步提升地图显示效果

The Session 在线已经有20多年了，你不想依赖别人，因为迟早他们会消失不见。

一些第三方API是不可避免的。The Session 提供了 会话 和 其他活动 的地图。当人们添加一个新的条目时，他们会提供地址，但是我就需要获取经纬度。所以我必须使用一个第三方的地理编码API。

我的代码就像是一堂充满警惕性的课程：我内置了在多个地理位置编码服务提供商之间切换的选项。当其中一个服务不可避免地开始变差时，我可以迅速切换到另一个。这就像为地理位置编码准备了一个“备用包”。

客户端这边情况要好一些。我用其他人的JavaScript库——比如非常棒的abcjs——但至少我可以自己托管这些库。

我正在使用Leaflet嵌入地图功能。这是一个非常实用的小库，基于Open Street Map的数据。

最近一段时间，我分享了一个链接到一个名为OpenFreeMap的新项目。这是一个地图服务，你甚至可以选择自己托管地图瓦片。

暂时我还没有自己托管地图瓦片（暂时还没有！），但我确实想换成OpenFreeMap的瓦片。它们是矢量图而不是位图，所以非常清晰和锐利。

不过呢，有个问题。

我可以使用 OpenFreeMap 和 Leaflet，但是要想做到这一点，我还需要使用 MapLibre GL 库。不过，Leaflet 只有 148K 的 JavaScript，而 MapLibre GL 却有 800K！哇哦！

这简直是巨大的，按照《Session》的性能预算标准来说。我觉得这些矢量地图的漂亮程度是否值得将JavaScript脚本大小增加这么多是值得商榷的。

但这并不意味着必须二选一。我可以利用渐进增强来获得两者的最佳效果。

当你第一次直接进入The Session的地图页面时，你会看到传统的位图地图。不会加载MapLibre地图。

但如果你在The Session这个网站上逛一逛，然后进入一个地图页面，你就能看到那些漂亮的矢量地图了。

这事儿就发生了……

地图使用一个名为 embed-map 的 HTML Web 组件 嵌入式。作为备用方案，在打开和关闭标签之间会显示一张静态图片。然后该 web 组件将加载 Leaflet。

这里就是增强功能的部分。当web组件初始化（在它的connectedCallback方法中）时，它会使用Cache API来检查MapLibre是否已经被存放在缓存区中。如果有，它将加载该库。

    caches.match('/path/to/maplibre-gl.js')  
    .then(responseFromCache => {  
        if (responseFromCache) {  
            // 加载地图库 maplibre-gl.js  
        }  
    });

然后在绘制地图的时候，可以检查是否有 maplibreGL 对象。如果存在的话，可以使用 OpenFreeMap 地图瓦片层。否则就用之前的 Leaflet 地图瓦片层。

那么 MapLibre 库是如何被缓存的呢？这得感谢服务工作者脚本（位于 https://thesession.org/serviceworker.js）。

在服务工作者的 install 事件中，我提供了一个要缓存的静态文件列表，包括 CSS、JavaScript 等。这包括第三方库，例如 abcjs、Leaflet 以及 MapLibre GL。

最重要的是，这种缓存是在后台线程中完成的。它在后台，不会拖慢当前显示页面的加载速度。

就这样。如果服务工作者的安装顺利进行，你就能看到新的矢量地图。如果出现问题，你将看到旧版本的地图。

顺便提一句，使用服务工作者和缓存 API 来存储你的 JavaScript 文件是个好主意。众所周知，JavaScript 对性能来说成本很高；不仅需要下载，还要进行解析和编译。但是，在服务工作者的 install 事件中存储到缓存中的 JavaScript 已经 解析和编译完成。