In the web app, it looks good since onSuccess gets called, but the only console log from the service worker I get is the one from initializing it. Somehow, it looks like listening for the periodicsync event is not working?
Test environment
I'm using Chrome Canary and the test site is in a subfolder which requires a login to access, but I added an exeption for the serviceworker file in the .htaccess so it should work.
<Files "serviceworker.js"> Satisfy Any Allow from all </Files> What I tried
- Using
navigator.serviceWorker.getRegistration(scope)to be sure to have the right service worker, but did not change anything - Checked whether there is a separate logfile for the service worker, but it does not seem that there is (using Chrome Canary):
- I added a fetch handler also for the test environment, such that the service worker now says
Fetch handler existence: EXISTS
What I successfully tried
- When I click on the Periodic sync button nearby the serevice worker in the inspector console within the Application tab (see screenshot above), the service worker gets the event and responds accordingly in the console. So somehow it works, but not together with the app?
app.js:
if('serviceWorker' in navigator) navigator.serviceWorker.register('serviceworker.js', { type: 'module' }); //... updateService(register, onSuccess){ if(!app.user.account) location.href = 'account'; navigator.permissions.query({ name: 'periodic-background-sync' }).then(status => { if(status.state !== 'granted'){ app.webApp.install(); return; } navigator.serviceWorker.ready.then(registration => { registration.periodicSync[register ? 'register' : 'unregister']('update-check', { minInterval: 60 * 1000 }).then(() => onSuccess()); }); }); } app.js (updated)
navigator.serviceWorker.getRegistration(window.scope) .then(registration => registration.periodicSync[register ? 'register' : 'unregister']('update-check', { minInterval: 12 * 60 * 60 * 1000 }) .then(() => onSuccess())) .catch(error => console.warn(error)) ; serviceworker.js:
console.log(self.registration.scope); self.addEventListener('periodicsync', event => { console.log('Periodic Sync', event); }); Service Worker Internals
Console output:
Background Sync Recording
The marked #4 was triggered manually by pressing the button in chrome inspector. This is the only event that actually was received by the service worker and "aknowledged" by a corresponding console output.
[ { "timestamp": 1754763977.265231, "origin": "https://matchflix.ch/", "serviceWorkerRegistrationId": "342", "service": "periodicBackgroundSync", "eventName": "Unregistered periodicsync", "instanceId": "follow", "eventMetadata": [], "storageKey": "https://matchflix.ch/" }, { "timestamp": 1754763978.698445, "origin": "https://matchflix.ch/", "serviceWorkerRegistrationId": "342", "service": "periodicBackgroundSync", "eventName": "Got next event delay", "instanceId": "follow", "eventMetadata": [ { "key": "Next Attempt Delay (ms)", "value": "43200000" } ], "storageKey": "https://matchflix.ch/" }, { "timestamp": 1754763978.698514, "origin": "https://matchflix.ch/", "serviceWorkerRegistrationId": "342", "service": "periodicBackgroundSync", "eventName": "Registered periodicsync", "instanceId": "follow", "eventMetadata": [ { "key": "minInterval", "value": "60000" } ], "storageKey": "https://matchflix.ch/" }, { "timestamp": 1754764007.257193, "origin": "https://matchflix.ch/", "serviceWorkerRegistrationId": "342", "service": "periodicBackgroundSync", "eventName": "Dispatched periodicsync event", "instanceId": "follow", "eventMetadata": [], "storageKey": "https://matchflix.ch/" } ]