Hello,

Since Cloudflare started offering free daily workers, I thought to configure this.

Since workers KV is not available in the free account, I decided to go via the API method.

Added the script > opened Resources, clicked "Add binding"

Now it does show an option to add VARIABLE NAME but doesn't show the option of adding NAMESPACE.

Rather it asks to add a WASM file which I have no idea of.

Can you please help in sharing what would be the content of WASM file?

Since the launch of the new workers sites and domains, it seems that "routes" is missing from the worker editor. How do we run a worker on our domains now?

I failed to build worker-mysql

wrangler publish

✘ [ERROR] Build failed with 2 errors:

  dist/index.mjs:8:1790: ERROR: Top-level await is not available in the configured
  target environment ("es2020")
  dist/index.mjs:8:1809: ERROR: Top-level await is not available in the configured
  target environment ("es2020")

@pmeenan I really prefer permissive licenses and therefore laud your choice of the MIT license for the Edge-Cache WordPress plugin. However, I believe that you have to change it to the GPL, because a piece of software that relies on a GPL'ed software to run (in this case WordPress core) must be GPL licensed, too (your plugin is a derivative work of WordPress core).

I am not a lawyer, but my understanding is, that if your code would not work with any other non-GPL'ed software (e.g. as a plugin for another CMS) there is no way around the GPL.

I am really sorry that I have to point this out, but I would not want you or Cloudfare to run into any licensing problems with the WordPress project. So better check/fix it now.

Because ed70362 changed the README

This is missing in package.json

"build": "wrangler build"

The instructions for the HTML edge cache use the global Cloudflare API key - I'm wondering whether it's possible to use a zone-specific one for better security? If so, is there any chance the instructions could be updated with the specific permissions required by the token and any extra steps required to use a non-global token?

Only me with this issue?
https://tppr.me/ZFhb5

/perf-cgi/3pp/https/ajax.cloudflare.com/cdn-cgi/scripts/95c75768/cloudflare-static/rocket-loader.min.js

on examples/third-party-scripts/third-party-scripts.js there is a combination regex patterns to get script tags

const SCRIPT_PRE = '<\\s*script[^>]+src\\s*=\\s*[\'"]\\s*((https?:)?/';
const PATTERN_POST = '[^\'" ]+)\\s*["\'][^>]*>';

and on the function modifyHtmlStream

for (let scriptUrl of SCRIPT_URLS) {
    let regex = new RegExp(SCRIPT_PRE + scriptUrl + PATTERN_POST, 'gi');
    patterns.push(regex);
  }

there is a problem with the combination of RegExp patterns because that can´t get the whole script tag on an html fetched file
<script src="https://www.googletagservices.com/tag/js/gpt.js"></script>

so i made a new one so you can test it and look if it´s a better one

const htmlTagWithScriptsGPTGoogle="";
const patternGptTag = '<\\s*script[^>]+src\\s*=\\s*[\'"]\\s?(https:\/\/www\.googletagservices\.com\/tag\/js\/gpt\.js)*([^\'" ]+)\\s*["\'][^>]*><\/script>'

                const jsRegex = new RegExp(patternGptTag, 'gi');
                let match = jsRegex.exec(htmlTagWithScriptsGPTGoogle);                
                console.log(match[0])

example regexp on this link https://regex101.com/r/csy1QX/2

the patter offcourse could be better but the one with the scripting example didn´t worked for me.

Currently, the aggregate requests example requests each body in series:

const btc = await btcResp.json()
const eth = await ethResp.json()
const ltc = await ltcResp.json()

This should be done all at once

Proposal 1

This would be a pretty minimal change:

const [btc, eth, ltc] = await Promise.all([btcResp, ethResp, ltcResp].map(res => res.json()))

Proposal 2

I kinda just went all out

// Make multiple requests, aggregate the responses and
// send it back as a single response.

const currencies = ['BTC', 'ETH', 'LTC']

addEventListener('fetch', event => {
    event.respondWith(fetchAndLog(event.request))
})
  
async function fetchAndLog(request) {
    const [btc, eth, ltc] = await Promise.all(
      currencies
        .map(currency => fetch(`https://api.coinbase.com/v2/prices/${currency}-USD/spot`))
        .map(p => p.then(res => res.json()))
        .map(p => p.then(({ data: { amount } }) => amount))
    )
  
    const body = { btc, eth, ltc }
  
    return new Response(JSON.stringify(body, null, 2), {
      status: 200,
      headers: {'Content-Type': 'application/json'}
    })
}

