DEV Community

Cover image for Big BOMB! 💣 PWA, Service Worker and Push Notification in WebForms Core 2
Elanat Framework
Elanat Framework

Posted on

Big BOMB! 💣 PWA, Service Worker and Push Notification in WebForms Core 2

#serviceworker #pwa #news #webformscore

A major shift in server-side architectures

Finally, the promised day has come and it is time to introduce one of the most important key features in version 2 of the WebForms Core technology; the new Service Worker feature and the ability to manage it from the server is a revolutionary feature that will be offered in this technology.

WebForms Core 2 is a turning point in the evolution of server-side architectures; not a simple update, but a transformative platform that removes traditional limitations and opens a new path for developing web applications. This version, with a modern approach, combines server and client capabilities at an unprecedented level.

Service Worker features in WebForms Core

The combination of features such as PWA, Service Worker, Push Notification, and an innovative communication architecture elevates the experience of developing and running software to a new standard. At the heart of this evolution is the concept of "Server-Command / Client-Execution"; An approach that, unlike architectures like Blazor Server or SignalR-based UIs, instead of maintaining persistent state, directly executes server commands on the client—without the need to rebuild the UI.

The result is an incredibly fast, scalable, and simple system that once again shows that the old WebForms concept can be recreated and brought to the next level of today's technology.

Who would have thought that one day Microsoft's old WebForms would be reborn, this time by the Elanat team, and become one of the most advanced server-centric technologies based on modern web concepts?

🛠 Service Worker in WebForms Core – Full control from the server

Service Worker in version 2 is not just a side tool; it is a core part of the WebForms Core architecture.
In this structure, the server has complete control over what the Service Worker does:

  • What files should be cached
  • What paths should have what caching strategy
  • What files should be deleted
  • Which path's TTL should be changed
  • Which aliases should be connected to which paths
  • How push notifications should be handled

This means you have the first truly "server-centric" Service Worker system.

The new Service Worker:

  • It is completely Modular, Fast and Lightweight
  • It works without any external frameworks
  • It supports Static Cache, Dynamic Cache, TTL, Metadata Cache
  • It stores routes and aliases in IndexedDB
  • It supports Regex, wildcard and alias routing
  • It has a Built-in RPC for direct communication with the page
  • It has a built-in Push Notification with VAPID

This means you have a Service Worker at the level of libraries like Workbox—but with a much simpler API and full control over the server.

⭐ Most important features

  • Smart registration and full service worker management
  • Static pre-cache and dynamic cache with TTL
  • Routing system with support for Pattern, Regex and wildcard
  • Permanent storage of Route and Alias ​​in IndexedDB
  • Full support for Push Notification with VAPID
  • Two-way and secure RPC between page and SW
  • Full cache management (add/remove/has/list/clear)
  • Service Worker loading via Blob without external files
  • Simple, transparent and extensible design

📘 Server-side methods – full explanation

🔹 1) ServiceWorkerRegister()

Register and activate the Service Worker in the browser.

Arguments: None.

Example:

ServiceWorkerRegister();
Enter fullscreen mode Exit fullscreen mode

🔹 2) ServiceWorkerPreCacheStatic(string[] PathList)

Add files to the Static Cache.

Argument Description
PathList Array of paths to be PreCache

Example:

ServiceWorkerPreCacheStatic(new[]{ "/", "/styles.css", "/app.js" });
Enter fullscreen mode Exit fullscreen mode

🔹 3) ServiceWorkerDynamicCache(string Path, int Seconds = 0)

Store a path in the Dynamic Cache, with an optional TTL.

Argument Description
Path Target path
Seconds Time to Live (TTL)

Example:

ServiceWorkerDynamicCache("/api/products", 3600);
Enter fullscreen mode Exit fullscreen mode

🔹 4) ServiceWorkerDeleteDynamicCache()

Clears the Dynamic Cache completely.

Example:

ServiceWorkerDeleteDynamicCache();
Enter fullscreen mode Exit fullscreen mode

