Service Workers

Hey guys,

I’ve been exploring how progressive web apps and service work lately.
I was wondering if there’s any proper way to keep the service worker in the root folder of the project but manage it from webpack in order to be able to access the cachebursted names of the assets.

The only plugin I could find is this but it’s not quite doing the trick for me as it pushed the service worker into the assets folder, thus pushing it too far down the scope tree.

I currently ended up using a wildcard in the list of assets to store but it’s not ideal as I don’t want to fill the cache with assets that are not supposed to be there.

Ideas/Suggestions?
Cheers for the great job on the latest version of sage!! :heart:

I like the idea of integrating service workers into the workflow and letting it be handled using webpack.

Addy Osmani’s writings about Progressive Web Apps with React.js adds plenty to this discussion. In part 3, he referenced this project.

Hopefully this will be of some help to you.

Thanks for the reply!

I had a look into the plugin and looks promising but the issue I’m afraid will happen is that once you specify the public-path, the plugin actually pushes the sw.js file within the dist folder, thus pushing it too far down the scope tree.

Anyway, I’ll give it a try and will post here the results :slight_smile:

I finally had a chance to test the offline-plugin but unfortunately, like I thought in the beginning, the plugin sets the service-worker all the way down to the dist folder, making it almost useless since just the dist assets will be served by the worker only after the page has been requested from the server.
As far as I can tell, for now, the only solution is to cache everything manually and manually push the service worker in the web folder, unrelated to the other assets of the project!

1 Like