I've implemented as per the docs in the demo site https://gijovarghese.com. However, there is no much difference in TTFB

On testing, most of the locations have a TTFB of greater than 500ms. I tested it via https://tools.keycdn.com/performance?url=https://gijovarghese.com/. I tested multiple times so that it would cache in all servers

However, TTFB of another WP site which implemented page rules to cache everything have a TTFB <100ms in all around the world. See https://tools.keycdn.com/performance?url=https://coffeencoding.com/

What could be the reason?

Note: I've removed the part that checks for 'no-cache' header since most these tools send no-cache header

PeerConnections get disconnected after a few seconds of having a connected state. There is no error in console or in WebRTC component.

When the very popular W3 Total Cache's page cache (disk enhanced mode) is enabled a very common setting, the Cloudflare Page Cache Plugin header "x-HTML-Edge-Cache: cache,bypass-cookies=wp-|wordpress|comment_|woocommerce_ " is not added to the disk cached page. This results in the requests not being cached at the worker level since they don't see the proper header. I verified this by turning off W3TC page cache and then seeing immediate caching and hits at worker the worker level whereas before nothing really appeared to be caching.

WebReflection’s Custom Elements v0 to v1 translation layer polyfill translates Custom Elements v0 calls to Custom Elements v1 calls, and with Firefox deciding to not implement Custom Elements v0, only v1, this polyfill is necessary to use the site in Firefox.

The other option would be to rewrite Custom Elements v0 calls to Custom Elements v1 calls.

This will have to be added to the V8 inspector located at https://cloudflareworkers.com/devtools/inspector.html

See also https://community.cloudflare.com/t/add-webreflection-s-custom-elements-v0-to-v1-translation-layer-polyfill-to-the-workers-playground/23209

Font display: https://developers.google.com/web/updates/2016/02/font-display

Would be nice to include this function as service worker in the fast google fonts script streamer?
https://medium.com/@pierluc/supercharge-google-fonts-with-cloudflare-and-service-workers-25c37462fb6a

Repo: https://github.com/Zertz/font-workers

Possibility to also optimize fontawesome v4.7 and v5 to extend the workers to also optimize local font by adding such functions to the worker script.

This is more of a general question, rather than a particular issue with code.

Does Cloudflare worker work with WordPress Multisite? Particularly when you have different domains on one install.

Do you need to setup different Cloudflare accounts for each domain?

Thanks!!

It would be nice for a typescript example of workers. As right now, I can't seem to find any type definitions for the most basic example:

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

/**
 * Fetch and log a given request object
 * @param {Request} request
 */
async function handleRequest(request) {
  console.log('Got request', request)
  const response = await fetch(request)
  console.log('Got response', response)
  return response
}

https://github.com/zeit/ncc could probably be used for generating the compiled bundle, as it supports typescript

Problem:
Cookie banners that are common for legal reasons store the visitors consent in cookies. These cookies may contain complex options the visitor has choosen or a simple true/false for consent.

We need different cached versions of the same URL for each variant of that cookie. And another version when it is completly unset.

Without caching all these different versions by cookie content the caching becomes really pointless.

Current caching strategies lead to unlawful behaviour in the following case:

1. purge all cloudflare caches
2. user #1 requests page 1; page 1 shows cookie banner; page 1 is cached
3. user #1 gives cookie consent; cookie is set
4. user #1 requests page 2; page 2 does NOT show cookie banner, because of the consent-cookie; page 2 IS CACHED WITHOUT COOKIE BANNER
5. user #2 requests page 2; page 2 does NOT show cookie banner; the CACHED version of page 2 got delivered; the CACHED version depends on consent which user #2 had never given

For some reasons I like to have the inverse logic from the current "bypass-on-cookie" feature.
I do not want to define cookies which bypass but I like to define cookies which are ok for caching.

When a request contains a single cookie that is not on the cookie whitelist then it should bypass the cache. Caching is only allowed when all cookies are on the whitelist.

Main reasons:

• new unknown cookies from plugins etc.
• security: when updates change the cookie name then protected pages may accidently being cached with the current bypass-on-cookie feature

how can I redirect a post (json) request depending on some param in the body?

Hello!

So I just setup a CF Worker using the provided example (see here) and kept everything exactly as-is out of the box.

I am having to use the API config, as I don't have an option for KV storage at the moment (via the Workers tab, or workers.dev)

Workers KV is currently not available for workers.dev.

I'm noticing that most of my requests (https://willstocks.co.uk) are getting the following response headers applied:

