Angular 6 Service Worker 正在缓存字体很棒的图标，无法在离线模式下检索它们

问题描述 投票：0回答：3

我对 font-awesome 和 PWA 离线模式有问题。当我的应用程序加载时，它会缓存构建的生产包中的所有内容，以及很棒的字体文件。

当我切换到“离线”模式时出现问题，然后所有字体很棒的文件都会收到 504 网关超时错误，尽管它们缓存在服务工作线程中。

Font Awesome css 是从节点模块导入的。

构建之前的

ngsw-config.json

{
"index": "/index.html",
"assetGroups": [
    {
        "name": "blackboard-app",
        "installMode": "prefetch",
        "resources": {
            "files": [
                "/fontawesome-webfont*",
                "/favicon.ico", 
                "/index.html",
                "/*.js",
                "/*.css",
                "/*.bundle.css", 
                "/*.bundle.js", 
                "/*.chunk.js",
                "/!main*.js"
            ],
            "urls": ["https://fonts.googleapis.com/icon?family=Material+Icons"]
        }
    },
    {
        "name": "assets",
        "installMode": "prefetch",
        "updateMode": "prefetch",
        "resources": {
            "files": [
                "/assets/**",
                "/assets/logo/*",
                "/assets/logo/logo.svg",
                "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
            ]
        }
    }
]
}
构建后的

