Angular 7 - Service Worker PWA + SSR not working on server

Question

I am struggling to make my Server Side Rendering and Service Worker cooperate on server Side.

Information regarding localhost -> Working

This is working as expected. The service worker works and updates my app on every update. Moreover; a curl localhost:8082 send me back my info.

I start my app with the following command : npm run ssr

 "ssr": "npm run build:ssr && npm run serve:ssr",
 "build:ssr": "npm run build:client-and-server-bundles",
 "serve:ssr": "node dist/server.js",
 "build:client-and-server-bundles": "ng build --prod && npm run webpack:server",
 "webpack:server": "webpack --config webpack.server.config.js --progress --colors"

Information regarding production: -> Not Working

Website is over HTTPS : https://airdropers.io Website process is running on a close port and has HAPROXY redirecting traffic from 443 to the port of the webserver

Issue visible on Webserver logs : Could not subscribe to notifications Error: Service workers are disabled or not supported by this browser

Extra info :

Node js on localhost and production are the same: v9.0.0 I build on production with the following process :

git pull
npm run build:ssr
pm2 start dist/server.js

UPDATE 23/02/2019

I have now a deeper understanding. My issue is that I start my SSR/PWA server with a node command such as "node dist/server.js".

From my understanding "node dist/server.js" is not working for Service Worker (PWA) I quote (https://angular.io/guide/service-worker-getting-started)

Because ng serve does not work with service workers, you must use a separate HTTP server to test your project locally. You can use any HTTP server. The example below uses the http-server package from npm. To reduce the possibility of conflicts and avoid serving stale content, test on a dedicated port and disable caching.

I can not launch is with http-server dist/browser because I will loose the SSR Capability.

How can I start my PWA / SSR Server ? What command shall I use?
What build shall I do?

UPDATE 24/02/2019

As mentioned by @Gökhan Kurt the service worker is not working properly with my SSR server. I need SSR for SEO and I need a service worker for Browser Push Notification. What solution do I have to handle Browser User Push Notification? A third party lib such as One Signals?

Any ideas suggestions are well welcomed to help me make that work. Thank you for support, Alex

It sounds like you need to gate the service worker install to not try to register in the node environment. — abraham, Feb 12 '19 at 19:58
What do you mean @abraham ? I am keen to follow any clue and idea possible. — aorfevre, Feb 12 '19 at 20:14
stupid question maybe... Does the connection need to be end-to-end in https for this to work? The reverse proxy terminates the SSL? — jcuypers, Feb 23 '19 at 01:39
I have now a deeper understanding of my issue. I will share updates now. — aorfevre, Feb 23 '19 at 22:27
@aorfevre can you put the complete solution for SSR for SEO support & PWA ? It will be very helpful. Can't find any other resource which explains this. — Keyul, Dec 27 '19 at 22:40

Gokhan Kurt · Accepted Answer · 2019-02-24T16:49:41.370

It is actually not related to your server at all. The problem is, service worker is tried to be registered on the server side, which is not supported. What you can do is make it so that service worker will register on client side.

I haven't tried but this just may work for you. You need to put a separate script in the end of body in index.html to run on browser:

  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/ngsw-worker.js');
    }
  </script>

Be aware that this will only give you the basic caching functionality of service worker and will probably not work for SwPush or SwUpdate. You can check how service worker module works internally here.

Another thing you should know is, 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.

And Caching all the pages is not a thing you want to do (unless page contents are static). Because a cached page will always show the same thing since you are not doing an XHR request on client side. For example if your home page is cached for a client, that client will always see the same page regardless of the intended dynamic content.

At this point you should consider why you want SSR and Web APP at the same time. If you need SSR for SEO, you don't need a SW. Just do SSR when the user agent is of a crawler, and serve dynamic angular when the client is a normal user.

How to switch request based on User Agent

This is my thought and I don't know if anyone is doing this. But theoretically, it should work.

