The Wicker Man

Project Title: “The Wicker Worker: A Service Workers API Mystery”

Level: Intermediate (Secure context required: https:// or http://localhost)

Description:

In this unique project, we blend the eerie and mysterious atmosphere of Nicolas Cage’s 2006 film The Wicker Man with the powerful capabilities of the Service Workers API. Your task is to create a web application that emulates the unsettling experience of the film while leveraging the offline capabilities, caching, and background processes of the Service Workers API.

The Wicker Man follows Edward Malus, a police officer who investigates the disappearance of a young girl on a remote island, only to uncover dark secrets and disturbing rituals. Similarly, our project will guide users through an interactive and mysterious narrative that continues to function even when offline, thanks to the Service Workers API.

Features:

1. Offline Mode: Utilize Service Workers to cache the application’s assets and ensure it remains accessible even when the user is offline.
2. Background Sync: Implement background synchronization to update the application’s content when connectivity is restored.
3. Push Notifications: Keep users engaged with push notifications that provide hints or eerie messages as they navigate the mystery.

Starting Code:

Beginner Hints:

• Create a single index.html file.
• Copy the full HTML code block into that file.
• Open index.html in your browser. If something doesn’t work, try a local server like python -m http.server.
• Open DevTools Console to spot errors and typos quickly.

Here’s a basic setup to get you started. This includes the initial HTML, CSS, and JavaScript to register a Service Worker and enable offline functionality.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Wicker Worker</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f0f0f0;
        color: #333;
        text-align: center;
        padding: 20px;
    }

    h1 {
        color: #d9534f;
    }

    button {
        background-color: #d9534f;
        color: white;
        border: none;
        padding: 10px 20px;
        font-size: 16px;
        cursor: pointer;
    }
</style>
</head>
<body>
    <h1>Welcome to The Wicker Worker</h1>
    <p>Can you uncover the mystery of the island?</p>
    <button id="startBtn">Start Your Journey</button>

<script>
    document.getElementById('startBtn').addEventListener('click', () => {
        alert('Your journey begins...');
        // Add interactive story logic here
    });
</script>
</body>
</html>

References:

• The Wicker Man (2006):
  • Wikipedia
• Service Workers API:
  • MDN Web Docs

Praise Cage! Dive into this coding adventure and create a web experience that captures the essence of The Wicker Man while showcasing the capabilities of the Service Workers API.