Building the PWA project

Question

I added PWA to the application in Angular

I built a project for production

When I run the application (on server), PWA does not work

Cache Storage is empty

What could be wrong?

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/*.css",
          "/*.js"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

dist/ (production)

Francesco · Answer 1 · 2019-11-02T15:37:26.147

1

I created a step by step article about creating a PWA project with Angular. You can follow it to see what is missing in your case. The article also features an Angular project in Github that you can use as starting point.

You need to have a service worker installed and running in order to be able to cache anything.

edited Nov 02 '19 at 15:37

answered Nov 02 '19 at 14:59

Francesco

9,947
7
67
110

According to the tutorial, just add `ng add @angular/pwa` and it should work. But it doesn't work – startNet Nov 02 '19 at 15:13
Can you post eventual errors or any further screenshot/code snippet that might help investigating the issue? Also keep in mind that you need a HTTPS connection for the SW to work. I would also suggest to compare your solution with the one I provided in Github (from the article) to see any differences. – Francesco Nov 02 '19 at 15:36
I think that it is problem 'Angular is running in the development mode. Call enableProdMode() to enable the production mode.'. Should be production if we have to use PWA. But I have all the settings done so I don't know why – startNet Nov 02 '19 at 15:43
I added image with `main.ts` – startNet Nov 02 '19 at 15:44
Are you sure you are serving the assets generated after the prod build into the /dist folder? Otherwise you should not see that message. You can also test your app locally using npm http-server or another web server (as ng serve does not work with service workers) and loading the files from the local /dist folder. – Francesco Nov 02 '19 at 15:49
I run this on server with HTTPS. I added image with errors from Chrome Debugger – startNet Nov 02 '19 at 15:54
The problem seems to be that you serve the dev build and not the prod build (created in /dist folder). You can verify this by opening the source tab in the Chrome Dev tools and verify the names of the files there. They should match 1:1 with the one created in the /dist folder. – Francesco Nov 02 '19 at 15:58
Could you verify that the served source files (through the Dev Tools Tab) are the same as the ones in the /dist folder? – Francesco Nov 04 '19 at 08:43

Building the PWA project

1 Answers1