Firstly, you will have to build your app to two different directories (DIST_FOLDER/ssr and DIST_FOLDER/csr in my example) with server-side and client-side rendering configurations. You may exclude SW from SSR. You can use SW in CSR as usual.

I found this package that can detect crawler/bot user agents. For express and Angular, you would use it like:

app.get('*', (req, res) => {
  var CrawlerDetector = new Crawler(req)

  // check the current visitor's useragent
  if (CrawlerDetector.isCrawler())
  {
    // render the index html at server side
    res.render(path.join(DIST_FOLDER, 'ssr', 'index.html'), { req });
  }
  else {
    // serve static index.html file built without SSR and let the client render it
    res.sendFile(path.join(DIST_FOLDER, 'csr', 'index.html'));
  }
});

After implementing this, you can debug your application to see if it works correctly by changing your user agent to one that is written here (i.e. use Postman).

Hi; sounds your answer makes totally sense and it seems that this is the cause of my issue. I need SSR for SEO and I need Service Worker for Notifications to browser. How would you suggest to do that? — aorfevre, Feb 24 '19 at 15:48
P.S: I will credit the 100 Bounty reward in a couple of hours; just want to trigger your attention on my last question on that point. — aorfevre, Feb 24 '19 at 15:49
@aorfevre Added aditional code showing how to handle the request. Let me know if this works for you as it may be useful for me in the future. For the bounty, reward it whenever you feel suitable. — Gokhan Kurt, Feb 24 '19 at 16:45
Your suggestion is having 2 servers, one for crawler That has ssr, one for client with pwa. If Yes I can handle That with the loadbalancer — aorfevre, Feb 24 '19 at 16:49
@aorfevre you can use the same server for both. The request you serve will change conditionally. If you are using a CDN with caching, this may be a problem and you may want to use 2 servers. Otherwise you can use the same server for both. — Gokhan Kurt, Feb 24 '19 at 16:51
Managed to do it with this package : https://github.com/binarykitchen/spider-detector — aorfevre, Feb 25 '19 at 14:33
Thank you, my day is a lot better now :), after a stressfull week of changing our (big) angular site to ssr this is by far the best solution. — Elger Mensonides, Oct 25 '19 at 10:38
@GökhanKurt what is the command to build app to two different directories? specially with SSR command. — Keyul, Dec 27 '19 at 22:34

score 1 · Answer 2 · answered Jan 21 '21 at 19:40

With a little "good-to-have" workaround to #13351 got this working on Angular 10 by quite little change in main.browser.ts

// Workaround for service worker, issue #13351.
document.addEventListener('DOMContentLoaded', () => {
  platformBrowserDynamic()
    .bootstrapModule(AppModule)
    .then(() => {
      if ('serviceWorker' in navigator && environment.production) {
        navigator.serviceWorker.register('./ngsw-worker.js');
      }
    })
    .catch((err) => console.error(err));
});

In the ngsw-config.json I've edited index to refer to index2.html instead of index.html. That's needed in my case to render SSR on Firebase/NestJS properly the root (/) path.

ngsw-config.json

{
  "$schema": "../../node_modules/@angular/service-worker/config/schema.json",      
  "index": "/index2.html",
  ...
}

When running with prod flag in the Chrome DevTools -> Application -> Service Workers can see it. View Page Source shows SSR. I can also add the install the application via Chrome on my desktop. In addition to that, the application works offline. Both, via mobile browser, and desktop app.

Can't why default mobile notification, i.e. Add to home screen isn't popping up.

score -1 · Answer 3 · answered Jun 18 '21 at 06:19

-1

When you Angular PWA (service worker) to Angular SSR project.

Kindly add "navigationURLs:[]" in your ngsw-config.json file

The below screen shot will bind SSR html on view source.

answered Jun 18 '21 at 06:19

NiKhil Kutewalla

93
7

This is not a solution. Because if you use an empty "navigationURLs" in your ngsw-config.json file, then nothing will be cached. – Kamran Taghaddos Jun 12 '22 at 14:33

Angular 7 - Service Worker PWA + SSR not working on server

3 Answers3

Linked