Allow adding code to service worker

[alealpha2000]

I would love to add code to the service worker so I could add push notifications and get caching.

[senj]

Any update on this? This would be great, I also want to implement push notifications.

[AFM-Horizon]

Hi @alealpha2000 Did you mean you want a facility to add code to the javascript file? or a way to use a custom javascript file in place of the provided caching strategies?

[EmaGht]

@AFM-Horizon I'm not OP but I'd say both. The current implementation is enough for me but i have the strong feeling i will need to put my hands on the servcieworker code very soon... I think this feature is very important

[AFM-Horizon]

I think new strategies would be a cool idea and the strategy pattern used means it is relatively easy easy to implement! Whats lacking is a way to easily load a custom js strategy. I think this would also be easy enough to basically have a custom option that points to a .js file that has your own custom implementation. I'll have a look at this over the weekend and see if I can come up with a decent way to implement it.

[AFM-Horizon]

@alealpha2000 @senj @EmaGht I'm working on a fix now that will allow a custom service worker to be created in the project and then can be chosen as a "Custom strategy". This way people can copy the other strategies and make tweaks to them and then use their own version without trying to accomodate a plethora of different caching strategies. I'll put in a pull request in the next few days and keep you posted!

[EmaGht]

@AFM-Horizon Great news man! I'll be eager to try that out ;)

[AFM-Horizon]

@EmaGht @senj @alealpha2000 Pull request is in - #71 !!

[Budsy]

In Visual Studio I just duplicated this PWA project and added the new project to my solution. Then I could just add code to all the ServiceWorker/Files files. That way I added a web push notifications feature to my app. Worked like a charm. Of course this makes for duplication of code to some degree, but it solved things for my needs.

[AFM-Horizon]

@EmaGht @senj @alealpha2000

71 Is now merged in and available, customserviceworker.js can be created and a ignoreroutes config is available (only in customserviceworker!). Let me know if you have any issues!

[MaximeF33]

Hi @AFM-Horizon,

Thanks for adding the custom service worker!

The issue :

• I just have to ignore a specific route, with an ID in it : /test/{ID}... (note that it has to be ignored for all IDs)
• I've tried this as you mentioned but it's not working as expected (maybe I'm doing an error, but I tried to follow your instructions) :

In my appsettings.json : "pwa": { "cacheId": "Worker 1.1", "strategy": "cacheFirstSafe", "routesToPreCache": "/, /blog", "offlineRoute": "/offline", "registerServiceWorker": true, "registerWebmanifest": true }

In wwwroot I have created the customserviceworker.js with this text : (function () { var routesToIgnore = "/test/"; });

And in the test page I still have Pwa related code (webmanifest + ServiceWorker script). It's the same issue if I try var routesToIgnore = "/test/1" and check this particular ID.

NB : I've also tried to add this in startup.cs but I doesn't work : "services.AddProgressiveWebApp(new PwaOptions { RegisterServiceWorker = true, Strategy = ServiceWorkerStrategy.CustomStrategy, CustomServiceWorkerStrategyFileName = "customserviceworker.js"});"

Is there an issue or anything I'm not doing right ?

[AFM-Horizon]

@MaximeF33 Hi!. Sorry to hear it's not working out for you :( Just quickly looking through your issue I noticed that the appsettings.json has the strategy set to "cacheFirstSafe" is this right? Double check that this is set to use the custom service worker strategy.
Also ensure that you use the syntax in the read me var routesToIgnore = "{ignoreRoutes}"; with the curly braces exactly as in the example. If i remember correctly, this will not work if it is using single quotes or missing the curly braces.
Let me know how this goes. If these quick fixes don't work we will dig a little deeper and see if we can sort it out.
Thanks

[MaximeF33]

Thanks @AFM-Horizon for your quick reply! I've modified what you told me, and to make it simple, I have put code in the startup.cs (rather than appsettings.json) :

In startups.cs :

services.AddProgressiveWebApp(new PwaOptions { 
                Strategy = ServiceWorkerStrategy.CustomStrategy,
                RoutesToPreCache = "/, /blog",
                OfflineRoute = "/offline",
                CustomServiceWorkerStrategyFileName = "customserviceworker.js"
            });

and in wwwroot>customserviceworker.js I've just put :

(function () {
    var routesToIgnore = "{/test}";
});

And in the test page I still have Pwa related code (webmanifest + ServiceWorker script). It's the same issue if I try var routesToIgnore = "/test/1" and check this particular ID.

Thanks again for your help!

[AFM-Horizon]

Hi, Looking at the above startup file it looks like you haven't provided any routes to ignore! If you try this example as below:

public void ConfigureServices(IServiceCollection services)
 {
            services.AddControllersWithViews();
            services.AddProgressiveWebApp(new PwaOptions()
            {
                Strategy = ServiceWorkerStrategy.CustomStrategy, RoutesToPreCache = "/, /blog",
                OfflineRoute = "/offline",
                RoutesToIgnore = "/test, /other, /other/multiple/segments",
                CustomServiceWorkerStrategyFileName = "customserviceworker.js"
            });
    }

Then when you create your customserviceworker.js
(function () {
    var routesToIgnore = "{ignoreRoutes}";
    console.log(routesToIgnore);
});

notice the quotes and curly brackets, and the specific name "ignoreRoutes". This parameter is what the library is looking for and replaces it with your provided values from the startup file.

You can verify the routes are now available by using the chrome dev tools and inspecting the serviceworker

These routes are now available for you to use inside your custom java script logic to ignore when creating your caching strategy.
It's up to you how you want to implement this a guide to some service worker strategies form google: https://developers.google.com/web/fundamentals/primers/service-workers

Note: at this time the ignore routes are not available in any of the other caching strategies. I think this may be a useful addition in future I might look at adding this.

[MaximeF33]

@AFM-Horizon Thank you so much for your answer.

In fact I had tried this, but now I understand the real issue :

What I really want is to remove these line of code (that are generated automatically) :

• at the end of the html page : <script>'serviceWorker'in navigator&&navigator.serviceWorker.register('/serviceworker', { scope: '/' })</script>

• and in the :

<link rel="manifest" href="/manifest.webmanifest" />

As I send an email based on this html, I really need to remove these 2 lines on in this page.

I thought that the "RoutesToIgnore" would remove these lines, but now I understand that it doesn't.

Is there another way to remove these 2 lines of code for a specific page ?

Thank you so much!

[AFM-Horizon]

@MaximeF33 No worries glad to help. In your situation It might be useful to look at writing some sort of program to remove the unwanted elements with javascript prior to sending it. Hope you figure it out! Cheers