ngsw-config.json

  {
"configVersion": 1,
"index": "/index.html",
"assetGroups": [
  {
    "name": "blackboard-app",
    "installMode": "prefetch",
    "updateMode": "prefetch",
    "urls": [
      "/12.25bb4625035aa983286c.js",
      "/13.493b0945aa3e48329f0c.js",
      "/14.2fc43f30a2a3b5c66cc6.js",
      "/15.3f977c68e010d85b993e.js",
      "/16.f3761394d6b60e948cc1.js",
      "/17.eab8f1a5c9827a594f1a.js",
      "/18.111d970245c46f8c6e27.js",
      "/19.f405adc50755f6bc8feb.js",
      "/2.6976c64cb62cd456d4bd.js",
      "/20.f7980e50fde809527317.js",
      "/21.4915c7ddea43587e6614.js",
      "/22.11c6cecea349cd960e2b.js",
      "/3.e753f18ca29a1c70a074.js",
      "/4.342862d374ddf89b8767.js",
      "/5.04c193b1fe7a4b549c88.js",
      "/6.82ca647ade8c794f0fc5.js",
      "/7.7069b7766f8363eb04e9.js",
      "/common.68d2f017a7dae628e8c5.js",
      "/es2015-polyfills.1c08ca914fb3a70a67ba.js",
      "/favicon.ico",
      "/fontawesome-webfont.674f50d287a8c48dc19b.eot",
      "/fontawesome-webfont.912ec66d7572ff821749.svg",
      "/fontawesome-webfont.af7ae505a9eed503f8b8.woff2",
      "/fontawesome-webfont.b06871f281fee6b241d6.ttf",
      "/fontawesome-webfont.fee66e712a8a08eef580.woff",
      "/index.html",
      "/main.f08efb7a056c489b1b70.js",
      "/polyfills.e93ae6dbbd46cede4a3a.js",
      "/runtime.593a2fc9b4061ec94713.js",
      "/scripts.ccad1d9b2f6939a49dad.js",
      "/styles.1b1d0abb44dcb4d40a0d.css"
    ],
    "patterns": [
      "https:\\/\\/fonts\\.googleapis\\.com\\/icon\\?family=Material\\+Icons"
    ]
  },
  {
    "name": "assets",
    "installMode": "prefetch",
    "updateMode": "prefetch",
    "urls": [
      "/assets/bg/bg.png",
      "/assets/button/new.png",
      "/assets/button/new.svg",
      "/assets/button/watch-white.svg",
      "/assets/button/watch.svg",
      "/assets/icon/Absence_1.svg",
      "/assets/icon/Absence_2.svg",
      "/assets/icon/Absence_3.svg",
      "/assets/icon/Absence_4.svg",
      "/assets/icon/eating_0.svg",
      "/assets/icon/eating_0_empty.svg",
      "/assets/icon/eating_1.svg",
      "/assets/icon/eating_1_empty.svg",
      "/assets/icon/eating_2.svg",
      "/assets/icon/eating_2_empty.svg",
      "/assets/icon/eating_3.svg",
      "/assets/icon/eating_3_empty.svg",
      "/assets/icon/eating_4.svg",
      "/assets/icon/eating_4_empty.svg",
      "/assets/images/g_logo.png",
      "/assets/images/karta_numer_min1.png",
      "/assets/images/karta_numer_min_thumb.png",
      "/assets/logo/logo.png",
      "/assets/logo/logo.svg",
      "/assets/logo/logo_kids.png",
      "/assets/manifest/ep-192x192.png",
      "/assets/manifest/ep-192x192_alternative.png",
      "/assets/manifest/ep-192x192_white.png"
    ],
    "patterns": []
  }
],
"dataGroups": [],
"hashTable": {
  "/12.25bb4625035aa983286c.js": "d85b3e1aca84a87856a4c8c3d4ffc74be4abba3d",
  "/13.493b0945aa3e48329f0c.js": "276e65200141c59d50dac5cb33adda22d2a6bcc6",
  "/14.2fc43f30a2a3b5c66cc6.js": "2e16036ee67b768cc564993337057def3acccc58",
  "/15.3f977c68e010d85b993e.js": "39a8ba74f671f6b24e5ab6d35f21a164f77866c0",
  "/16.f3761394d6b60e948cc1.js": "87eff94c9c15daaaf6c4619a372a60fae9994552",
  "/17.eab8f1a5c9827a594f1a.js": "cda7bfdd20014ebe5e13b3f141cd31415a1e3ffd",
  "/18.111d970245c46f8c6e27.js": "55fd5e02d80e8b3385e1aa335dc597cdd3fa0e36",
  "/19.f405adc50755f6bc8feb.js": "18600d2bd1448a9b6c0e9475e83895a3d37becc9",
  "/2.6976c64cb62cd456d4bd.js": "1c71d12f908cc42d9b5267be1da747c5cf0cd0d2",
  "/20.f7980e50fde809527317.js": "f6f6c10b30d62e54c2a2ad1bd66f8f3e41661393",
  "/21.4915c7ddea43587e6614.js": "1dcaf73e75071a69bc0a3beec886d8d68b1853a5",
  "/22.11c6cecea349cd960e2b.js": "9dc64f5af2110a1c199b005d6e32cc55b7cc78cb",
  "/3.e753f18ca29a1c70a074.js": "329a5e0394cf14ed8c8be106bdd219f44545a3a7",
  "/4.342862d374ddf89b8767.js": "e4198adff93d1f1687d23880bb86db75117301e6",
  "/5.04c193b1fe7a4b549c88.js": "245c18593d1166323ec2c0a800db49ab6da53cf6",
  "/6.82ca647ade8c794f0fc5.js": "a1aa9fc0c2b1665982f8b2875d283d0551990656",
  "/7.7069b7766f8363eb04e9.js": "80816daee7e4f7517566b15280d4bce6106dc271",
  "/assets/bg/bg.png": "e49d1e8293172e0d48713a93e2235abbd12555a2",
  "/assets/button/new.png": "65829ad4727b2fc5dc2b3bc062e0ed635acf5723",
  "/assets/button/new.svg": "b56b744cf78fbb60b5fad3cc98982ee84e090e22",
  "/assets/button/watch-white.svg": "85c53dabf87c6436033bee3f8bf3baf94503610c",
  "/assets/button/watch.svg": "850222e29dedf53834bafca514f9d6817d2d446e",
  "/assets/icon/Absence_1.svg": "2db1ea93dae300caebfc527acb9fa0fbafb3bd9c",
  "/assets/icon/Absence_2.svg": "f6dbaf15186913cd22ca94fe4e31cdcdde1b43a3",
  "/assets/icon/Absence_3.svg": "f72b5e22de3956bc02a636ee7984f4ab120ffee9",
  "/assets/icon/Absence_4.svg": "355888cfb00f0a9a6b616c2da355e80cdc3c6d85",
  "/assets/icon/eating_0.svg": "c47672f723507317e3e1434efaa5a01fe4154d32",
  "/assets/icon/eating_0_empty.svg": "e8f045fcc76d24cd8fb06c80d31f10320e1e1ae8",
  "/assets/icon/eating_1.svg": "df226958df581c8d06e4d5b82f1edca35cbd5d4b",
  "/assets/icon/eating_1_empty.svg": "d4773117471e5a60c59dfcbc5e54059880206554",
  "/assets/icon/eating_2.svg": "8b9c5f654e2f172f26f797d69e9c2617cc2dab14",
  "/assets/icon/eating_2_empty.svg": "eb92371a392eecd4dc3aa97b7c8dd904e0c9a573",
  "/assets/icon/eating_3.svg": "5ae77a1a1a6fa303800d14548ef8df0172c0cf0c",
  "/assets/icon/eating_3_empty.svg": "109a44345bf6b60feb64e21810733b00f2743f71",
  "/assets/icon/eating_4.svg": "bab3d743c997daa5c3a4947f6de2a55cfa1b804c",
  "/assets/icon/eating_4_empty.svg": "111abf9d2f66eb751ceb54932f783141aad24267",
  "/assets/images/g_logo.png": "03f0aafffea0bd629d4f6165a10d715c511cc8b8",
  "/assets/images/karta_numer_min1.png": "75bdd569752728ae4d9f01346dc3b4e60c6afde0",
  "/assets/images/karta_numer_min_thumb.png": "afa37cf8bdcee35d0848c45ce6ec3aec78af7259",
  "/assets/logo/logo.png": "c7511c629524498d06c1ba92253ee746138174f9",
  "/assets/logo/logo.svg": "200ab18c82fdc093c77d8a0b6025ae65c1c6dcf9",
  "/assets/logo/logo_kids.png": "8b8a0098b22e5b6a35486cc2712b6c52021e7053",
  "/assets/manifest/ep-192x192.png": "ef3ddf5e16da1eb36a4422c228d74a3d3f42bd51",
  "/assets/manifest/ep-192x192_alternative.png": "03d4da1ddd197187eb6c44b9a3dbb23222fd3824",
  "/assets/manifest/ep-192x192_white.png": "1c3bc28f1f65a898afab961e469c2466e8223c92",
  "/common.68d2f017a7dae628e8c5.js": "ab6f881f1c78238eadad9853ff10e55965285311",
  "/es2015-polyfills.1c08ca914fb3a70a67ba.js": "05a1a4e4b56c2b2f44ef68df1a3ce7b6c967bcd4",
  "/favicon.ico": "0bd4abdc42baf6ddbc290b0141ea9454ae9b5c9d",
  "/fontawesome-webfont.674f50d287a8c48dc19b.eot": "d980c2ce873dc43af460d4d572d441304499f400",
  "/fontawesome-webfont.912ec66d7572ff821749.svg": "98a8aa5cf7d62c2eff5f07ede8d844b874ef06ed",
  "/fontawesome-webfont.af7ae505a9eed503f8b8.woff2": "d6f48cba7d076fb6f2fd6ba993a75b9dc1ecbf0c",
  "/fontawesome-webfont.b06871f281fee6b241d6.ttf": "13b1eab65a983c7a73bc7997c479d66943f7c6cb",
  "/fontawesome-webfont.fee66e712a8a08eef580.woff": "28b782240b3e76db824e12c02754a9731a167527",
  "/index.html": "d269d3ad97704bb1d9ec0697b982d5d81354c9c5",
  "/main.f08efb7a056c489b1b70.js": "8d4e5835f4090a1756f72d0a48a0a0e1f12f427b",
  "/polyfills.e93ae6dbbd46cede4a3a.js": "4cdade4d3cfbdb7268ac6be842fd9fe6c1aa022f",
  "/runtime.593a2fc9b4061ec94713.js": "238d319c42f8c621a7423d356b293ef616a2e55c",
  "/scripts.ccad1d9b2f6939a49dad.js": "9352e22b1253460ed54cc39e6df658a4e4c6bc54",
  "/styles.1b1d0abb44dcb4d40a0d.css": "d2972a867b27577a39a9c1625d50e98f43bef461"
},
"navigationUrls": [
  {
    "positive": true,
    "regex": "^\\/.*$"
  },
  {
    "positive": false,
    "regex": "^\\/(?:.+\\/)?[^/]*\\.[^/]*$"
  },
  {
    "positive": false,
    "regex": "^\\/(?:.+\\/)?[^/]*__[^/]*$"
  },
  {
    "positive": false,
    "regex": "^\\/(?:.+\\/)?[^/]*__[^/]*\\/.*$"
  }
]
}