🔹 5) ServiceWorkerDeleteDynamicCache(string Path)

Deletes a specified path from the Dynamic Cache.

Argument Description
Path Target path

Example:

ServiceWorkerDeleteDynamicCache("/api/products");
Enter fullscreen mode Exit fullscreen mode

🔹 6) ServiceWorkerDynamicCacheTTLUpdate(string Path, int Seconds = 0)

Updates the TTL of routes in the Dynamic Cache.

Example:

ServiceWorkerDynamicCacheTTLUpdate("/api/products", 7200);
Enter fullscreen mode Exit fullscreen mode

🔹 7) ServiceWorkerRouteSet(string Path, string Type, bool CacheDynamic = false)

Defines a Route with a route pattern and a cache strategy.

Arguments Description
Path Path, wildcard or regex with re:
Type Cache strategy type
CacheDynamic Store successful network responses in the Dynamic Cache

Allowed strategies:

Type Description
cachefirst Cache first → then network
networkfirst Network first → then cache
cacheonly cache only
networkonly network only
stalerevalidate fast cache + background update

Example:

ServiceWorkerRouteSet("/images/*", "cachefirst", true);
Enter fullscreen mode Exit fullscreen mode

Regex:

ServiceWorkerRouteSet("re:^/api/v[0-9]+/.*$", "networkfirst", true);
Enter fullscreen mode Exit fullscreen mode

🔹 8) ServiceWorkerRouteAlias(string Path, string To)

Create an alias between routes.

Example:

ServiceWorkerRouteAlias("/content", "/");
Enter fullscreen mode Exit fullscreen mode

🔹 9) ServiceWorkerDeleteRoute()

Delete all Routes and Aliases.

Example:

ServiceWorkerDeleteRoute();
Enter fullscreen mode Exit fullscreen mode

🔹 10) ServiceWorkerDeleteRoute(string Path)

Delete only a specific route.

Example:

ServiceWorkerDeleteRoute("/images/*");
Enter fullscreen mode Exit fullscreen mode

⚙ Service Worker settings in WebFormsJS 

WebFormsOptions.RegisterServiceWorker = false;
WebFormsOptions.ReloadServiceWorkerIfNeed = true;
WebFormsOptions.ServiceWorkerStaticCacheAssets = ['/', "/index.html", "/styles.css", "/web-forms.js"];
WebFormsOptions.ServiceWorkerStaticCache = "sw-static-v1";
WebFormsOptions.ServiceWorkerDynamicCache = "sw-dynamic-v1";
WebFormsOptions.ServiceWorkerMetaCache = "sw-meta-v1";
WebFormsOptions.ServiceWorkerDefaultIcon = "/icon.png";
WebFormsOptions.ServiceWorkerDefaultBadge = "/badge.png";
WebFormsOptions.ServiceWorkerDefaultUrl = '/';
WebFormsOptions.UseServiceWorkerPush = false;
WebFormsOptions.UseServiceWorkerPushSubscribe = "/subscribe";
WebFormsOptions.ServiceWorkerPushVapidPublicKey = "...";
Enter fullscreen mode Exit fullscreen mode

Full description:

✔ RegisterServiceWorker
Enable/disable automatic registration of SW.

✔ ReloadServiceWorkerIfNeed
Reloads the page to activate the new SW version.

✔ StaticCacheAssets
Files that need to be PreCache.

✔ Static / Dynamic / Meta Cache
Names of three different Cache types.

✔ DefaultIcon / DefaultBadge / DefaultUrl
Push Notification Settings.

✔ UseServiceWorkerPush
Push Notification Enablement.

✔ UseServiceWorkerPushSubscribe
API Address for User Subscription Registration.

✔ ServiceWorkerPushVapidPublicKey
VAPID Public Key for Push.

🔥 Conclusion

WebForms Core version 2 offers developers a new level of control and power by introducing a server-based Service Worker. This feature puts WebForms Core in the category of advanced PWA and offline application tools and proves that a server-based architecture can also be modern, fast, scalable, and powerful.

Top comments (0)