Posted on Feb 24, 2018

Efficient way to cache Google Fonts with Service Worker?

For as much as I know about PWAs and listened to talks about Service Workers, I haven't actually used them much (at all) beyond reading lots of documentation.

But with Google Fonts, they update the font all the time, and you could save anything from fonts.gstatic.com but that seems a little wasteful. Is there a better way?

Top comments (5)

Ben Halpern • Feb 24 '18

they update the font all the time

Do you need the latest update? How much could a single font change from day-to-day?

you could save anything from fonts.gstatic.com

No more inefficient than the browser cache itself right?

Meghan (she/her) • Feb 24 '18 • Edited

Yeah, I guess I was just worried about how long it might save the woff files, which would cause my app to have a lot of data cached because I don't know the policy on how long a file has to go unused for a browser to delete it.

Thanks for the response :)

Oleg Gromov • Feb 25 '18 • Edited

If I got your thought, this policy is simply an HTTP header. Look at Expires:

http head "https://fonts.gstatic.com/s/materialiconsextended/v34/iPCrlNN5TpNi9yeZKkKxX5ZJ3j3k35k5UVopKkfl5AGglnMp3_3A8V8Ai8YosRtX.woff2" HTTP/1.1 200 OK Accept-Ranges: bytes Access-Control-Allow-Origin: * Age: 203870 Alt-Svc: hq=":443"; ma=2592000; quic=51303431; quic=51303339; quic=51303338; quic=51303337; quic=51303335,quic=":443"; ma=2592000; v="41,39,38,37,35" Cache-Control: public, max-age=31536000 Content-Length: 62472 Content-Type: font/woff2 Date: Thu, 22 Feb 2018 22:59:16 GMT Expires: Fri, 22 Feb 2019 22:59:16 GMT Last-Modified: Mon, 29 Jan 2018 21:31:28 GMT Server: sffe Timing-Allow-Origin: * X-Content-Type-Options: nosniff X-XSS-Protection: 1; mode=block

Meghan (she/her) • Feb 25 '18

haha, would you look at that? totally forgot about Expires, thanks!

Oleg Gromov • Feb 25 '18

Glad if it helps! NP :-)