Angular PWA 哈希文件缓存问题

Question

It seems that after a fresh build with azure that my PWA is serving the wrong files

Here is my runtime.*.js after a new build

as you can see the runtime.*.js is being served as my html document??

then after a hard refresh

its the correct file...

Now I know the service worker caches the bundled files.. but why would it change the file to be a html document after a new azure build??

This is my ngsw-config.json

{
    "index": "/index.html",
    "assetGroups": [
        {
            "name": "app",
            "installMode": "prefetch",
            "resources": {
                "files": ["/favicon.ico", "/index.html", "/manifest.json", "/*.bundle.css", "/*.bundle.js", "/*.chunk.js"]
            }
        },
        {
            "name": "assets",
            "installMode": "lazy",
            "updateMode": "prefetch",
            "resources": {
                "files": ["/assets/**", "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"]
            }
        }
    ]
}

Which I have taken from numerous tutorials on how to correctly set up an Angular PWA.

I found this article https://blog.ailon.org/quick-tip-pwa-manifest-and-azure-dd16664a3f43 and it tells you that azure incorrectly serves .json files and to remedy this you can do the following in you web.config

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json" />
    </staticContent>
    <!-- IIS URL Rewrite for Angular routes -->
    <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" />
            <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

but I am still getting this happen on every new build from azure

What am I doing wrong? Is this the service worker? or is it a problem with azure?

This is my azure pipeline

and this is my release pipeline

How can I solve this issue??

Any help would be appreciated!

Answer 1

In The Begining there was Hash

A user clicks on home link of your SPA.

Angular served pages as site.com/#/home . This was fine as a path. The part after # is never sent to the server. Angular router could read from UrL what route and component to serve.

The Change UseHashingStrategy : false

Then, Angular said we will use site.com/home as the path. Instead of direct request to server for file /home angular intercepts it and serves the component. But for this to work Angular router has to be loaded first. Otherwise anyone trying to open site.com/home directly would get a 404.

To fix this Angular suggests fallback to index.html by path rewriting on server. In response for pages ( /home ) a 404 candidate, serve the index file so that router can be loaded first and then serve the correct page.

The rewrite rules of your webconfig file is doing just that. After deployment, when html page requests for runtime*.js file, Azure is serving the index.html file....

This means Azure could not find the file runtime*.js on server. You got fall back index.html

Hope this provides some clue on where to dig next. My guess is, post deployment when you open index.html it is loaded from cache. Having link to old js file. So, a request for runtime*(old_version)*.js (now deleted after deployment) gives you the fallback file.