Angular PWA doesn't update in production

a 夏天 提交于 2020-04-14 07:25:08

问题


I have a PWA in Angular 8. I have added $ ng add @angular/pwa, and the PWA functionality seems to work, accept for this problem: when I push a new build to production, the app is not updated on people's browsers (tested on Chrome and mobile Safari).

Instead, when a user opens their browser to go to the app, he/she will see the previous (non-updated) version of the app that was previously on their browser.

They will only see the newer version if they refresh the page. No errors are shown.

I push to production using $ ng build --prod, and then insert the build into AWS Amplify.

The app should always update to the newest build when a user opens it in a browser. That is not happening.

I have seen discussion of this on Stack Overflow from the last few years, such as here and here. But these questions don't have accepted answers, and the advice given are about implementing workarounds.

What is the solution to this issue?


In my case, the app is being iterated a lot, and it pulls a lot of local assets. So a user still seeing a build from a week ago is a significant issue. I am hoping this is not the expected behavior--bc that is a big drawback to PWA functionality if it is.

In the Angular docs there is some discussion of "updateMode", but it looks to me like my settings are already in place to work properly, but the issue remains. Here is my 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)"
        ]
      }
    }
  ]
}

来源:https://stackoverflow.com/questions/60867977/angular-pwa-doesnt-update-in-production

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!