缓存中的开发工具屏幕

我在离线模式下遇到的实际错误

angular font-awesome angular-service-worker
3个回答
2
投票

我遇到了与您相同的错误，并且我偶然发现了这篇文章。仔细查看错误后，我注意到在 url 末尾有 font Awesome 字体的查询参数。您不必将 

"/fontawesome-webfont*"
添加到文件数组中。 
"/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
应该已经覆盖了很棒的字体。技巧是将服务工作线程配置为忽略查询参数，如下所示：

        {
            "name": "assets",
            "installMode": "lazy",
            "updateMode": "prefetch",
            "resources": {
                "files": [
                    "/assets/**",
                    "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
                ]
            },
            "cacheQueryOptions": { "ignoreSearch": true }
        }
0
投票

您需要允许所有以 fontawesome-webfont 开头的网址，如下面的代码所示。

将其添加到您的 ngsw-config.json 文件中

    {
  "name": "assets",
  "installMode": "prefetch",
  "updateMode": "prefetch",
  "resources": {
    "files": [
      "/assets/**",
      "/fontawesome-webfont*",
      "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
    ]
  }
}
0
投票

我对 bootstrap-icons 也有类似的问题，并尝试将ignoreSearch属性设置为true，就像其他答案中提到的那样。 这对我不起作用。

