Angular 8 PWA assetGroups 离线无法工作-6ren

Angular 8 PWA assetGroups 离线无法工作

转载作者：行者123 更新时间：2023-12-02 15:14:58

我制作了 Angular 8.1.0 PWA，当我在移动设备上离线测试它时， Assets 组中的图像和字体未加载。

这里是来自 chrome://inspect 的 Logo 图像的示例错误，该错误来自离线移动设备上已安装的应用程序，由 ngsw-worker.js:596 引发

Uncaught (in promise) Error: Response not Ok (fetchAndCacheOnce): request for https://exampledomain.com/assets/logo.svg returned response 504 Gateway Timeout
    at PrefetchAssetGroup.<anonymous>

这里是 ngws-config.json

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/*.css",
          "/*.js"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "prefetch",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

这是生产构建后的 ngws-config.json:

{
  "configVersion": 1,
  "timestamp": 1563173692955,
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "updateMode": "prefetch",
      "urls": [
        "/favicon.ico",
        "/index.html",
        "/main-es2015.689aadc303f18e627b86.js",
        "/main-es5.ee2fe89fd9715359423f.js",
        "/polyfills-es2015.bfe445a5fe4a078e3bd7.js",
        "/polyfills-es5.2219c87348e60efc0076.js",
        "/runtime-es2015.703a23e48ad83c851e49.js",
        "/runtime-es5.465c2333d355155ec5f3.js",
        "/styles.0d6b774b440b874b07f5.css"
      ],
      "patterns": []
    },
    {
      "name": "assets",
      "installMode": "prefetch",
      "updateMode": "prefetch",
      "urls": [
        "/3405E1_0_0.254f1b554f08928edbfe.eot",
        "/3405E1_0_0.4eec58f7f58d86d0136f.woff",
        "/3405E1_0_0.89f2e03e5be552d187b0.ttf",
        "/3405E1_0_0.a140c5d9ff48f89cd132.woff2",
        "/3405E1_1_0.1141c29a5ace938968de.woff2",
        "/3405E1_1_0.8ae86c2030df85a73353.ttf",
        "/3405E1_1_0.a2374906ddbb8fe33667.eot",
        "/3405E1_1_0.c64c469afa8f5fbccafe.woff",
        "/3405E1_2_0.08521d75558d4817ba99.woff2",
        "/3405E1_2_0.746af6d254502ae02a0f.eot",
        "/3405E1_2_0.8675b352e8d358a4c75e.ttf",
        "/3405E1_2_0.fffce226c716355dc60e.woff",
        "/3405E1_3_0.03a6a6be22f367008456.ttf",
        "/3405E1_3_0.18c23e244175591d938b.woff",
        "/3405E1_3_0.5e0459024c2bdb4f46cc.woff2",
        "/3405E1_3_0.984e51e63d090e3b758d.eot",
        "/assets/icons/icon-128x128.png",
        "/assets/icons/icon-144x144.png",
        "/assets/icons/icon-152x152.png",
        "/assets/icons/icon-192x192.png",
        "/assets/icons/icon-384x384.png",
        "/assets/icons/icon-512x512.png",
        "/assets/icons/icon-72x72.png",
        "/assets/icons/icon-96x96.png",
        "/assets/logo.svg",
        "/assets/ok.svg",
        "/assets/pfeil-links.svg",
        "/assets/webfonts/3405E1_0_0.eot",
        "/assets/webfonts/3405E1_0_0.ttf",
        "/assets/webfonts/3405E1_0_0.woff",
        "/assets/webfonts/3405E1_0_0.woff2",
        "/assets/webfonts/3405E1_1_0.eot",
        "/assets/webfonts/3405E1_1_0.ttf",
        "/assets/webfonts/3405E1_1_0.woff",
        "/assets/webfonts/3405E1_1_0.woff2",
        "/assets/webfonts/3405E1_2_0.eot",
        "/assets/webfonts/3405E1_2_0.ttf",
        "/assets/webfonts/3405E1_2_0.woff",
        "/assets/webfonts/3405E1_2_0.woff2",
        "/assets/webfonts/3405E1_3_0.eot",
        "/assets/webfonts/3405E1_3_0.ttf",
        "/assets/webfonts/3405E1_3_0.woff",
        "/assets/webfonts/3405E1_3_0.woff2"
      ],
      "patterns": []
    }
  ],
  "dataGroups": [],
  "hashTable": {
    "/3405E1_0_0.254f1b554f08928edbfe.eot": "390e70b65a28230070b11874c42fc29a38c50305",
    "/3405E1_0_0.4eec58f7f58d86d0136f.woff": "fca72e038d5c9b823102557ac64895d6e64488a9",
    "/3405E1_0_0.89f2e03e5be552d187b0.ttf": "143629b1399abe0a95305a0ad6bf1e22630127a3",
    "/3405E1_0_0.a140c5d9ff48f89cd132.woff2": "5ed39fae6e54175097262f330d8afb9c44e437ba",
    "/3405E1_1_0.1141c29a5ace938968de.woff2": "dff11d5ad9fb029d3f3d4f3c7c0756913d8f98b5",
    "/3405E1_1_0.8ae86c2030df85a73353.ttf": "05c376f1c66105d9924fd0766f6ed02350c24c6a",
    "/3405E1_1_0.a2374906ddbb8fe33667.eot": "f7a9c6b7fba08557b2e85d03c2f84b675958a491",
    "/3405E1_1_0.c64c469afa8f5fbccafe.woff": "4d52d09c75893a06d90f83d40aa1e6635d5d819d",
    "/3405E1_2_0.08521d75558d4817ba99.woff2": "4d0c71ef36e3c47eb95670031118c89c99de61e8",
    "/3405E1_2_0.746af6d254502ae02a0f.eot": "dd1fbdde450c5d3757067ea1bfc7db986cfa002b",
    "/3405E1_2_0.8675b352e8d358a4c75e.ttf": "f09530997b2bd02003dcec309bdf2f1608b0925b",
    "/3405E1_2_0.fffce226c716355dc60e.woff": "81333bd973c221f0db0251169d0c8f20cb8a0add",
    "/3405E1_3_0.03a6a6be22f367008456.ttf": "4e0e7ee61da3e9842b7816e0ae637af95dd999a6",
    "/3405E1_3_0.18c23e244175591d938b.woff": "4553f17cd805b00e9e74cea96417f03408d582a5",
    "/3405E1_3_0.5e0459024c2bdb4f46cc.woff2": "41ada2bd9b5f3f6ed8722075b571734e36591f85",
    "/3405E1_3_0.984e51e63d090e3b758d.eot": "b8a28de51a31444272bcdc57f78ebd0e648b51c7",
    "/assets/icons/icon-128x128.png": "dae3b6ed49bdaf4327b92531d4b5b4a5d30c7532",
    "/assets/icons/icon-144x144.png": "b0bd89982e08f9bd2b642928f5391915b74799a7",
    "/assets/icons/icon-152x152.png": "7479a9477815dfd9668d60f8b3b2fba709b91310",
    "/assets/icons/icon-192x192.png": "1abd80d431a237a853ce38147d8c63752f10933b",
    "/assets/icons/icon-384x384.png": "329749cd6393768d3131ed6304c136b1ca05f2fd",
    "/assets/icons/icon-512x512.png": "559d9c4318b45a1f2b10596bbb4c960fe521dbcc",
    "/assets/icons/icon-72x72.png": "c457e56089a36952cd67156f9996bc4ce54a5ed9",
    "/assets/icons/icon-96x96.png": "3914125a4b445bf111c5627875fc190f560daa41",
    "/assets/logo.svg": "6c6c23943032ddbaf58cc57831ffdeccc1e42a50",
    "/assets/ok.svg": "0cf100e30624ac5024757308b95ed6ba85b2d052",
    "/assets/pfeil-links.svg": "e4b2ba69650f9aa33f1b5c82308259b4cb200a58",
    "/assets/webfonts/3405E1_0_0.eot": "390e70b65a28230070b11874c42fc29a38c50305",
    "/assets/webfonts/3405E1_0_0.ttf": "143629b1399abe0a95305a0ad6bf1e22630127a3",
    "/assets/webfonts/3405E1_0_0.woff": "fca72e038d5c9b823102557ac64895d6e64488a9",
    "/assets/webfonts/3405E1_0_0.woff2": "5ed39fae6e54175097262f330d8afb9c44e437ba",
    "/assets/webfonts/3405E1_1_0.eot": "f7a9c6b7fba08557b2e85d03c2f84b675958a491",
    "/assets/webfonts/3405E1_1_0.ttf": "05c376f1c66105d9924fd0766f6ed02350c24c6a",
    "/assets/webfonts/3405E1_1_0.woff": "4d52d09c75893a06d90f83d40aa1e6635d5d819d",
    "/assets/webfonts/3405E1_1_0.woff2": "dff11d5ad9fb029d3f3d4f3c7c0756913d8f98b5",
    "/assets/webfonts/3405E1_2_0.eot": "dd1fbdde450c5d3757067ea1bfc7db986cfa002b",
    "/assets/webfonts/3405E1_2_0.ttf": "f09530997b2bd02003dcec309bdf2f1608b0925b",
    "/assets/webfonts/3405E1_2_0.woff": "81333bd973c221f0db0251169d0c8f20cb8a0add",
    "/assets/webfonts/3405E1_2_0.woff2": "4d0c71ef36e3c47eb95670031118c89c99de61e8",
    "/assets/webfonts/3405E1_3_0.eot": "b8a28de51a31444272bcdc57f78ebd0e648b51c7",
    "/assets/webfonts/3405E1_3_0.ttf": "4e0e7ee61da3e9842b7816e0ae637af95dd999a6",
    "/assets/webfonts/3405E1_3_0.woff": "4553f17cd805b00e9e74cea96417f03408d582a5",
    "/assets/webfonts/3405E1_3_0.woff2": "41ada2bd9b5f3f6ed8722075b571734e36591f85",
    "/favicon.ico": "84161b857f5c547e3699ddfbffc6d8d737542e01",
    "/index.html": "f4c6f13900643ba464e6a5b1f1e41389e7e55bdd",
    "/main-es2015.689aadc303f18e627b86.js": "017a58d40df6a948f8ddd0e7d91538559e3d5536",
    "/main-es5.ee2fe89fd9715359423f.js": "5efc5443bfcefcc7a66ea3a575d59c05673f2f0f",
    "/polyfills-es2015.bfe445a5fe4a078e3bd7.js": "fa3294dc18f74d99ffb7812c33dbbdb3daf098ca",
    "/polyfills-es5.2219c87348e60efc0076.js": "6c9688c6586bfcf669879655ba5874ef1d2b4bcf",
    "/runtime-es2015.703a23e48ad83c851e49.js": "b62956c2192bfe5516d6374e753773901ed50ec5",
    "/runtime-es5.465c2333d355155ec5f3.js": "b62956c2192bfe5516d6374e753773901ed50ec5",
    "/styles.0d6b774b440b874b07f5.css": "c232e470a48247d386d4d14d1bfe66a97c9d125d"
  },
  "navigationUrls": [
    {
      "positive": true,
      "regex": "^\\/.*$"
    },
    {
      "positive": false,
      "regex": "^\\/(?:.+\\/)?[^/]*\\.[^/]*$"
    },
    {
      "positive": false,
      "regex": "^\\/(?:.+\\/)?[^/]*__[^/]*$"
    },
    {
      "positive": false,
      "regex": "^\\/(?:.+\\/)?[^/]*__[^/]*\\/.*$"
    }
  ]
}

和manifest.webmanifest

{
  "name": "testClient",
  "short_name": "testClient",
  "theme_color": "#1976d2",
  "background_color": "#fafafa",
  "display": "fullscreen",
  "scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "assets/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

而且有趣的是，如果我在线时启动该应用程序，然后离线，它就可以工作。但是，如果我离线启动应用程序，则不会加载图像和字体。 css 总是没问题。

谢谢!

最佳答案

服务工作人员必须首次注册才能从缓存中提供资源。

当您说“离线启动应用程序”时，您能否检查一下您这边的SW是否正确运行？您可以在 DevTools 的“应用程序”选项卡中验证这一点。如果SW已注册，您是否还可以验证图像是否已缓存？

我创建了一个Angular PWA demo如果您想看一下它并与您的代码进行比较。演示代码使用AssetGroups来存储一些图像和DataGroups来缓存API请求。如果有兴趣的话，我还写了一些相关的技术文章:

<小时/>

更新

使用您发布的链接，我可以看到这两个 svg 文件已正确缓存:

关于Angular 8 PWA assetGroups 离线无法工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57034972/

文章推荐： cordova - 在 Cordova Android 应用程序中使用 Crittercism

文章推荐： haskell - Haskell 中的质因式分解函数

文章推荐： haskell - 在 Windows 7 上使用 cygwin 安装 Cabal-dev

java - 无法 Autowiring
我通过 spring ioc 编写了一些 Rest 应用程序。但我无法解决这个问题。这是我的异常(exception): org.springframework.beans.factory.BeanC
java - 无法@Autowire配置
我对 TestNG、Spring 框架等完全陌生，我正在尝试使用注释 @Value通过 @Configuration 访问配置文件注释。我在这里想要实现的目标是让控制台从配置文件中写出“hi”，通过
无法 malloc 然后转到程序顶部
为此工作了几个小时。我完全被难住了。这是 CS113 的实验室。如果用户在程序(二进制计算器)结束时选择继续，我们需要使用 goto 语句来到达程序的顶部。但是，我们还需要释放所有分配的内存。
无法 avformat_open_input .mp3
我正在尝试使用 ffmpeg 库构建一个小的 C 程序。但是我什至无法使用 avformat_open_input() 打开音频文件设置检查错误代码的函数后，我得到以下输出: Error code:
java - 无法 Autowiring
使用 Spring Initializer 创建一个简单的 Spring boot。我只在可用选项下选择 DevTools。创建项目后，无需对其进行任何更改，即可正常运行程序。现在，当我尝试在项目
macos - 无法 brew 链接qt
所以我只是在 Mac OS X 中通过 brew 安装了 qt。但是它无法链接它。当我尝试运行 brew link qt 或 brew link --overwrite qt 我得到以下信息: ton
git - 无法 pull 或提交
我在提交和 pull 时遇到了问题:在提交的 IDE 中，我看到: warning not all local changes may be shown due to an error: unable
gcc - 无法 grep 特定格式的文本
我跑 man gcc | grep "-L" 我明白了 Usage: grep [OPTION]... PATTERN [FILE]... Try `grep --help' for more inf
curl - 无法 CURL 远程文件
我有一段代码，旨在接收任何 URL 并将其从网络上撕下来。到目前为止，它运行良好，直到有人给了它这个 URL: http://www.aspensurgical.com/static/images/a
WireGuard - 无法 ping 服务器或解析域
在过去的 5 个小时里，我一直在尝试在我的服务器上设置 WireGuard，但在完成所有设置后，我无法 ping IP 或解析域。下面是服务器配置 [Interface] Address = 10.
GitLab:无法 fork 我自己的项目
我正在尝试在 GitLab 中 fork 我的一个私有(private)项目，但是当我按下 fork 按钮时，我会收到以下信息: No available namespaces to fork the
javascript - 无法 GET/定义路由
我这里遇到了一些问题。我是 node.js 和 Rest API 的新手，但我正在尝试自学。我制作了 REST API，使用 MongoDB 与我的数据库进行通信，我使用 Postman 来测试我的路
javascript - 无法 AppendChild - 尝试使一个方法在不同的类中附加另一个方法
下面的代码在控制台中给出以下消息: Uncaught DOMException: Failed to execute 'appendChild' on 'Node': The new child el
javascript - 数组被视为对象，无法 NgFor
我正在尝试调用一个新端点来显示数据，我意识到在上一组有效的数据中，它在数据周围用一对额外的“[]”括号进行控制台，我认为这就是问题是，而新端点不会以我使用数据的方式产生它! 这是 NgFor 失败的原
git - 无法 checkout 到无效路径
我正在尝试将我的 Symfony2 应用程序部署到我的 Azure Web 应用程序，但遇到了一些麻烦。推送到远程时，我在终端中收到以下消息 remote: Updating branch 'mas
docker - Minikube具有IP-无法 curl
Minikube已启动并正在运行，没有任何错误，但是我无法 curl IP。我在这里遵循:https://docs.traefik.io/user-guide/kubernetes/，似乎没有提到关闭
linux - 无法 docker 组成任何项目
每当我尝试docker组成任何项目时，都会出现以下错误。我尝试过有和没有sudo 我在这台机器上只有这个问题。我可以在Mac和Amazon WorkSpace上运行相同的容器。 (myslabs)
python - 无法 pip 安装手电筒
我正在尝试 pip install stanza 并收到此消息: ERROR: No matching distribution found for torch>=1.3.0 (from stanza
kubernetes 无法 ping 通其他服务
DNS 解析看起来不错，但我无法 ping 我的服务。可能是什么原因？来自集群中的另一个 Pod: $ ping backend PING backend.default.svc.cluster.l
spring - 无法 Autowiring 字段
我正在使用Hibernate 4 + Spring MVC 4当我开始 Apache Tomcat Server 8我收到此错误: Error creating bean with name 'wel

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

Angular 8 PWA assetGroups 离线无法工作