Question

我试图做到以下几点。

当我按照在线指南进行操作时，带有角度版本6和7的角度pwa可以正常工作。我创建了6或7的新ng应用程序。然后执行ng build --prod，然后转到dist文件夹并运行命令http-server -o，一切按预期进行。

但是，当我通过将本地IIS（带有谷歌浏览器接受的证书）应用程序放到我的ng dist文件夹中并浏览到https://localhost/test/pwatest时，该项目可以很好地运行我的清单json工作，并且ngsw worker是注册。但是当我离线时，轮胎就会出现。什么都没有得到。我确实在Google上搜索了很多东西，看到很多人遇到了这个问题，但是这个问题仍然存在。

manifest.json

{
    "name": "pwatest",
    "short_name": "pwatest",
    "theme_color": "#1976d2",
    "background_color": "#fafafa",
    "display": "standalone",
    "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"
    }]
}

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/**", "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"]
        }
    }]
}

通过执行审计的方式，它会显示失败：服务人员未成功提供清单的start_url，超时，等待获取的start_url。

Answer 1

您需要在 ngsw-config.json 文件中添加“ 数据组”数组。

在那方面，您必须提及要缓存响应数据的API端点URL。

样本 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/**"
      ]
    }
  }],
  "dataGroups": [{
    "name": "get-apis",
    "urls": [
      "https://jsonplaceholder.typicode.com/posts",
      "https://jsonplaceholder.typicode.com/comments",
    ],
    "cacheConfig": {
      "strategy" : "performance",
      "maxAge" : "1d",
      "maxSize" : 100
    }
  }
  ]
}

它将缓存来自两个api网址的数据，并在您离线时提供数据。

希望这对您有帮助...

脱机时，角度pwa在本地iis上不起作用

1 个答案: