Where can I find someone that has successfully implemented CF Service Workers on a Wordpress site? Anyone here open to helping (paid) implement this?
I’m hoping there’s a lot of interest in this, as I have a handful of Wordpress sites.
What are you trying to get Workers to do?
Ideally run near 100% on the edge nodes with the proper exceptions for login and membership sites.
With Workers limited to 1 megabyte, and seemingly text-only, it’s going to have to pull images and some other files from somewhere. From Cloudflare cache, I suppose, so your server rarely gets hit.
The more I think about it, the less I see it working. Content comes from a database. Cache Everything kind of handles this.
I can only see Workers being viable if you have Cache Everything, and then use Workers to bypass the cache for the login and logged in users.
This is one of the posts that encouraged me to look into it https://serverless.com/blog/serverless-wordpress-hosting-with-shifter/
@pmeenan Here was my request that I believe you are in the process of solving with the release of the apps for workers that use fonts. Looking forward to more and more around the workers. https://blog.Cloudflare.com/fast-google-fonts-with-Cloudflare-workers/
An idea would be to have the wordpress core done via workers
I don’t know about WordPress core itself but the worker I’m planning on tackling this week is to do automatic edge-caching for WordPress HTML for unauthenticated users (and automatic purging when logged-in users make edits). Basically something like “Cache Everything” with the cookie-bypass and plugin-based purging but all automatically handled in a worker.
It will probably be a spot-solution for caching but it wouldn’t be too hard to pull the fonts worker and another worker that cache-extends and proxies 3rd-party static scripts together into a WordPress optimization worker that does a bunch of things.
And then I will build a shrine dedicated to you.
The edge-caching worker is ready: https://github.com/Cloudflare/worker-examples/tree/master/examples/edge-cache-html
It has a plugin to go with it (trivial but needed to detect content changes cleanly). It is stand-alone right now so won’t work with the fonts worker or other workers yet. Later this week I should have it integrated into the combined worker that includes other optimizations as well: https://github.com/pmeenan/cf-workers
should I wait for the others to be integrated or implement this as is and then it will update to include the fonts worker?
No need to “Add” in that UI I guess, just paste it in directly.
If you aren’t already using the other workers I’d recommend just going ahead and starting with this one and then pull in the others when it’s all integrated (if you have a use for the added functionality).
I’ve already begun construction of a shrine in my front yard. It has snowflakes and colored lights. Now all I need is a large framed picture of you.
So…how can we tell if it’s working? I currently have a Cache Everything page rule (no Edge Cache TTL defined), so I’m already seeing cf-cache-status headers. I now see the following from Private Browsing.
Try visiting in an incognito window or run some tests from WebPageTest. You should see a status of Hit.
Bypass means it bypassed the cache because you’re logged-in. The “cached” shouldn’t happen on a bypass so I’ll take a look and update the worker.
Ahh, sorry - “Bypass Cookie” is when you are logged in. There is logic to “Bypass” the cache if someone reloads the page (browser sends a cache-control header). Same thing happens if you use dev tools and “disable cache” is checked. Try unchecking the “disable cache” checkbox. Also, inspect it by navigating to pages on the site, not by reloading the page (otherwise it will kick-in the bypass logic as well).
I’m tinkering around and it’s looking better.
I find it interesting that on first visit, there’s no cf-cache-status header. Pretty cool, actually, that it becomes something that should be held in cache.
Depending on the site design, you can do a lot of optimization. The basic JS/CSS will be cached automatically (if the origin is set the cache headers correctly, I assume many standard plugins would).
If the significant number of users visiting the site is new users, then you can just check the presence of a session cookie. If no cookie, return static page, else go to the origin. (I am not sure if wordpress automatically adds a session cookie. For my site (not blog) I use Express with node, that adds ‘connect.sid’ cookie for all users)
When a user logs in, set a cookie with the login status. Then you can access the cookie to get the status. (For blogs, you are not exposing any sensitive information, So you may be able to just set even account name.)
If you want to include more sensitive information, then you can set a cookie with the JWT token that is encrypted and signed. This will need a little bit of changes to your workflow. You will have the use Node NPM modules and use webpack to package to a single JS file. In the worker, the code is still trivial, you can use jsonwebtoken NPM module to decrypt.
Last month, I talked about Cloudflare Worker in ATX Serverless meetup that included these optimizations.
I’m trying to get a handle on how “Cache Everything” works. I haven’t combed through your code, but my theory is:
If you enable Cache Everything, and that resource has a cache header set, Cloudflare will cache it.
But for how long? As long as any other static file that’s generally cached? As long as the cache header asks? If you set Edge Cache TTL, does that increase its odds of staying in cache more than not setting that?
Does your script(s) use its own headers to decide of that resource should be purged, cache-bypassed, or cached?
If I enable Cache Everything, but set Browser Cache to zero, will it stay in Edge Cache, but not browser cache?