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.
My thought is that the majority of the content is not going to change. Also the css and javascript. These are already being cached but that is not done on the initial view and also when the cache is cleared. The ideal is that these things would be able to be pushed to the edge for the initial view.
This is one of the posts that encouraged me to look into it How Shifter Introduced Serverless Hosting to WordPress Using AWS, DynamoDB & the Serverless Framework
@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. 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: templates/examples/edge-cache-html at main Ā· cloudflare/templates Ā· GitHub
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: GitHub - pmeenan/cf-workers: Collection of Cloudflare Workers
THANKS!!!
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.
x-html-edge-cache: cache,bypass-cookies=wp-|wordpress|comment_|woocommerce_
x-html-edge-cache-status:Bypass, Cached
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?