Angular 9 PWA social login redirects issue on start_url / index page

问题

I have angular application is running on Angular 9 with SSR & PWA. It runs on Heroku+ cloudflare.

When I try to login via Facebook/Google on the index page, the angular gives a request timeout error.

Example:

open index page, https://coursesity.com
perform social login
it redirects to https://coursesity.com/?token=avafafdaregasafag
the Angular gives a timeout error.
User can't login

But if I perform social login, with other pages that has URL+prefix, it works without any error.

example:

open https://coursesity.com/section/development
perform social login
it redirects to https://coursesity.com/section/development/?token=avafafdaregasafag
user login successful.

Before implementing PWA and service worker, it was working well.

What can be the problem here? especially for the index page.

ngsw-config.json

{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/*.html",
          "/*.css",
          "/*.js"
        ],
        "urls": [
          "https://fonts.googleapis.com/**"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }],
    "dataGroups": [
      {
        "name": "api",
        "urls": ["/api/**"],
        "cacheConfig": {
          "strategy": "freshness",
          "maxSize": 20,
          "maxAge": "1h",
          "timeout": "5s"
        }
      }
    ]
}

Manifest.json

  "name": "Coursesity",
  "short_name": "Coursesity",
  "description": "https://coursesity.com",
  "theme_color": "#5e5e9a",
  "background_color": "#FFFFFF",
  "display": "standalone",
  "scope": "/?utm_source=a2hs",
  "start_url": "/?ref=pwa",
  "icons": [
    {
      "src": "assets/images/favicon/logo-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "assets/images/favicon/logo-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "assets/images/favicon/logo-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

回答1:

From a quick look, this seems related to having SSR change index.html after the app has been built. You can infer this by the error seen in /ngsw/state (see here for more details on Angular SW debugging APIs):

Driver state: EXISTING_CLIENTS_ONLY (Degraded due to: Hash mismatch (cacheBustedFetchFromNetwork): https://coursesity.com/index.html: expected 4e46d6b5588a4b7358aa32d9240776f02de026c5, got 8c24eec826b40fd30b5c17973a851ffe2f65f4a8 (after cache busting)
Error: Hash mismatch (cacheBustedFetchFromNetwork): https://coursesity.com/index.html: expected 4e46d6b5588a4b7358aa32d9240776f02de026c5, got 8c24eec826b40fd30b5c17973a851ffe2f65f4a8 (after cache busting)
    at PrefetchAssetGroup.<anonymous> (https://coursesity.com/ngsw-worker.js:96:123)
    at Generator.next (<anonymous>)
    at fulfilled (https://coursesity.com/ngsw-worker.js:55:98))
Latest manifest hash: 59971a1ef1069cc04a945808cc5f4fc4a1e1a85b
Last update check: 3m31s602u

In a nutshell, the SW calculates hashes for all assets (i.e. files) after the build. These hashes are stored in ngsw.json (which is generated based on ngsw-config.json). When it fetches the files, it hashes them again and compare the actual hashes with the ones stored in ngsw.json.

If the hashes do not match, it knows it cannot trust its config and enters a degraded mode (where it does not serve new clients).

It sounds like the way you have set up building the app and SSR ends up modifying index.html after the SW has calculated its hash and stored it in ngsw.json.

A simple work-around could be re-building the SW manifest (ngsw.json) after you are done modifying index.html with the following command:

./node_modules/.bin/ngsw-config /path/to/dist/directory /path/to/ngsw-config.json

Lastly, let me say that (if you are using the Angular CLI) the default PWA and SSR setup should work out of the box. If that is not the case, I would be happy to take a closer look if you could provide a minimal reproduction (e.g. repo I can check and build to see the problem myself).

来源：https://stackoverflow.com/questions/66016452/angular-9-pwa-social-login-redirects-issue-on-start-url-index-page

标签

angular

heroku

progressive-web-apps

cloudflare