madskristensen / WebEssentials.AspNetCore.ServiceWorker

Other
339 stars 61 forks source link

Added support for CustomStrategy and Added IgnoreRoutes Option. #71

Closed AFM-Horizon closed 4 years ago

AFM-Horizon commented 4 years ago

Hi Mads and Team, I have added in support for a CustomStrategy. This strategy is user defined through a customserviceworker.js file and allows users to create the file and supply whatever behaviour they desire.
I implemented this as I have noticed many requests to add various features to the different caching strategies and thought that this would be a more manageable alternative.

I have also added in a IgnoreRoutes option that allows users to define a list of routes that they dont want cached or want to treat differently. Please note that I have not changed any of the existing strategies, I have only supplied the option so that it can be used in the CustomStrategy and potentially in future updates if this behaviour should need to be added to a new caching strategy etc in fututre.

Please let me know if there are any issues or changes you would like to see!

Regards Alex

N.B - The Json schema is out of date (it is missing a few of the newer features) and needs to be updated to reflect this. (currently it throws validation errors however they can be ignored as you know)

dmanter commented 4 years ago

I added a customserviceworker.js file with this code self.addEventListener('sync', function (event) { console.log("Sync"); if (event.tag == 'myFirstSync') { event.waitUntil(doSomeStuff()); } }); But in Chrome when I look at the service workers under application and hit the Sync button nothing happens. What am I doing wrong? Thanks! Sync

AFM-Horizon commented 4 years ago

@dmanter Hi!, Have you cloned my fork of the project? This functionality has not been accepted into the main branch as of yet. It won't be available in the nuget package if you are using that! Apologies

dmanter commented 4 years ago

No – I did not. But I am having so many other issues, I am at a bit of a loss. The Nuget package service worker and manifest are giving me errors with .Net Core 3 I get a message saying the manifest has an error at line 2 col 1 but if I tell the code to not register the manifest and I put in the registration the manifest is fine. I get an Chrome: [cid:image001.png@01D637F5.B6FD7F30] And googling says there is an error in the service worker code. Can’t figure out how to get debugger to work to track that down. After days of trying to get this to work, just stumbling.

Manifest checks out AOK in json parser so not sure what or how to get things right. I found stuff about putting this in my web.config

And this in my startup.cs FileExtensionContentTypeProvider provider = new FileExtensionContentTypeProvider(); provider.Mappings[".webmanifest"] = "application/manifest+json";

        app.UseStaticFiles(new StaticFileOptions()
        {
            ContentTypeProvider = provider
        });

But neither solve the issue of the manifest error when I go back and set services.AddProgressiveWebApp(new PwaOptions { RegisterServiceWorker = true, RegisterWebmanifest = true }); ;

If you have any ideas, I am all ears. Did try unregister service worker in chrome but no help.

Thanks Doug Manter

Douglas Manter, CTO, Founder


SMSTurbo® Creative Information Systems Main: (603) 627-4144 www.creativeinfo.nethttp://www.creativeinfo.net/

