Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to SSR on specific routes on angular-universal? [duplicate]

I used @angular/service-worker to generate SW for an angular4 web app. after updating the ngsw-manifest.json to handle dynamic request from the server I get "Status Code:503 OK (from ServiceWorker)" when offline (after first loading).

Any thoughts?

like image 691
Tomer Kohn Avatar asked Jun 05 '17 14:06

Tomer Kohn


People also ask

What is SSR Angular universal?

Angular Universal executes on the server, generating static application pages that later get bootstrapped on the client. This means that the application generally renders more quickly, giving users a chance to view the application layout before it becomes fully interactive.

Does Angular Do SSR?

Angular Interview Q & A seriesServer side Rendering (SSR) is a modern technique to convert a Single Page Application (SPA) running in the browser into a server based application. Usually, in SPA, the server returns a simple index. html file with the reference to the JavaScript based SPA app.

What is Prerender in Angular?

Angular Universal lets you prerender the pages of your application. Prerendering is the process where a dynamic page is processed at build time generating static HTML.

Is Angular client-side rendering or server-side rendering?

Angular Universal executes on the server-side by generating static pages and later are sent to the client browser for display. Thus, Angular Universal renders the app more quickly and allows users to view the application's layout.


2 Answers

your problem is related with [Content Security Policy (CSP)] configuration on your web server or proxy nginx. Due you are connecting properly with nginx, the PWA offline feature is not enabled in your browser.

read more on (https://content-security-policy.com/).

like image 54
farokh veician Avatar answered Sep 19 '22 17:09

farokh veician


The performance strategy works (you can try this strategy), the caveat being dynamic content is only cached on the second page load due to async nature of the service worker. In your ngsw-config.json:

      "cacheConfig": {
        "strategy": "performance",
        "maxSize": 100,
        "maxAge": "3d"
}

By default, files that are fetched at runtime are not cached, but by creating a dynamic cache group, matching files that are fetched by the Service Worker will also be cached. Choosing optimizeFor setting of performance will always serve from the cache first, and then attempt to cache any updates. Choosing freshness means that the Service Worker will attempt to access the file via the network, and if the network fails, then it will serve the cached copy.

like image 44
ferralucho Avatar answered Sep 22 '22 17:09

ferralucho