当我在本地运行应用程序时，一切都按预期工作，但是当我构建并运行我的 docker 映像时，我的浏览器无法下载：

/bootstrap-icons.f41d849d445f6f5f.woff2?2820a3852bdb9a5832199cc61cec4e65

原来是docker镜像中nginx的配置问题：

server {
listen       80;
server_name  localhost;

#charset koi8-r;
#access_log  /var/log/nginx/host.access.log  main;

root /usr/share/nginx/html;
index index.html;
location / {   
    try_files $uri$args $uri$args/ /index.html;
}

#error_page  404              /404.html;

# redirect server error pages to the static page /50x.html
#
error_page   500 502 503 504  /50x.html;
location = /50x.html {
    root   /usr/share/nginx/html;
}
}

原来 $uri$args 将参数转换为路径的扩展：

/bootstrap-icons.f41d849d445f6f5f.woff2?2820a3852bdb9a5832199cc61cec4e65

将转换为：

/bootstrap-icons.f41d849d445f6f5f.woff2/2820a3852bdb9a5832199cc61cec4e65

更正后的配置为：

server {
listen       80;
server_name  localhost;

#charset koi8-r;
#access_log  /var/log/nginx/host.access.log  main;

root /usr/share/nginx/html;
index index.html;
location / {   
    try_files $uri $uri/ /index.html;
}

#error_page  404              /404.html;

# redirect server error pages to the static page /50x.html
#
error_page   500 502 503 504  /50x.html;
location = /50x.html {
    root   /usr/share/nginx/html;
}
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.