live example https://swsr.it/

Service Worker Side Rendering

This is a project template for SWSR apps. It lives at https://github.com/amemifra/swsr.

To create a new project based on this template using degit:

npx degit amemifra/swsr serviceworker-rendering
cd serviceworker-rendering

Note that you will need to have Node.js installed.

Get started

Install the dependencies...

cd serviceworker-rendering
npm install

...then build with Rollup:

npm run build

...then serve with Sirv:

npm start

Navigate to localhost:5000. You should see your app running.

How it works

SWSR is based on Svelte component and Vanilla Javascript. It use Svelte as component compiler and a rendering based on Vanilla Javascript.

It implement the YAGNI Extreme programming paradigm into DOM. It just render what we need and anthing else.

In index.html is instantiate into navigator.serviceWorker render.js the render engine of the application.

This solution code is a PoC of a render system based on service worker dynamic creation of http response (a PHP rendering idea into the sw).

When the render sw is installed it caches the static files of the svelte components compiled. On a navigate request it create JiT a html response with an html content based on the request url. It also checked each fetch function to retrurn cached files.