Service worker and cache refresh

Bug Report or Feature Request (mark with an x)

- [x] bug report -

Versions.

@angular/cli: 1.3.0 node: 8.2.1 os: darwin x64

Repro steps.

Simply build project using service workers

Running the build using:

node --max_old_space_size=8192 /usr/local/lib/node_modules/@angular/cli/bin/ng build --app=0 --target=production --environment=prod --aot --build-optimizer

.angular-cli.json

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "project": {
        "name": "myproject",
        "ejected": false
    },
    "apps": [
        {
            "name": "frontend",
            "root": "src",
            "outDir": "dist",
            "assets": [
                "assets",
                "robots.txt",
                "manifest.json"
            ],
            "index": "index.html",
            "main": "app/main.ts",
            "polyfills": "app/polyfills.ts",
            "test": "app/test.ts",
            "tsconfig": "tsconfig.app.json",
            "testTsconfig": "tsconfig.spec.json",
            "prefix": "app",
            "serviceWorker": true,
            "styles": [
                "styles/styles.scss",
                "../node_modules/@covalent/core/common/platform.scss"
            ],
            "scripts": [
                "../node_modules/showdown/dist/showdown.js",
                "../node_modules/jspdf/dist/jspdf.min.js"
            ],
            "environmentSource": "config/parameters.ts",
            "environments": {
                "dev": "config/parameters.ts",
                "prod": "config/parameters.prod.ts",
                "staging": "config/parameters.staging.ts"
            }
        }
    ],
    "e2e": {
        "protractor": {
            "config": "./protractor.conf.js"
        }
    },
    "lint": [
        {
            "project": "src/tsconfig.app.json"
        },
        {
            "project": "src/tsconfig.spec.json"
        },
        {
            "project": "e2e/tsconfig.e2e.json"
        }
    ],
    "test": {
        "karma": {
            "config": "./karma.conf.js"
        }
    },
    "defaults": {
        "styleExt": "scss",
        "component": {
        },
        "build": {
            "showCircularDependencies": false
        }
    }
}

in the console, the output of this is:

Date: 2017-08-21T10:01:32.278Z
Hash: 4a298cb90a1cea5c4ba4
Time: 353974ms
chunk {0} 0.9d80268c246d06c5f0db.chunk.js (common) 156 kB {11}  [rendered]
chunk {1} 1.88647cb4e3f3f8ab2527.chunk.js () 56.7 kB {11}  [rendered]
chunk {2} 2.a9cb35ec243b68d2ec9c.chunk.js () 114 kB {11}  [rendered]
chunk {3} 3.587b8a8812213413a30f.chunk.js () 268 kB {11}  [rendered]
chunk {4} 4.dce719f9d5cc45682f01.chunk.js () 79 kB {11}  [rendered]
chunk {5} 5.49166274aa6f6f72258f.chunk.js () 1.42 MB {11}  [rendered]
chunk {6} 6.dac3f10592edccae94c9.chunk.js () 179 kB {11}  [rendered]
chunk {7} 7.5cf21e1787c86fa2eb1d.chunk.js () 245 kB {11}  [rendered]
chunk {8} 8.40b02f1b35a3d4f4b6a2.chunk.js () 50.8 kB {11}  [rendered]
chunk {9} 9.65fde0a1e65c51ea6f7a.chunk.js () 125 kB {11}  [rendered]
chunk {10} 10.0d74b5f9d3f7fafed7a8.chunk.js () 6.54 kB {11}  [rendered]
chunk {11} main.cd66a7678bfde111c5be.bundle.js (main) 3.11 MB {16} [initial] [rendered]
chunk {12} polyfills.219d855d40b508450449.bundle.js (polyfills) 62.4 kB {16} [initial] [rendered]
chunk {13} scripts.65fb92df79119a11f56b.bundle.js (scripts) 326 kB {16} [initial] [rendered]
chunk {14} styles.1574c8c3138d8bdf2de1.bundle.css (styles) 331 kB {16} [initial] [rendered]
chunk {15} sw-register.5600f4b658fa78cf31ca.bundle.js (sw-register) 242 bytes {16} [initial] [rendered]
chunk {16} inline.a5f4d3e611cdcb6d4b40.bundle.js (inline) 1.78 kB [entry] [rendered]

The log given by the failure.

No failure however old files being served.

Desired functionality.

It appears that the chunks are being properly hashed however browser cache holds on to the old file references which leads to the old version being served to the user.

Mention any other details that might be useful.

This happens on Chrome and Safari.

[hansl]

That’s what ServiceWorker does; better caching. Locally, you’ll have to clean your cache from your browser. On Chrome you can go to your developer tools, go to the Resources tab, and delete the service worker you have installed. It will reinstall when you reload the page but with the new page (hopefully). See https://www.chromium.org/blink/serviceworker/service-worker-faq for more info.

Service workers are a relatively new feature and we’re still working on better features to help developers work with them.

[jt-helsinki]

@hansl I think it is a problem when an application is updated and deployed yet the clients are unable to receive the update without pressing shift+F5? That simply not practical right?

This leads me to ask, is there an example implementation that I can compare against? Maybe I am doing something wrong? The hashes in the ngsw files are updating with new changes so my initial thought is that’s a programmer error rather than a problem with the CLI.

The best way to clear the cache needs to be done for every user and thus it is unrealistic to ask people to clear it out manually. My solution is to simply add this to the index.html.

<script>
        // temp service worker removal.
        if ('serviceWorker' in navigator) {
            navigator.serviceWorker.getRegistrations().then(function (registrations) {
                registrations.forEach((registration) => {
                    registration.unregister().then(function (register) {
                    // if boolean = true, unregister is successful
                    console.log(register);
                }).catch(function (error) {
                    // registration failed
                    console.log('Registration failed with ' + error);
                });
            });
            });
        }
    </script>