Service Worker Consent Guide

Data Flow Architecture

Deployment Fork: Netlify Primary

                      ┌─────────────────────────────────┐
                      │   CLOUDFLARE REVERSE PROXY      │
                      │        + CDN + WAF              │
                      └────────────┬────────────────────┘
                                   │
                    ┌──────────────┴──────────────┐
                    │                             │
                    ▼                             ▼
      ┌─────────────────────────┐   ┌─────────────────────────────┐
      │   XANO MIDDLEWARE       │   │   STATIC ASSET HOSTING      │
      │   + OpenAI API          │   │                             │
      └───────┬─────────────────┘   │  ┌───────────────────────┐  │
              │                     │  │ Netlify (Primary)     │  │
              │                     │  │ + Edge Functions      │  │
              │                     │  └───────────────────────┘  │
              │                     │                             │
              │                     │  Alternative Deployments:   │
              │                     │  ┌───────────────────────┐  │
              │                     │  │ Cloudflare Pages      │  │
              │                     │  │ GitHub Pages          │  │
              │                     │  │ Vercel                │  │
              │                     │  │ Replit Deploy         │  │
              │                     │  └───────────────────────┘  │
              │                     └─────────────────────────────┘
              │
    ┌─────────┼─────────┐
    │         │         │
    ▼         ▼         ▼
┌─────────┐ ┌────────┐ ┌──────────────────────────┐
│ Shopify │ │  GTM   │ │    UCP Endpoint          │
│Metaobjs │ │DataLyr │ │ /.well-known/ucp         │
│(Customer│ │        │ │                          │
│  Data   │ │  ┌─────▼──────────────┐            │
│ Store)  │ │  │  GA4 Events        │            │
│         │ │  │  - consent_updated │  ┌─────────▼────────────┐
│         │ │  │  - purchase        │  │  UCP Capabilities    │
│         │ │  │  - page_view       │  │  - Product Discovery │
│         │ │  │  - add_to_cart     │  │  - Cart              │
│         │ │  └────────────────────┘  │  - Identity linking  │
│         │ │                          │  - Checkout          │
│         │ │                          │  - Order             │
└─────────┘ └──────────────────────────┴──────────────────────┘

Parallel Processing

Cloudflare Reverse Proxy forks traffic to two parallel paths:

API Requests → Xano Middleware for business logic
Static Assets → Netlify (or alternatives) for HTML/CSS/JS

This separation enables:

Independent scaling of compute vs. static delivery
Edge caching for assets, dynamic routing for APIs
Deployment flexibility across multiple platforms

Layered Event Architecture

GTM/GA4 and UCP work as complementary layers:

GTM DataLayer → Client-side tracking for analytics
GA4 Events → Remarketing, conversion optimization
UCP Endpoint → AI agent discovery, autonomous commerce

Both layers fire simultaneously on user actions, providing redundancy and complete observability.

Technology Stack Detail

Frontend Layer

Webflow Export + Alpine.js

Static HTML/CSS components
Reactive data binding with x-data, x-bind
No build step, instant load
Offline-first with Service Worker

Edge Layer

Cloudflare Workers

300+ Points of Presence (PoPs)
Sub-50ms global latency
API proxying and security
DDoS protection, WAF rules

Middleware Layer

Xano + OpenAI GPT-4o

API orchestration and routing
Database triggers and webhooks
AI enrichment (200-500ms)
JWE token verification

Commerce Layer

Shopify Meta Objects

Customer consent storage
AI segment classifications
GraphQL API (2 req/sec limit)
UCP-compliant data structure

Automation Layer

n8n Workflows

Visual workflow builder
Cron-based scheduling
BigQuery data streaming
Background task processing

Analytics Layer

GTM/GA4 + BigQuery

Client-side event tracking
E-commerce transaction data
Petabyte-scale SQL warehouse
Looker Studio dashboards

Complete Data Flow: User Consent Update

1

User Interaction

User updates consent preferences in Webflow-exported HTML form with Alpine.js data binding

2

Service Worker Intercept

Browser Service Worker intercepts POST request, queues in IndexedDB if offline

3

Cloudflare Edge Routing

Request hits Cloudflare Worker at edge, applies security policies, routes to Xano

4

Xano API Processing

Xano middleware validates JWE token, calls OpenAI GPT-4o for user segmentation (200-500ms)

5

Shopify Meta Object Update

Xano updates Shopify Meta Object via GraphQL with consent preferences and AI segment tags

6

GTM DataLayer Push

Frontend pushes consent_updated event to GTM DataLayer, fires to GA4 for analytics

7

n8n Background Sync

Xano webhook triggers n8n workflow, streams consent data to BigQuery within 1-2 seconds

8

UCP Endpoint Update

/.well-known/ucp JSON updated with latest consent capabilities for AI agent discovery

Deployment Platform Comparison

Platform	Build Time	Edge Locations	Custom Domains	Best For
Netlify (Primary)	~45s	Global CDN	Unlimited (paid)	Jamstack sites, edge functions, form handling, A/B testing
Cloudflare Pages	~30s	300+ PoPs	Unlimited (free)	Worker integration, ultra-low latency
GitHub Pages	~60s	Fastly CDN	1 custom domain	Open-source projects, documentation
Vercel	~40s	Edge Network	Unlimited (paid)	Next.js applications, serverless functions
Replit Deploy	~20s	Regional	Custom domains (paid)	Rapid prototyping, educational projects

System Architecture