const std = @import("std");
pub fn main() !void {
const stdout = std.io.getStdOut().writer();
try stdout.print("{s}\n", .{"Hello World!"});
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Service Worker Logger</title>
<style>
body { font-family: sans-serif; padding: 20px; text-align: center; }
button { padding: 10px 20px; font-size: 16px; cursor: pointer; }
h1 { color: #333; }
</style>
</head>
<body>
<h1>Service Worker Logger</h1>
<p>Open your browser's console (F12 or Cmd+Opt+J) to see request logs.</p>
<button id="fetchButton">Click to make a request</button>
<script>
// The Service Worker script as a string
const swCode = `
// The Service Worker listens for events
console.log('Service Worker code loaded.');
// Immediately takes control of the page
self.addEventListener('install', (event) => {
self.skipWaiting();
console.log('Service Worker installed.');
});
// Claims clients to start intercepting requests right away
self.addEventListener('activate', (event) => {
event.waitUntil(clients.claim());
console.log('Service Worker activated and claiming clients.');
});
// The core logic: listen for all fetch requests
self.addEventListener('fetch', (event) => {
const request = event.request;
// Log the request details
console.log(\`[SW] Intercepted: \${request.method} \${request.url}\`);
// Passively forward the request to the network
event.respondWith(fetch(request));
});
`;
// Create a Blob from the Service Worker code string
const swBlob = new Blob([swCode], { type: 'application/javascript' });
const swUrl = URL.createObjectURL(swBlob);
// Register the Service Worker
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register(swUrl, { scope: '/' })
.then(registration => {
console.log('Service Worker registered with scope:', registration.scope);
})
.catch(error => {
console.error('Service Worker registration failed:', error);
});
} else {
console.warn('Service Workers are not supported in this browser.');
}
// Add a button to trigger a network request
document.getElementById('fetchButton').addEventListener('click', () => {
// This request will be intercepted and logged by the Service Worker
fetch('https://httpbin.org/get')
.then(response => response.json())
.then(data => console.log('Fetch request completed:', data))
.catch(error => console.error('Fetch request failed:', error));
});
</script>
</body>
</html>
