#Can't get the PWA example working offline

4 messages · Page 1 of 1 (latest)

shy igloo
#

Hi,
I've been trying to run a simple PWA example using Angular v19 following the steps in Angular website (https://angular.dev/ecosystem/service-workers/getting-started).

I run it locally in production mode
ng serve --configuration production

I can install the app, but I can't use it offline and I noticed that almost nothing is cached!

ngsw-config.json looks like this:

{
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.csr.html",
          "/index.html",
          "/manifest.webmanifest",
          "/*.css",
          "/*.js"
        ]
      }
    }

Service worker is running but no file in "Cash storage" from Chrome DevTool.

Can someone give some hints where to debug or what could be the possible issue?

Angular

The web development framework for building modern apps.

steel pebble
#

I can install the app, but I can't use it offline and I noticed that almost nothing is cached!
Define "almost nothing". What does get cached?

The above will cache your index.html, your manifest file, your css files and your js files, assuming they're directly under your domain (assuming you have no base-href, if you have one that might interfere with things, I'm not 100% certain on that) since that's the path you defined.

That's all this will cache. If you want to cache request-data of requests the user did before - look into datagroups.
If you want to cache additional assets, expand your asset group (either the same entry or a new entry depending on which cache policies you want).

Here the docs for that just in case: https://angular.dev/ecosystem/service-workers/config

shy igloo
#

Service worker file is cached but no html/css/js file.

When running offline, there is one error in console: Failed to load resource: the server responded with a status of 504 ()

I'm not using base-href either. At least I didn't change the code after creating a new project using ng new and I can't find any string in the project folder equal to base-href. The build result including index.html, manifest, etc. is stored in dist/<PRJ_NAME>/browser directory.

I also tried "/**/index.html" instead of/and in combination with "/index.html" in ngsq-config.json file and it didn't work either.

I tried a non-Angular PWA example with basic html/js files and I found one difference. In non-Angular case, the worker adds all files to the cache during install time. But in Angular version, I can't find where the files are added in ngsw-worker.js .

Angular worker implementation:

      this.scope.addEventListener("install", (event) => {
        event.waitUntil(this.scope.skipWaiting());
      });

Where non-Angular example which works for me:

self.addEventListener('install', (event) => {
    self.skipWaiting();
    event.waitUntil(
      caches.open('my-pwa-cache').then((cache) => {
        return cache.addAll([
          '/index.html',
          '/styles.css',
          '/favicon.ico',
          '/script.js',
          '/worker.js',
          '/manifest.json',
          '/icons/icon.png',
        ]);
      }).catch(e => console.error(e))
    );
});

Could this be the issue?

Thank you for your help 🙂

shy igloo