SSR angular using Service Workers

[joejordanbrown]

🚀 Feature request

Description

Support for rendering Angular using Service Workers, then we can SSR Angular apps using Cloudflare Workers serverless functions.

I don't believe this is currently possible with Angular if it is I've not found any documentation in deploying and rendering the whole app in a service worker. I know it's easy to render with React to Service Workers using react-dom/server you can see an example on Cloudflare blog https://blog.cloudflare.com/serverless-pwa-react-cloudflare-workers/ and the source on GitHub https://github.com/cloudflare/workers-react-pwa-example.

Cloudflare Workers are not compatible with Node.js API, so we can't use Universal express or hapi rendering engines.

The Angular renderer that works in the browser should be compatible in some degree as long as it doesn't use window or document. I'm not sure if the Universal core rendering engine requires Node.js API's to function or if it's possible to run the runtime in a browser.

HTTP
Workers only supports fetch for HTTP requests, where Angular HttpClient I believe uses XMLHttpRequest and jsonp only.

Fetch would need to be integrated into HttpClient or requests intercepted to use fetch.

Build
The build would need a slight change from the one used when building the server.ts currently. It requires target: 'webworker' in the webpack config.

See Cloudflare Workers Wrangler webpack docs for examples.

Storage
Serverless doesn't have a filesystem to access. Cloudflare workers use a KV store,

Again because it doesn't support the Node.js API you don't have fs etc. The KV store is where you would store the dist/app-name/browser assets of the Angular app, you would import the @cloudflare/kv-asset-handler package which has methods to retrieve assets, for example, server.ts required dist/app-name/browser/index.html for use in the Universal engine.

---

I believe I have covered most of the differences when comparing Node.js vs Workers platform.

This universal render should focus on working with service/web workers and not specifically Cloudflare workers. There are other SaaS and open source serverless platforms that are looking to provide a service worker type serverless functions service because of the benefits it has over Node.js runtime. It also might be included in newer JavaScript runtime in the near future that would benefit from this for SSR.

If there's anything that I've overlooked, then please comment.

[alan-agius4]

Hi @joejordanbrown,

Thanks for going in such detail 👍

Side note: this is partially related to: angular/angular-cli#2305

[joejordanbrown]

Hi @alan-agius4,

I thought I'd try and accomplish this using CommonEngine but because that imports fs that isn't an option in the current architecture. I think extracting the CommonEngine into a BaseEngine class without any link to the runtime Node.js would allow us to extend or directly use the BaseEngine in our own ServiceWorkersEngine.

I'm still working through the Universal code base to make sure I understand how it all works. I have started to make the custom engine to test out the possibility and to see if anything else comes to light that I may have overlooked. The Angular CLI build now has @angular-devkit/build-angular adding target: "webworker" to the Webpack build process.

Regarding the angular/angular-cli#2305 post, I have already read every comment and couldn't find much traction on that, the feature request is from 2016. I've also scanned every single mention of web worker and service worker throughout the Angular issues without finding much regarding use of web workers to fully render the angular app. I know that @angular/platform-webworker is now deprecated with no mention of an alternative.

My assumption when I read the comment from @filipesilva angular/angular-cli#2305 (comment) was that https://angular.io/guide/web-worker was as far as Angular was willing to integrate Web Workers right now but I may be wrong.

I'll update this issue with any issues I come across.

[stewones]

Would love to see Angular moving forward on this. I'm currently having to use a Vue based solution to do SSR on Cloudflare

[gp187]

+1

[alan-agius4]

Let continue tracking this in angular/angular-cli#25718

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}