{ "name": "SMS OLP", "short_name": "SMS OLP", "theme_color": "#2196f3", "background_color": "#2196f3", "display": "standalone", "orientation": "portrait", "Scope": "/", "start_url": "/", "icons": [ { "src": "images/icon-72x72.png", "sizes": "72x72", "type": "image/png" }, { "src": "images/icon-96x96.png", "sizes": "96x96", "type": "image/png" }, { "src": "images/icon-128x128.png", "sizes": "128x128", "type": "image/png" }, { "src": "images/icon-144x144.png", "sizes": "144x144", "type": "image/png" }, { "src": "images/icon-152x152.png", "sizes": "152x152", "type": "image/png" }, { "src": "images/icon-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "images/icon-384x384.png", "sizes": "384x384", "type": "image/png" }, { "src": "images/icon-512x512.png", "sizes": "512x512", "type": "image/png" } ], "splash_pages": null }

From: AFMHorizon notifications@github.com Sent: Saturday, May 30, 2020 6:57 AM To: madskristensen/WebEssentials.AspNetCore.ServiceWorker WebEssentials.AspNetCore.ServiceWorker@noreply.github.com Cc: Douglas Manter dmanter@creativeinfo.net; Mention mention@noreply.github.com Subject: Re: [madskristensen/WebEssentials.AspNetCore.ServiceWorker] Added support for CustomStrategy and Added IgnoreRoutes Option. (#71)

@dmanterhttps://github.com/dmanter Hi!, Have you cloned my fork of the project? This functionality has not been accepted into the main branch as of yet. It won't be available in the nuget package if you are using that! Apologies

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/madskristensen/WebEssentials.AspNetCore.ServiceWorker/pull/71#issuecomment-636314278, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AA2VPISPKC3NYJHY5ESE3YDRUDQ6XANCNFSM4KQ35X5Q.

AFM-Horizon commented 4 years ago

@dmanter Is your manifest json file formatted like the one shown in the Readme? make sure it is at the root (not in any folders) and named correctly and just try using the example one from the readme in your app for testing. (also make sure it references the two image icons required 512X512 and 192X192).
I haven't had any issues with the manifest while following these instructions so just double check that again.

In response to your error in the service worker from chrome. If it is with the cache.addAll or cache.put being undefined there is a known bug causing this issue https://stackoverflow.com/questions/46375466/cache-in-service-worker-is-undefined Try running the app in Firefox and see if the issue persists.

Just to reiterate there is no functionality available to edit or change the java script files that provide the underlying cache strategies at this point. If you need this functionality I would recommend either forking the repo and making the changes you require (It is not really super complex and is pretty well organized!) or you can try forking my branch and creating a customserviceworker. (you will obviously need to host the nuget package yourself or run it in your project)

Let me know how you go!

dmanter commented 4 years ago

Same issue with manifest from readme. (Had to correct the images folder location.) I reset Chrome settings, cleared all history/data/etc Made sure the lines in my _Layout page for registering the manifest.json and the service worker have been commented out and reset the Startup.cs to tell the dll to add those lines which it does do. The only weird thing is the manifest line is not showing as manifest.json but manifest.webmanifest. When I register the manifest manually but setting services.AddProgressiveWebApp(new PwaOptions { RegisterServiceWorker = true, RegisterWebmanifest = false }); ; And use The error goes away but I get the “Uncaught” error. If I add this line and also copy the service worker code into a sw.js file all works ok.

I just got a book from O’Reilly Building Progressive Web Apps – maybe it will help if I start from scratch without nuget and learn how all this actually works. The weird thing is basically it works but only if I manually register.

Any other ideas appreciated!

Thanks Doug

[cid:image001.png@01D63823.F28FF5E0] [cid:image003.png@01D63824.4A9364C0]

FireFox gives me after enabling History and keep cookies and such [cid:image002.png@01D63823.F28FF5E0]

From: AFMHorizon notifications@github.com Sent: Monday, June 1, 2020 11:06 AM To: madskristensen/WebEssentials.AspNetCore.ServiceWorker WebEssentials.AspNetCore.ServiceWorker@noreply.github.com Cc: Douglas Manter dmanter@creativeinfo.net; Mention mention@noreply.github.com Subject: Re: [madskristensen/WebEssentials.AspNetCore.ServiceWorker] Added support for CustomStrategy and Added IgnoreRoutes Option. (#71)

@dmanterhttps://github.com/dmanter Is your manifest json file formatted like the one shown in the Readme? make sure it is at the root (not in any folders) and named correctly and just try using the example one from the readme in your app for testing. (also make sure it references the two image icons required 512X512 and 192X192). I haven't had any issues with the manifest while following these instructions so just double check that again.

In response to your error in the service worker from chrome. If it is with the cache.addAll or cache.put being undefined there is a known bug causing this issue https://stackoverflow.com/questions/46375466/cache-in-service-worker-is-undefined Try running the app in Firefox and see if the issue persists.

Just to reiterate there is no functionality available to edit or change the java script files that provide the underlying cache strategies at this point. If you need this functionality I would recommend either forking the repo and making the changes you require (It is not really super complex and is pretty well organized!) or you can try forking my branch and creating a customserviceworker. (you will obviously need to host the nuget package yourself or run it in your project)

Let me know how you go!

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/madskristensen/WebEssentials.AspNetCore.ServiceWorker/pull/71#issuecomment-636911703, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AA2VPIR4QM3RSXG4BO7W7UTRUO7XLANCNFSM4KQ35X5Q.

AFM-Horizon commented 4 years ago

@dmanter Sorry to hear it's still happening! I'm not sure what else to suggest. :(
Creating your own P.W.A App is not overly difficult! The only requirements as such are the manifest, service worker, Icons and HTTPS I believe. Most of the complicated parts in this project are configuration settings and file imports as well as the caching strategies. Again these are easy to find online on google and firefox etc and are standard strategies.
Good luck with your learning I'm sure you will find it to be quite an easy option building it yourself and building in the functionality you require as you go!

dmanter commented 4 years ago

Right and thanks for your time and help!

Doug

From: AFMHorizon notifications@github.com Sent: Tuesday, June 2, 2020 9:33 AM To: madskristensen/WebEssentials.AspNetCore.ServiceWorker WebEssentials.AspNetCore.ServiceWorker@noreply.github.com Cc: Douglas Manter dmanter@creativeinfo.net; Mention mention@noreply.github.com Subject: Re: [madskristensen/WebEssentials.AspNetCore.ServiceWorker] Added support for CustomStrategy and Added IgnoreRoutes Option. (#71)

@dmanterhttps://github.com/dmanter Sorry to hear it's still happening! I'm not sure what else to suggest. :( Creating your own P.W.A App is not overly difficult! The only requirements as such are the manifest, service worker, Icons and HTTPS I believe. Most of the complicated parts in this project are configuration settings and file imports as well as the caching strategies. Again these are easy to find online on google and firefox etc and are standard strategies. Good luck with your learning I'm sure you will find it to be an easy option building it yourself and building in the functionality you require as you go.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/madskristensen/WebEssentials.AspNetCore.ServiceWorker/pull/71#issuecomment-637545011, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AA2VPIQREY2X3BBSKFBJGKDRUT5QRANCNFSM4KQ35X5Q.

madskristensen commented 4 years ago

Thanks

madskristensen commented 4 years ago

A new version containing this feature will be available on NuGet within the next 30 minutes

AFM-Horizon commented 4 years ago

Great! Thanks for the merge! I'll keep an eye out for any issues reoprted with the changes moving forwards.