Pusher-js doesn't display on PWA production

[MahmonirB]

I have an issue with displaying push notification on PWA, it works in development env but after build and deploy doesn't show anything. What should I do and how to set/modify/define pusher-js config into vite?

• vite.config.ts file:

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

// https://vitejs.dev/config/ export default defineConfig({ plugins: [ react(), VitePWA({ registerType: 'prompt', includeAssets: ['favicon.ico', 'apple-touch-icon.png', '*/.{png}'], manifest: { id: '1.0.1', name: 'Anime Suche', short_name: 'Anime', theme_color: '#fff', start_url: '/', display: 'standalone', orientation: 'portrait', icons: [ { src: '/favIcons/pwa-192x192.png', sizes: '192x192', type: 'image/png', }, { src: '/favIcons/pwa-512x512.png', sizes: '512x512', type: 'image/png', }, ], }, }), ], });

file that use pusher-js to show push-notofocation:

import React, { useEffect, useState } from 'react'; import Pusher from 'pusher-js'; import Alert from '../../components/alert/Alert';

interface PushBody { title: string; message: string; }

function PushNotification() { const [notification, setNotification] = useState<any | undefined>();

useEffect(() => {
    const pusher = new Pusher(`${import.meta.env.VITE_PUSH_API_KEY}`, {
        cluster: 'eu',
    });

    const channel = pusher.subscribe('my-channel');
    channel.bind('my-event', function (data: PushBody) {
        setNotification(data);
    });

    return () => {
        pusher.unbind();
        channel.unbind();
    }
}, []);

if (notification)
    return (
        <Alert
            title={notification?.title}
            content={notification?.message}
            onClose={() => setNotification(undefined)}
        />)

return <></>;

}

export default PushNotification;

[userquin]

@MahmonirB I have no idea what is Pusher-js

[MahmonirB]

@userquin pusher-js is a package for managing push notification in client and server side. As I wrote above, it works on dev mode, but after build and deploy on sever it does not work, I don't receive any push notification.

[userquin]

@MahmonirB it is an external dependency, you should file an issue on the corresponding repo.

Are you receiving any error about pwa plugin such as sw registration error or similar or web manifest not shown in dev tools?

[MahmonirB]

@userquin yes I get error in reading manifest, in development I can find it into application tab in browser but in production is not found. https://anime-browsing.vercel.app/

[userquin]

@MahmonirB the sw is registered and the web manifest is there:

[userquin]

[MahmonirB]

You're right, it works, I had to set pusher api key into environment variable in Vercel. Thanks, Before that I was manipulating vite config.