CODEWITHSUNDEEP
reactjsprogressive-web-appsservice-workerbrowser-cacheoffline-caching
Junaid
Junaid

Reputation: 11

PWA works on localhost but not with IP address in React app

I'm developing a React application with PWA (Progressive Web App) functionality, and it works perfectly when I access it via http://localhost:3000. However, when I try to run the application using my machine's IP address (http://192.168.20.71:3000), the PWA doesn't seem to work. The service worker and caching functionalities don't get registered.

Here are some details of my setup:

Frontend:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]
</IfModule>



{
    "name": "SIB Currency Tracker",
    "short_name": "CurrencyTracker",
    "start_url": "/",
    "display": "fullscreen",
    "background_color": "#ffffff",
    "theme_color": "#000000",
    "icons": [{
        "src": "/sibplc-logo.png",
        "type": "image/png",
        "sizes": "512x512"
    }]
}


const CACHE_NAME = 'currency-tracker-cache';
const DATA_CACHE_NAME = 'data-cache-v1';
const API_URL = 'http://192.168.20.71:8000/api/data';

self.addEventListener('install', (event) => {
    event.waitUntil(
        caches.open(CACHE_NAME).then((cache) => {
            return cache.addAll([
                '/',
                '/index.html',
                '/src/main.jsx',
                '/src/App.jsx',
                '/assets/css/style.css',
                '/App.css',
            ]);
        })
    );
    self.skipWaiting();
});

self.addEventListener('activate', (event) => {
    event.waitUntil(
        caches.keys().then((keyList) => {
            return Promise.all(
                keyList.map((key) => {
                    if (key !== CACHE_NAME && key !== DATA_CACHE_NAME) {
                        return caches.delete(key);
                    }
                })
            );
        })
    );
    self.clients.claim();
});

self.addEventListener('fetch', (event) => {
    if (event.request.url.includes(API_URL)) {
        event.respondWith(
            caches.open(DATA_CACHE_NAME).then((cache) => {
                return fetch(event.request)
                    .then((response) => {
                        if (response.status === 200) {
                            cache.put(event.request.url, response.clone());
                        }
                        return response;
                    })
                    .catch(() => {
                        return cache.match(event.request);
                    });
            })
        );
    } else if (event.request.destination === 'image') {
        event.respondWith(
            caches.open(CACHE_NAME).then((cache) => {
                return cache.match(event.request).then((response) => {
                    return response || fetch(event.request).then((networkResponse) => {
                        cache.put(event.request, networkResponse.clone());
                        return networkResponse;
                    });
                });
            })
        );
    } else {
        event.respondWith(
            caches.match(event.request).then((response) => {
                return response || fetch(event.request);
            })
        );
    }
});



<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/sibplc-logo.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="SIB PWA Currency Tracker App" />
    <link rel="apple-touch-icon" href="/sibplc-logo.png" />
    <link rel="manifest" href="/manifest.json" />
    <title>SIB Currency Tracker</title>
</head>
<body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
    <script>
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                navigator.serviceWorker.register('/service-worker.js').then((registration) => {
                    console.log('Service Worker registered with scope:', registration.scope);
                }, (err) => {
                    console.log('Service Worker registration failed:', err);
                });
            });
        }
    </script>
</body>
</html>

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
    plugins: [react()],
    server: {
        host: '192.168.20.71',
        port: 3000
    }
});

Upvotes: 0

Views: 22

Answers (0)

Related Questions