feat: Implement basic PWA setup

Adds initial Progressive Web App (PWA) capabilities:
- Creates `manifest.json` with app name, icons (placeholders), start URL, display mode, and theme colors.
- Implements a basic service worker (`sw.js`) that caches core application shell URLs (homepage, create post, offline page, main JS, manifest) and employs a cache-first, then network strategy.
- Includes an offline fallback page (`offline.html`) served by a new Django view and URL.
- Links the manifest and registers the service worker in the `base.html` template.

Author: google-labs-jules[bot]

openpage/static/openpage/manifest.json

@@ -0,0 +1,30 @@
+{
+  "name": "Social Platform - OpenPage",
+  "short_name": "OpenPage",
+  "description": "A social platform for creating and sharing AI-generated images and posts.",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#333333",
+  "orientation": "portrait-primary",
+  "icons": [
+    {
+      "src": "/static/openpage/icons/icon-192x192.png",
+      "type": "image/png",
+      "sizes": "192x192",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/static/openpage/icons/icon-512x512.png",
+      "type": "image/png",
+      "sizes": "512x512",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/static/openpage/icons/icon-1024x1024.png",
+      "type": "image/png",
+      "sizes": "1024x1024",
+      "purpose": "any maskable"
+    }
+  ]
+}

openpage/static/openpage/sw.js

@@ -0,0 +1,94 @@
+const CACHE_NAME = 'openpage-v1';
+const urlsToCache = [
+    '/', // Corresponds to post_list_view
+    '/post/create/', // Corresponds to create_post_view
+    // We should ideally cache specific, versioned static assets like CSS and JS.
+    // For now, let's add the JS file we know.
+    // The manifest file is also good to cache.
+    '/static/openpage/js/create_post.js',
+    '/static/openpage/manifest.json',
+    // Add placeholder paths for main site CSS if/when created, e.g., '/static/css/main.css'
+    // Add placeholder paths for any specific app CSS, e.g., '/static/openpage/css/style.css'
+    '/offline/' // Our offline fallback page URL
+];
+
+// Install event: Cache core assets
+self.addEventListener('install', event => {
+    console.log('[Service Worker] Install event');
+    event.waitUntil(
+        caches.open(CACHE_NAME)
+            .then(cache => {
+                console.log('[Service Worker] Caching app shell');
+                // AddAll can fail if any of the resources fail to fetch.
+                // Consider adding them individually with error handling if some are non-critical.
+                return cache.addAll(urlsToCache.map(url => new Request(url, { cache: 'reload' })));
+            })
+            .catch(error => {
+                console.error('[Service Worker] Failed to cache app shell:', error);
+            })
+    );
+});
+
+// Activate event: Clean up old caches
+self.addEventListener('activate', event => {
+    console.log('[Service Worker] Activate event');
+    event.waitUntil(
+        caches.keys().then(cacheNames => {
+            return Promise.all(
+                cacheNames.map(cache => {
+                    if (cache !== CACHE_NAME) {
+                        console.log('[Service Worker] Clearing old cache:', cache);
+                        return caches.delete(cache);
+                    }
+                })
+            );
+        })
+    );
+    return self.clients.claim(); // Ensure new service worker takes control immediately
+});
+
+// Fetch event: Serve cached content when offline, or fetch from network
+self.addEventListener('fetch', event => {
+    console.log('[Service Worker] Fetch event for:', event.request.url);
+    // We only want to handle GET requests for caching strategy
+    if (event.request.method !== 'GET') {
+        return;
+    }
+
+    event.respondWith(
+        caches.match(event.request)
+            .then(response => {
+                if (response) {
+                    console.log('[Service Worker] Found in cache:', event.request.url);
+                    return response; // Serve from cache
+                }
+                console.log('[Service Worker] Not found in cache, fetching from network:', event.request.url);
+                return fetch(event.request)
+                    .then(networkResponse => {
+                        // Optional: Cache new requests dynamically if needed
+                        // Be careful with what you cache dynamically, especially for non-static assets
+                        // if (networkResponse && networkResponse.status === 200 && event.request.url.startsWith(self.location.origin)) {
+                        //     const responseToCache = networkResponse.clone();
+                        //     caches.open(CACHE_NAME)
+                        //         .then(cache => {
+                        //             cache.put(event.request, responseToCache);
+                        //         });
+                        // }
+                        return networkResponse;
+                    })
+                    .catch(error => {
+                        console.error('[Service Worker] Fetch failed for:', event.request.url, error);
+                        // If fetching fails (e.g., user is offline) and it's a navigation request,
+                        // try to return the offline fallback page.
+                        if (event.request.mode === 'navigate') {
+                            console.log('[Service Worker] Serving offline page.');
+                            return caches.match('/offline/');
+                        }
+                        // For non-navigation requests (like images, scripts),
+                        // we don't return the offline page, just let the fetch fail.
+                        // A more robust solution might return placeholder images/data.
+                        return Promise.reject(error); // Ensure the promise chain rejects
+                    });
+            })
+    );
+});

