时间戳

首页 > 解决方案 > 为什么我的应用程序 pwa 不能离线工作？

angular - 为什么我的应用程序 pwa 不能离线工作？

问题描述

带有 pwa 的 Angular 10 应用程序，通过 firebase 托管进行部署

(1) 应用程序在线工作

(2) 应用一启动，我就断网，可以继续在页面之间浏览

(3) 一旦应用程序启动，我就切断了互联网。我刷新页面（F5）并遇到：HTTP ERROR 504

(4) 一旦应用程序启动。我安装应用程序。我通过它的图标运行它。该应用程序正在运行。我切断了互联网。我重新启动图标并：HTTP ERROR 504

但是，一旦安装或页面刷新，就可以离线启动应用程序，对吗？

ngsw-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",
          "/manifest.webmanifest",
          "/*.css",
          "/*.js"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

app.module.ts

...
  imports: [
    BrowserModule,
    AppRoutingModule,
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
  ],
...

我忘记了什么吗？

标签： angularprogressive-web-apps

解决方案

尝试将 PWA 注册策略更改为立即注册，使其立即在浏览器上注册。

 ServiceWorkerModule.register('ngsw-worker.js', { 
enabled: environment.production, registrationStrategy: "registerImmediately"  
})

推荐阅读