Question

我正在尝试使用Angular 6设置PWA，但无法使服务工作者离线提供内容。我花了几天的时间尝试了很多配置和东西，但没有成功。

服务人员似乎已注册，并且Chrome的“审核”标签中的灯塔通过了pwa测试。

我正在使用Contentful为该站点提供文本/资产。服务工作者正在从dataGroups中获取内容，但是当服务工作者正在进行获取时，它将返回204代码。我只能假设这会导致缓存存储为空。

但是话又说回来，我希望灯塔测试失败，因为它不能离线提供内容。我认为发生这种情况是因为只要会话未更改，页面就可以脱机工作。这意味着，如果我关闭网络连接，当我从一条路线导航到另一条路线时，它将起作用，但是如果我重新加载/打开新标签页/重新打开浏览器，它将失败并显示504代码。

我将Angular 6应用托管在本地IIS下。

index.html：

<base href="/servicemanager/">

web.config：

<?xml version="1.0" encoding="utf-8"?>
<configuration>

<system.webServer>
  <rewrite>
    <rules>
      <rule name="Angular Routes" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="/servicemanager/index.html" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

</configuration>

ngsw-config.json：

"dataGroups": [
{
  "name": "contentful-api",
  "urls": [
    "https://cdn.contentful.com/**"
  ],
  "cacheConfig": {
    "maxSize": 20,
    "maxAge": "1h",
    "timeout": "5s",
    "strategy": "freshness"
  }
}

]

像assetGroups一样，其余都是默认设置。

manifest.json：

    {
  "name": "Service Manager",
  "short_name": "ASM",
  "theme_color": "#03A753",
  "background_color": "#1b2a32",
  "display": "standalone",
  "scope": "/",
  "start_url": "/servicemanager/index.html",
  "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"
    }
  ]
}

生成的ngsw.json：

    {
  "configVersion": 1,
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "updateMode": "prefetch",
      "urls": [
        "/0.05ca3f943f64d55f5fa7.js",
        "/favicon.ico",
        "/index.html",
        "/main.053796e1e3924671dbee.js",
        "/polyfills.5fa68b41d92ab3b795c7.js",
        "/runtime.69ef21bf8bcc49e08c9e.js",
        "/scripts.64e0c48f62b83802d584.js",
        "/styles.e43a5292c1af99ea721e.css"
      ],
      "patterns": []
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "urls": [
        "/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"
      ],
      "patterns": []
    }
  ],
  "dataGroups": [
    {
      "name": "contentful-api",
      "patterns": [
        "https:\\/\\/cdn\\.contentful\\.com\\/spaces\\/MY-SPACE-ID\\/environments\\/master\\/entries\\?content_type=[^/]*[^/]*"
      ],
      "strategy": "freshness",
      "maxSize": 20,
      "maxAge": 3600000,
      "timeoutMs": 5000,
      "version": 1
    }
  ],
  "hashTable": {
    "/0.05ca3f943f64d55f5fa7.js": "dd54298a2e628e75609193708728c5712ced700c",
    "/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",
    "/favicon.ico": "64a8e578c637632445eb27146bdace22a0a67d3f",
    "/index.html": "25109496c7fb90a5405bfcfc6e9dd6cf58ec3944",
    "/main.053796e1e3924671dbee.js": "5c36b96118d14a3359f5ee1fa0e6364039800813",
    "/polyfills.5fa68b41d92ab3b795c7.js": "8bec897f2edb48724e3ee0be629023a4341f11fe",
    "/runtime.69ef21bf8bcc49e08c9e.js": "f8968c9729551f87114304197d9024d845442965",
    "/scripts.64e0c48f62b83802d584.js": "a5da6a77894682a4392ff3cf708be911dd595c12",
    "/styles.e43a5292c1af99ea721e.css": "d7f76e3762b515c48a214df68fea7775d5095085"
  },
  "navigationUrls": [
    {
      "positive": true,
      "regex": "^\\/.*$"
    },
    {
      "positive": false,
      "regex": "^\\/(?:.+\\/)?[^/]*\\.[^/]*$"
    },
    {
      "positive": false,
      "regex": "^\\/(?:.+\\/)?[^/]*__[^/]*$"
    },
    {
      "positive": false,
      "regex": "^\\/(?:.+\\/)?[^/]*__[^/]*\\/.*$"
    }
  ]
}

在我的app.component.ts构造函数中，我正在使用SwUpdate：

updates.available.subscribe(() => {
  updates.activateUpdate().then(() => {
    document.location.reload()
  })
})

我没主意了。我希望能够在刷新时或在打开新标签页/浏览器时重新加载页面。

如果任何具有更高服务工作者知识的人对我的工作有一些想法，我将不胜感激。

谢谢！

Angular 6 PWA服务工作者无法离线提供内容

0 个答案: