[JS] ServiceWorker voor offline web-app

[Arjan]

Mijn vraag
Ik wil graag een boodschappenlijstje maken met wat html en JS. Deze moet ook werken in offline mode.

Relevante software en hardware die ik gebruik
Safari / iOS

Wat ik al gevonden of geprobeerd heb
'Vroeger' kon ik dit oplossen met een manifest bestand, maar dat is niet hip meer.
Ter lering ende vermeack dacht ik dat dan maar eens op te lossen zoals de webdev mensen dat bedacht hadden, namelijk dmv. een serviceworker.

Nu is het gelukt er een te installeren en ik kan zelfs een message verzenden en zien wanneer een request langskomt. Wat echter niet lukt is simpelweg een eigen stukje content serveren.

code:

self.addEventListener(
    "fetch", 
    event =>
    {
        return e.respondWith(
            async function() 
            {
                return new Response(
                    "SPIJTIG",
                    {
                        status: 200,
                        statusText: 'Super gaaf',
                        headers: new Headers(
                            {
                                'Content-Type': 'text/html'
                            }
                        )
                    }
                )
            }
        )
    }
);

Ik geloof niet dat ik het serviceworker concept helemaal begrijp. Ik had verwacht dat ik met bovenstaande SW altijd een text file met daarin 'SPIJTIG' zou terugkrijgen als ik een fetch doe vanuit de browser. In plaats daarvan lijkt het nog steeds gewoon files te serveren, ongeacht mijn serviceworker. Wie kan mij op weg helpen?

alvast bedankt

[matthijsln]

Chrome geeft bij mij onderstaande fout in de console. Als de service worker een fout geeft wordt gewoon het request van internet gehaald, wat verklaart dat het lijkt of de fetch event handler niets doet.

The FetchEvent for "<url>" resulted in a network error response: an object that was not a Response was passed to respondWith().

Als ik even Safari probeer zie ik in de console het volgende:

FetchEvent.respondWith received an error: Returned response is null.

Om direct het probleem op te lossen kan je gewoon een Response meegeven aand respondWith():

JavaScript:

self.addEventListener("fetch", event => event.respondWith(new Response('test')));

Nou zou een async function ook altijd een Promise moeten returnen maar dat werkt dus niet, wel een beetje raar. Onderstaande varianten werken dan weer wel:

JavaScript:

event.respondWith(Promise.resolve(new Response('test')));

event.respondWith(new Promise(resolve => {
  resolve(new Response('test'));
})); 

Maar dit inderdaad niet, terwijl het als ik de documentatie over async functions lees toch equivalent moet zijn:

JavaScript:

event.respondWith(async () => {
  return new Response('test');
});

[ Voor 3% gewijzigd door matthijsln op 16-09-2021 11:46 ]

[matthijsln]

matthijsln schreef op donderdag 16 september 2021 @ 11:46:
Maar dit inderdaad niet, terwijl het als ik de documentatie over async functions lees toch equivalent moet zijn:

JavaScript:

event.respondWith(async () => {
  return new Response('test');
});

Dit is omdat de expressie "async () => ..." geen promise is maar een function, die pas een Promise teruggeeft als die uitgevoerd wordt. Maar in dit geval heeft het niet veel nut om onderstaande te doen natuurlijk.

JavaScript:

event.respondWith((async () => {
  return new Response('test');
})());

[Arjan]

Het debuggen van die serviceworkers is wel een verhaal apart... vooral omdat je altijd 1 versie achterloopt.
dank voor je hulp @matthijsln !

[matthijsln]

Service workers zijn inderdaad niet eenvoudig. Met Chrome heb je in de developer tools de optie om je service worker te verversen bij een page reload, dat helpt enorm! En op de "Application" tab kan je informatie zien over service workers.