0

In my Angular 8 project, I've integrated PWA, SSR and service workers.

When I run the project in local using this command: npm run build:ssr && npm run serve:ssr, I face the following issues:

  1. API url, images are not cached. If I run in offline mode, they are not shown.
  2. Homepage loads fine. But when I navigate to any other page, it shows all HTTP calls as pending.

enter image description here

ngsw-config.json

"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)"
    ],
    "urls": [
      "https://fonts.googleapis.com/**"
    ]
  }
 }
],
"dataGroups": [
{
  "name": "api-performance",
  "urls": [
    "/api/siteInfo/home_carousel",
    "/api/siteInfo/categories",
    "/api/siteInfo/testimonials",
    "/api/siteInfo/footer",
    "/api/siteInfo/contact",
    "/api/gallery/fetch",        
    "/api/offer/fetch",
    "/api/offer/check",
    "https://maps.gstatic.com/**"
  ],
  "cacheConfig": {
    "strategy": "performance",
    "maxAge": "1h",
    "maxSize": 100,
    "timeout": "5s"
  }
 }    
]

After build, this is the generated ngsw.json file content:

"dataGroups": [
{
  "name": "api-performance",
  "patterns": [
    "\\/api\\/siteInfo\\/home_carousel",
    "\\/api\\/siteInfo\\/categories",
    "\\/api\\/siteInfo\\/testimonials",
    "\\/api\\/siteInfo\\/footer",
    "\\/api\\/siteInfo\\/contact",
    "\\/api\\/gallery\\/fetch",
    "\\/api\\/offer\\/fetch",
    "\\/api\\/offer\\/check",
    "https:\\/\\/maps\\.gstatic\\.com\\/.*"
  ],
  "strategy": "performance",
  "maxSize": 100,
  "maxAge": 3600000,
  "timeoutMs": 5000,
  "version": 1
 }
],

Note: There's nothing wrong with the testimonial or other url because when I do ng serve all http calls are made correctly with 200 status.

Indrasis Datta
  • 8,692
  • 2
  • 14
  • 32
  • I had a similar situation but only in production, as in your case running locally worked well, but this explanation worked perfectly well for me and today I ran a production copy locally and it happened again so this must be the fact. [Angular service worker prerequisites](https://angular.io/guide/service-worker-intro#prerequisites) – Sparker73 Jan 01 '20 at 00:56

1 Answers1

1

If the response providing the images is not cached, it means the SW cannot match the request URL. Is the API URL for testimonials correct as defined in the dataGroups?

You can also check the generated ngsw.json file to see what is the effective targeted URL.

However why do you want to use SSR and service worker? You would lose the benefits of client caching this way and most probably this is the reason why some routes are not cached.

You should have a look at another SO answer that addresses exactly your issue:

Service workers are actually not suitable for SSR apps. The generated ngsw.json file will not include all the pages you have. You will have to either modify this file manually or serve it not as a static file but create it dynamically.

I also found another article describing a possible solution for PWA and SSR, event though the described solution does not use Angular directly. It might still be useful to provide you further insights.

Francesco
  • 9,947
  • 7
  • 67
  • 110