PWA Implementation Requirements

Technical documentation for Base44 Support

Request Summary

We request enabling Progressive Web App (PWA) capabilities for the Lyfe application, including push notifications, offline support, and installability on mobile and desktop devices.

Priority Features:

  • Push Notifications: Daily reminders for tasks and weekly goal check-ins
  • Install to Home Screen: Native app-like experience on mobile and desktop
  • Offline Support: Basic offline viewing of cached data
Required Files & Configuration

1. manifest.json

Location: /public/manifest.json

{
  "name": "Lyfe - Life Mapping & Goal Tracking",
  "short_name": "Lyfe",
  "description": "Your complete life operating system - map your vision, track your progress, achieve your dreams",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#FAFAF9",
  "theme_color": "#5D7B6F",
  "orientation": "portrait-primary",
  "icons": [
    {
      "src": "/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ],
  "categories": ["lifestyle", "productivity", "health"],
  "screenshots": [
    {
      "src": "/screenshots/desktop-home.png",
      "sizes": "1280x720",
      "type": "image/png",
      "form_factor": "wide"
    },
    {
      "src": "/screenshots/mobile-home.png",
      "sizes": "750x1334",
      "type": "image/png",
      "form_factor": "narrow"
    }
  ]
}

2. service-worker.js

Location: /public/service-worker.js

const CACHE_NAME = 'lyfe-v1';
const urlsToCache = [
  '/',
  '/static/css/main.css',
  '/static/js/main.js',
  '/manifest.json'
];

// Install event - cache static assets
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then((cache) => cache.addAll(urlsToCache))
  );
});

// Activate event - clean up old caches
self.addEventListener('activate', (event) => {
  event.waitUntil(
    caches.keys().then((cacheNames) => {
      return Promise.all(
        cacheNames.map((cacheName) => {
          if (cacheName !== CACHE_NAME) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

// Fetch event - serve from cache, fallback to network
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
      .then((response) => {
        // Cache hit - return response
        if (response) {
          return response;
        }
        return fetch(event.request);
      })
  );
});

// Push notification event
self.addEventListener('push', (event) => {
  const data = event.data.json();
  const options = {
    body: data.body,
    icon: '/icons/icon-192x192.png',
    badge: '/icons/badge-72x72.png',
    vibrate: [100, 50, 100],
    data: {
      dateOfArrival: Date.now(),
      primaryKey: 1
    }
  };
  
  event.waitUntil(
    self.registration.showNotification(data.title, options)
  );
});

// Notification click event
self.addEventListener('notificationclick', (event) => {
  event.notification.close();
  event.waitUntil(
    clients.openWindow('/')
  );
});

3. index.html Modifications

Add to <head> section of index.html

<!-- PWA Meta Tags -->
<meta name="theme-color" content="#5D7B6F">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="Lyfe">

<!-- Manifest -->
<link rel="manifest" href="/manifest.json">

<!-- iOS Icons -->
<link rel="apple-touch-icon" sizes="180x180" href="/icons/icon-180x180.png">
<link rel="apple-touch-icon" sizes="152x152" href="/icons/icon-152x152.png">
<link rel="apple-touch-icon" sizes="144x144" href="/icons/icon-144x144.png">

<!-- Favicon -->
<link rel="icon" type="image/png" sizes="32x32" href="/icons/icon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icons/icon-16x16.png">

<!-- Service Worker Registration -->
<script>
  if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
      navigator.serviceWorker.register('/service-worker.js')
        .then((registration) => {
          console.log('SW registered: ', registration);
        })
        .catch((error) => {
          console.log('SW registration failed: ', error);
        });
    });
  }
</script>
Push Notifications Implementation

Required Backend Setup:

  • •VAPID Keys: Generate public/private key pair for Web Push
  • •Push Service: Backend service to send push notifications via Web Push API
  • •Subscription Storage: Database to store user push subscriptions

Notification Use Cases:

1.Daily Task Reminder: Send at user-configured time (default 8:00 AM) reminding of today's tasks
2.Weekly Goal Check-in: Every Monday morning, remind user to set weekly goals
3.Overdue Task Alert: Notify when tasks are past due date
4.Achievement Celebration: When user completes all daily tasks or weekly goals

Frontend Integration Needed:

We need an API endpoint or Base44 SDK method to:

// Subscribe to push notifications
await base44.pwa.subscribeToPush(subscription);
// Unsubscribe from push notifications
await base44.pwa.unsubscribeFromPush();
// Update notification preferences
await base44.pwa.updateNotificationPreferences(settings);
Offline Support Requirements

Basic offline functionality to improve user experience when internet connection is unavailable.

Cache Strategy:

  • • Static Assets: Cache app shell (HTML, CSS, JS, images)
  • • API Responses: Cache recent tasks, visions, and user data
  • • Stale-While-Revalidate: Show cached content, update in background

User Experience:

  • • Display offline indicator when no connection
  • • Allow viewing cached tasks and visions
  • • Queue changes to sync when back online
  • • Show "You're offline" banner with sync status
Installation & App-Like Experience

Install Prompt:

Show an "Install App" banner when PWA criteria are met (after user has visited 2-3 times).

Example Prompt:

"Install Lyfe on your device for a better experience! Access your goals offline and receive daily reminders."

App-Like Features:

  • • Standalone Mode: Opens without browser UI (no address bar, tabs)
  • • Display Mode: fullscreen on mobile, standalone on desktop
  • • Orientation: Portrait-primary on mobile, any on desktop
  • • Splash Screen: Custom loading screen with Lyfe logo and brand colors
Testing Checklist for Base44
PWA manifest is accessible and valid (Chrome DevTools → Application → Manifest)
Service Worker registers successfully
Install prompt appears on mobile (Android Chrome)
App installs to home screen on iOS Safari
Push notification permission request works
Push notifications are received when app is closed
Offline mode shows cached content
App works in standalone mode (no browser UI)
Icons display correctly on all platforms (home screen, splash, taskbar)
App meets all PWA criteria in Lighthouse audit

Ready to submit this to Base44 Support!
Please share this documentation with the Base44 team via the feedback button or support contact.