openpage/templates/openpage/base.html

@@ -1,9 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
+{% load static %}
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{% block title %}Social Platform{% endblock %}</title>
+
+    <!-- PWA Manifest and Theme Color -->
+    <link rel="manifest" href="{% static 'openpage/manifest.json' %}">
+    <meta name="theme-color" content="#333333"> <!-- Should match manifest.json theme_color -->
+
     <style>
         body { font-family: sans-serif; margin: 20px; background-color: #f4f4f4; color: #333; }
         header { background-color: #333; color: #fff; padding: 10px 0; text-align: center; }
@@ -53,5 +59,20 @@ <h1>Social Platform</h1>
         {% endblock %}
     </div>
 
+    <script>
+        if ('serviceWorker' in navigator) {
+            window.addEventListener('load', () => {
+                navigator.serviceWorker.register("{% static 'openpage/sw.js' %}")
+                    .then(registration => {
+                        console.log('Service Worker registered successfully with scope:', registration.scope);
+                    })
+                    .catch(error => {
+                        console.error('Service Worker registration failed:', error);
+                    });
+            });
+        } else {
+            console.log('Service Worker not supported in this browser.');
+        }
+    </script>
 </body>
 </html>

openpage/templates/openpage/offline.html

@@ -0,0 +1,30 @@
+{% extends "openpage/base.html" %}
+{% load static %}
+
+{% block title %}Offline{% endblock %}
+
+{% block content %}
+    <h2>You are Offline</h2>
+    <p>We're sorry, but it seems you are currently offline and we couldn't load the page you requested.</p>
+    <p>Please check your internet connection.</p>
+
+    <p>Some previously visited pages might still be accessible:</p>
+    <ul>
+        <li><a href="{% url 'openpage:post_list' %}">Home / Post List</a></li>
+        {# Add links to other key pages if they are likely to be cached #}
+    </ul>
+
+    <style>
+        .offline-notice {
+            text-align: center;
+            padding: 20px;
+            background-color: #fff3cd;
+            border: 1px solid #ffeeba;
+            color: #856404;
+            border-radius: 4px;
+        }
+    </style>
+    <div class="offline-notice">
+        This page is a fallback for when you're offline.
+    </div>
+{% endblock %}

openpage/urls.py

@@ -7,4 +7,5 @@
     path('', views.post_list_view, name='post_list'),
     path('post/create/', views.create_post_view, name='create_post'),
     path('post/<int:pk>/', views.post_detail_view, name='post_detail'),
+    path('offline/', views.offline_view, name='offline'),
 ]

openpage/views.py

@@ -43,3 +43,6 @@ def post_list_view(request):
 def post_detail_view(request, pk):
     post = get_object_or_404(Post, pk=pk)
     return render(request, 'openpage/post_detail.html', {'post': post})
+
+def offline_view(request):
+    return render(request, 'openpage/offline.html')