x-html-edge-cache-status: Hit, Refreshed
x-html-edge-cache-version: -1

But if I look in my Workers stats, I'm seeing requests coming in (both cached and uncached (for the pages that I'm visiting for the first time since implementation)):

The x-html-edge-cache-version never increments up, despite the fact that I have the plugin installed on my WP site. I'm also not seeing the x-HTML-Edge-Cache header for some reason?

Worth noting, I am also using W3TC on my site, but I'm seeing the headers change on refresh/consecutive visits.

Any ideas? 😁

A lot of scripts nowadays are added to the HTML using code such as

insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga')

It would be great if caching those locally would be supported.

We just released a demo worker that runs a Preact Progressive Web App in a Cloudflare worker with server side rendering. I don't know if it makes sense to include the whole thing into this repo as an example, but maybe you'd like to link to it?

https://github.com/DigitalOptimizationGroup/cloudflare-worker-preact-pwa

I was wondering if the worker script could specify a TTL itself, or if a page rule would be more appropriate. Testing on some low traffic sites now and noticing that a cached response doesn't last long.

I'd like to cache the finalized HTML response with all the proxied script and font URLs. For a typical fetch this seems easy enough using the cache API:

https://developers.cloudflare.com/workers/reference/cache-api/

Given the HTML has been streamed and modified on the fly, however, would the standard cache.put even work?

Any usage of service-worker-mock should be replaced with a Miniflare implementation. Encouraging a better simulated environment and future integration with Wrangler Core API for testing.

Additionally the package is unmaintained

Reference for conversion (thanks @mrbbot):
cloudflare/worker-typescript-template#73

Cc: @lauragift21 wanted to own this

I am using worker-mysql to work with TiDB, a MySQL-compatible database. But find two problems

• I have seen the query select 42 has been executed in the TiDB server. but the result is empty like {"result":[]}. I think it is not an issue of TiDB because TiDB can work with most of the MySQL drivers including the mysql2
• worker-mysql can't deal with the TLS connection once the server requires TLS. I belive it also can't work once the MySQL server requires TLS because it did not follow the MySQL protocol to deal the TLS.

I am glad to contribute but I am not familiar with javascript and I don't know what's wrong. Looking forward to your help.

Hey everyone,

So, i've deployed the edge-cache worker successfully, but once i started debugging everything i figured out that it pretty much does nothing.

For example, if i change the following line:

