1# Workers Playground Patterns
2 
3## JSON API
4 
5```javascript
6export default {
7  async fetch(request) {
8    const url = new URL(request.url);
9    if (url.pathname === '/api/hello') return Response.json({ message: 'Hello' });
10    if (url.pathname === '/api/echo' && request.method === 'POST') {
11      return Response.json({ received: await request.json() });
12    }
13    return Response.json({ error: 'Not found' }, { status: 404 });
14  }
15};
16```
17 
18## Router Pattern
19 
20```javascript
21const routes = {
22  '/': () => new Response('Home'),
23  '/api/users': () => Response.json([{ id: 1, name: 'Alice' }])
24};
25 
26export default {
27  async fetch(request) {
28    const handler = routes[new URL(request.url).pathname];
29    return handler ? handler() : new Response('Not Found', { status: 404 });
30  }
31};
32```
33 
34## Proxy Pattern
35 
36```javascript
37export default {
38  async fetch(request) {
39    const url = new URL(request.url);
40    url.hostname = 'api.example.com';
41    return fetch(url.toString(), {
42      method: request.method, headers: request.headers, body: request.body
43    });
44  }
45};
46```
47 
48## CORS Handling
49 
50```javascript
51export default {
52  async fetch(request) {
53    if (request.method === 'OPTIONS') {
54      return new Response(null, {
55        headers: {
56          'Access-Control-Allow-Origin': '*',
57          'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE',
58          'Access-Control-Allow-Headers': 'Content-Type, Authorization'
59        }
60      });
61    }
62    const response = await fetch('https://api.example.com', request);
63    const modified = new Response(response.body, response);
64    modified.headers.set('Access-Control-Allow-Origin', '*');
65    return modified;
66  }
67};
68```
69 
70## Caching
71 
72```javascript
73export default {
74  async fetch(request) {
75    if (request.method !== 'GET') return fetch(request);
76    const cache = caches.default;
77    let response = await cache.match(request);
78    if (!response) {
79      response = await fetch('https://api.example.com');
80      if (response.status === 200) await cache.put(request, response.clone());
81    }
82    return response;
83  }
84};
85```
86 
87## Hono Framework
88 
89```javascript
90import { Hono } from 'https://esm.sh/hono@3';
91const app = new Hono();
92app.get('/', (c) => c.text('Hello'));
93app.get('/api/users/:id', (c) => c.json({ id: c.req.param('id') }));
94app.notFound((c) => c.json({ error: 'Not found' }, 404));
95export default app;
96```
97 
98## Authentication
99 
100```javascript
101export default {
102  async fetch(request) {
103    const auth = request.headers.get('Authorization');
104    if (!auth?.startsWith('Bearer ')) {
105      return Response.json({ error: 'Unauthorized' }, { status: 401 });
106    }
107    const token = auth.substring(7);
108    if (token !== 'secret-token') {
109      return Response.json({ error: 'Invalid token' }, { status: 403 });
110    }
111    return Response.json({ message: 'Authenticated' });
112  }
113};
114```
115 
116## Error Handling
117 
118```javascript
119export default {
120  async fetch(request) {
121    try {
122      const response = await fetch('https://api.example.com');
123      if (!response.ok) throw new Error(`API returned ${response.status}`);
124      return response;
125    } catch (error) {
126      return Response.json({ error: error.message }, { status: 500 });
127    }
128  }
129};
130```
131 
132**Note:** In-memory state (Maps, variables) resets on Worker cold start. Use Durable Objects or KV for persistence.
133