How to update content in PWA?

Question

Web development

I have a one page bootstrap site converted to PWA. The key element of the site is a regularly updated schedule of upcoming events for my clients from the database. But when I put the resulting PWA on a smartphone, the content of the site is cached and remains the same on the next opening from the smartphone, the schedule is not updated in this way.

The question is, in PWA, how can I force the content of 1 specific div to be updated every time I open it? Will it work with Ajax or something else? Don't kick too hard, just started learning PWA technology. Thank you!

UPD. I wrote in the service worker (sw.js) the caching strategy "network first - cache later". This is it?

self.addEventListener('fetch', function (event) {
 event.respondWith(
 fetch(event.request).catch(function() {
 return caches.match(event.request)
 })
 )
})

Answer 1

When the application starts, a GET request is sent for data in a convenient format, and the response is processed and displayed. If your schedule is generated by PHP, then it's more difficult. You can then just accept the layout at the front and output it.

fetch('rest-api-url.site.dom/schedules')
  .then(res => res.json())
  .then(res => state.setSchedules = res);