function shouldBypassEdgeCache(request, response) {
  console.log('iamhere');
  return true;

I am able to confirm through the debugger that the line triggers, but my cf-cache-status is still HIT. Actually i have tried much more aggressive stuff in the worker, and i am not seeing any misses (after the first one obviously). Which leads me to believe that the actual Hits are not tied to the worker at all. Instead they are hits from the regular CF cache-everything page rule. It is my belief that the subsequent await fetch() actually just hits the CF cache catch-all all over again, and never pulls from the origin anyways.

How come?

If that is the case, does it mean that i have misinterpreted the purpose of the worker? (to decide which requests will not be handled by cache), or does it mean that i have set my page rules in a wrong way? In which case, we should add the recommended page rules to the docs, ASAP.

Has anyone got this working correctly?

First of all, thanks guys for amazing work! Edge caching process works very well as a result performance of pages was improved!
So, Edge caching was set up by this example https://github.com/cloudflare/worker-examples/tree/master/examples/edge-cache-html.

Problem

The problem is that once a new version for the site is released, cache should be purged.

Question

The question is how to purge cache which is stored in KV via API. It is clear how to reset it via api by zone, but there are no ideas how to do it for KV space.

Upd
So, i found the solution, to be able to purge cache via api, we can use api for purging cache by tags

Hi guys,
When the Cloudflare Page Cache plugin is enabled on my site, I see 403 errors when trying to hit /wp-admin/admin-ajax.php for AJAX functionality (in this case, visit https://willstocks.co.uk and try clicking the little "like"/"thumbs-up" button on each post to like the post)
As soon as I disable the plugin, the error stops and the likes register.
Any ideas?
Thanks,
Will

We are using the non-KV stale while revalidate path. A great functionality would be, when doing the update of the cached copy of the page, if the origin returns a 5xx response or timeout then don't purge the cache for that page and continue to serve the prior non-5xx page that was last cached to visitors. I think I need to update the function starting at line 249 in the edge cache example but I am kind of lost because I do more admin than programming and haven't used javascript much. Is this an easy change? Would it break other things?

Does anyone have a working script that combines the fast-google-fonts and third-party-scripts examples? I've been able to mash them together, but the processing is slightly different in each example and I want to ensure I'm not introducing any fatal errors or bugs, particularly with content-types, charsets, and chunking.

This question may seem noob-ish (apologies in advance).

In this Worker:
https://github.com/cloudflare/worker-examples/tree/master/examples/third-party-scripts
... does every matching third-party script URL load async as each specified domain is discovered from the origin URL?

I'm unsure about the flow of how this works, exactly. Does the initial first-byte through to end of the body seed the third-party URL's which are then replaced with URL's in your own root domain, avoiding the round-trip to the third-party URL?

Unrelated - but do you consider the above script "production-ready"? I saw various TO-DO items in the code, and wondered when this might be safe for prime-time use.

I'm thinking of implementing this strategy of proxy-driven loading (which is smart) to get rid of tons of external service connections outside our root domain tallyfy.com for both our website and our SPA (Single Page App)/Angular app.

Is there any flags/gotchas with using such an approach for a SPA, rather than a website?

FYI - this is my draft domain array at the top of the script, in case it adds context.

const SCRIPT_URLS = [
    // Tallyfy public website needs these
    '/ajax.aspnetcdn.com/',
    '/ajax.cloudflare.com/',
    '/ajax.googleapis.com/ajax/',
    '/cdn.jsdelivr.net/',
    '/cdnjs.com/',
    '/cdnjs.cloudflare.com/',
    '/code.jquery.com/',
    '/maxcdn.bootstrapcdn.com/',
    '/netdna.bootstrapcdn.com/',
    '/oss.maxcdn.com/',
    '/stackpath.bootstrapcdn.com/',
    '/cdn.bibblio.org/',
    '/fonts.gstatic.com/',
    '/fonts.googleapis.com/',
    '/player.vimeo.com/',
    '/cdn.onesignal.com/',
    '/www.usefomo.com/',
    '/i.vimeocdn.com/',
 	'/f.vimeocdn.com/',
 	'/vimeo.com/',
 	'/fresnel.vimeocdn.com/',
 	'/cdn.firstpromoter.com/',
 	'/w.chatlio.com/',
 	'/api.chatlio.com/',
 	'/stats.g.doubleclick.net/',
 	// Tallyfy SPA Angular app (served off Cloudfront) needs these
 	'/cdn.trackjs.com/',
 	'/assets.calendly.com/',
 	'/cdn.embedly.com/',
 	'/cdn.mxpnl.com/',
 	'/beacon-v2.helpscout.net/',
 	'/usage.trackjs.com/',
 	'/api.mixpanel.com/',
 	'/cdn.ywxi.net/',
 	'/cloudfront.net/',
 	'/heapanalytics.com/',
 	'/amazonaws.com/',
 	'/www.mcafeesecure.com/',
 	'/static.hotjar.com/',
 	'/script.hotjar.com/',
 	'/in.hotjar.com/',
 	'/connect.facebook.net/',
 	'/inspectlet.com/',
    // Popular scripts (can be site-specific)
    '/css3-mediaqueries-js.googlecode.com/svn/',
    '/html5shim.googlecode.com/svn/',
    '/html5shiv.googlecode.com/svn/',
    '/pagead2.googlesyndication.com/pagead/js/',
    '/platform.twitter.com/widgets.js',
    '/www.google.com/recaptcha/api.js',
    '/www.google-analytics.com/analytics.js',
    '/www.googletagmanager.com/gtag/js',
    '/www.googletagmanager.com/gtm.js',
    '/www.googletagservices.com/tag/js/gpt.js'
];

Hello! I'm attempting to use the recommended template generation steps outlined in the readme, but I'm encountering the EXDEV: cross-device link not permitted error when I try to generate the template on a drive that isn't my main drive. I'm not sure if this is a limitation of these package managers or an issue that can be resolved in this project.

❯ yarn create cloudflare test worker-rust
yarn create v1.22.10
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "[email protected]" with binaries:
      - create-cloudflare
[#####] 5/5
Error: EXDEV: cross-device link not permitted, rename 'C:\Users\nelso\AppData\Local\Temp\4098c0fb8a35c-307be99e697fa\worker-rust' -> 'D:\dev\test'

error Command failed.
Exit code: 1
Command: C:\Users\nelso\AppData\Local\Yarn\bin\create-cloudflare
Arguments: test worker-rust
Directory: D:\dev
Output:

info Visit https://yarnpkg.com/en/docs/cli/create for documentation about this command.

• OS: Windows 10
• npm: 8.5.5
• pnpm: 7.16.1
• yarn: 1.22.10

Thanks!

I've used the following code to bypass the edge cache if the request URL contains a query string, so that dynamic content based on the query string can still be generated at the origin.

addEventListener("fetch", event => {

...

let hasQueryString = false;
if(request.url && (request.url.indexOf('?') !== -1)) {
    hasQueryString = true;
}

if (configured && !isImage && !hasQueryString && upstreamCache === null) {

...

Does the above code make sense to bypass the cache, if there's a query string? Or should it use some other property of request? I just wanted to check – assuming it's a fairly typical use case :-)

Hi there,

I think this is a bug in Cloudflare Workers.

We are using Hugo and Cloudflare workers to push our static site, and Github does the automatic build and push.

% curl -svo /dev/null https://jonahnz.com/404.html

• Trying 104.21.25.56:443...
• Connected to jonahnz.com (104.21.25.56) port 443 (#0)
  ...
  < HTTP/2 200
  < date: Thu, 05 May 2022 16:55:39 GMT
  < content-type: text/html; charset=utf-8
  < content-length: 1159

That seems to have content type but not this random 404 address:
% curl -svo /dev/null https://jonahnz.com/non-existing-URL

• Trying 104.21.25.56:443...
• Connected to jonahnz.com (104.21.25.56) port 443 (#0)
  ...
  < HTTP/2 404
  < date: Thu, 05 May 2022 16:57:03 GMT
  < content-length: 1159

For some odd reason, the HTML is not rendering so if there is a non-existing URL like https://jonahnz.com/randskdfskuh - you can see it displays just raw HTML rather than outputting this page https://jonahnz.com/404.html

Today, this repo uses tabs for all templates which is fantastic for accessibility, as define by the prettier config in the root of this repo. Unfortunately though, one isn't shipped with every template, so when folks run their own prettier commands, it'll use default configs and throw errors/warnings for not using spaces.

PR to follow.

Causes display issue for Safari, could only see it appear in Safari.

Google font is not displayed and fallback system font is used in Safari when using this script or the streamer with this feature enabled in the workers.

Expected Behavior
It works

Actual Behavior
It throws an error:

✘ [ERROR] No loader is configured for ".rs" files: src/lib.rs


✘ [ERROR] Build failed with 1 error:

  error: No loader is configured for ".rs" files: src/lib.rs

Steps to Reproduce

1. Run npm init cloudflare project_name worker-rust and cd project_name
2. (Run npm run build and notice that there is no build script contrary to what the documentation states)
3. Run npm run dev and it will throw the above error

Could we preload and prioritize fetching resources such as Google fonts that are optimized. Since the path is changed in the workers upon cache cleared I can not manually add the preload.

@pmeenan https://developers.google.com/web/tools/lighthouse/audits/preload

Hi there,

Got a question about the Edge Cache Worker. I hope this is the right spot to ask! If not, let me know :-) Is there any way to keep track of global cache hit/miss statistics? I'd love to know how the edge cache performs.

Thank you!

—Reinder

Hello,

Hello.

I'm receiving the following warnings in my logs, how would I resolve this, any suggestions?

PHP Warning: Cannot modify header information - headers already sent in /wp-content/plugins/cloudflare-page-cache/cloudflare-page-cache.php on line 26

I worked through this a bit without much success:
https://stackoverflow.com/questions/8028957/how-to-fix-headers-already-sent-error-in-php

Thank you

After integrating the script I am not noticing a decrease in TTFB at the level I would expect. Using the standard cache everything method my TTFB would be reduced to about 30-40MS which I expected.

However, I noticed after adding the plugin (for WordPress) and adding the above script after setting up the workers within my account and adding the necessary information my cached version only ever seems to return -1 and only appears to be reporting cache misses.

Related Domain: https://www.sertmedia.com/

However, the proxied scripts functionality is working as expected, and the font functionality works as well despite me deactivating the functionality (for fonts).

For example https://gtmetrix.com/reports/www.sertmedia.com/ws0Mrsrt

Not quite sure what the issue is with the setup?

Additional information. The account does not have KV access, therefore it is using the API key setup all the information was pasted into the spots as instructed in the docs.

Hello ,
I have an issue with the routing in my application after deploying it to cloudflare.
The navigation using the navbar works , but if I copy/paste the same link that works with the navbar navigation i got this error.

Note : in the localhost everything is fine

The "about" section on the GH repo says "A collection of stater templates" which should be "A collection of starter templates."