时间戳

首页 > 解决方案 > Angular6 ServiceWorker 不缓存所有文件

progressive-web-apps - Angular6 ServiceWorker 不缓存所有文件

问题描述

我生成了一个干净的 Angular6 项目并使用ng add @angular/pwa我得到了这个ngsw-config.json：

{
    "index": "/index.html",
    "assetGroups": [
        {
            "name": "app",
            "installMode": "prefetch",
            "resources": {
                "files": [
                    "/favicon.ico",
                    "/index.html",
                    "/*.css",
                    "/*.js"
                ]
            }
        },
        {
            "name": "assets",
            "installMode": "lazy",
            "updateMode": "prefetch",
            "resources": {
                "files": [
                    "/assets/**"
                ]
            }
        }
    ]
}

整个资产文件夹都标记为“Service Worker Caching”，但可悲的现实表明这不是真的：

在此处输入图像描述

我使用的 3 个图形文件 ( header-bg.jpg, list-border-red.svg& list-border-green.svg) 被标记为“来自 ServiceWorker” 但是当我在智能手机上创建应用程序并断开 Internet 连接并打开应用程序时，仅header-bg.jpg可用。但是list-border-red.svg&list-border-green.svg不能离线使用。

还显示了从“磁盘缓存”加载 2 个图标和从 ftp 加载一个的图形...这些文件也在资产文件夹中，为什么它们没有从 mServiceWorker 缓存？ServiceWorker 的东西是否可能在 Chrome 中被窃听？

该应用程序已经在线，可以在这里找到：https ://expense-calculator.com/如果您需要它来重现我的问题，只需打开并进行自己的测试。

标签： progressive-web-appsangular6angular-service-workerpwa

解决方案

您的服务工作者代码看起来不错，并且已完美注册，可以像您预期的那样离线提供文件。我已经在飞行模式下检查了 Chrome。所有文件，包括从缓存加载的 .svg 文件。

请重试。

推荐阅读