哎，这个问题我帮不少开发者解答过——想用Service Worker把Google Maps也纳入PWA的离线缓存体系，确实没法直接做到，核心原因和可行的替代方案我给你理清楚：

为什么直接缓存Google Maps行不通？ #

• 资源特性与合规限制：Google Maps的地图瓦片、API脚本都是动态生成的，不仅URL会随时间或请求参数变化，而且很多资源的缓存有效期极短，就算你通过Service Worker拦截缓存了，很快就会失效。另外，Google的服务条款明确限制了对其地图资源的长期本地缓存（浏览器默认的临时缓存除外），硬来可能踩合规红线。
• 跨域与加载复杂度：Google Maps加载时会调用大量跨域资源，Service Worker处理这些请求时容易碰到CORS问题；而且它的加载链非常复杂，有很多动态注入的脚本、按需加载的瓦片，你根本没法提前预判并缓存所有需要的资源——毕竟全球地图瓦片数量是天文数字，不可能全部存下来。

可行的离线地图替代方案 #

如果你的PWA必须支持离线地图功能，推荐这几个思路：

• 静态地图预缓存：如果只需要展示固定区域的地图，用Google Maps Static API生成对应区域的静态图片，把这些图片提前加入Service Worker的预缓存列表里。离线时就能直接显示预缓存的静态图，缺点是没有交互功能，只能看固定视角。
• 切换到支持离线的地图库：比如用Leaflet搭配合法的离线瓦片资源（注意瓦片的版权问题），或者Mapbox的离线功能（符合其服务条款的前提下），这些工具的资源加载逻辑更可控，能通过Service Worker轻松缓存所需的瓦片和脚本，实现离线交互地图。
• 利用浏览器层面的Google Maps离线缓存：移动端Chrome等浏览器本身支持Google Maps的离线缓存，但这是用户手动触发的，你没法在PWA里主动控制，只能引导用户去开启这个功能，局限性比较大。

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