Skip to main content

​
Overview

The wirechat:setup-notifications command configures browser push notifications for WireChat by creating the necessary service worker files in your public directory.

​
Command Signature

php artisan wirechat:setup-notifications

​
What It Does

1

Create Wirechat Service Worker

Creates public/js/wirechat/sw.js - the WireChat-specific service worker that handles chat notifications.
2

Create Main Service Worker

Creates public/sw.js - the main service worker that imports the WireChat service worker.
3

Configure Directory Structure

Automatically creates the public/js/wirechat/ directory if it doesn’t exist.

​
Interactive Prompts

​
Overwrite WireChat Service Worker

If public/js/wirechat/sw.js already exists: 
Wirechat service worker script already exists at `js/wirechat/sw.js`. Do you want to overwrite it? (yes/no) [no]

​
Existing Main Service Worker

If public/sw.js already exists, the command will NOT overwrite it. Instead, you’ll see: 
⚠️ A service worker (sw.js) already exists in the public directory.
To use Wirechat notifications, add the following at the top of your service worker file:
`importScripts('/js/wirechat/sw.js');`
If you already have a custom service worker, you must manually integrate the WireChat service worker by adding the importScripts line.

​
Example Output

​
First-Time Setup

$ php artisan wirechat:setup-notifications

Setting up Notifications...
Creating Wirechat service worker script...
✅ Wirechat service worker script successfully created at `js/wirechat/sw.js`.

Creating main service worker script...
✅ Created `sw.js` in the public directory.
✅ Wirechat notifications setup complete!

Note: If you're already using a custom service worker in your application, you need to 
manually add `importScripts('/js/wirechat/sw.js');` to your existing service worker file 
and update the notifications.main_sw_script value in config/wirechat.php to point to your 
service worker file.

Finally, ensure that `notifications.enabled` is set to true in your Wirechat config.

​
With Existing Service Worker

$ php artisan wirechat:setup-notifications

Setting up Notifications...
Creating Wirechat service worker script...
✅ Wirechat service worker script successfully created at `js/wirechat/sw.js`.

Creating main service worker script...
⚠️ A service worker (sw.js) already exists in the public directory.
To use Wirechat notifications, add the following at the top of your service worker file:
`importScripts('/js/wirechat/sw.js');`

✅ Wirechat notifications setup complete!

​
Files Created

​
public/js/wirechat/sw.js
file
WireChat service worker that handles push notification events, click actions, and notification display.
​
public/sw.js
file
Main service worker file that imports the WireChat service worker. Only created if it doesn’t already exist.

​
Manual Integration

If you have an existing service worker, add this at the top of your public/sw.js: 
importScripts('/js/wirechat/sw.js');

// Your existing service worker code...
self.addEventListener('fetch', (event) => {
  // Your fetch handler
});

​
Configuration

After running the command, ensure notifications are enabled in your panel provider: 
public function panel(Panel $panel): Panel
{
    return $panel
        ->id('chats')
        ->webPushNotifications()
        ->serviceWorkerPath(asset('sw.js')); // Optional: custom path
}
Or in your config/wirechat.php (legacy configuration): 
'notifications' => [
    'enabled' => true,
    'main_sw_script' => 'sw.js', // Path to your service worker
],

​
Custom Service Worker Path

If you use a custom service worker path:
1

Update Panel Configuration

->serviceWorkerPath(asset('my-custom-sw.js'))
2

Import WireChat Service Worker

Add to your custom service worker:
importScripts('/js/wirechat/sw.js');
3

Update Config (if using legacy config)

'notifications' => [
    'main_sw_script' => 'my-custom-sw.js',
],

​
Testing Notifications

After setup:
  1. Ensure your application is served over HTTPS (required for service workers)
  2. Grant notification permissions in your browser
  3. Open the chat in one browser/tab and send a message from another
  4. You should see browser notifications for new messages
Service workers require HTTPS in production. For local development, localhost is treated as a secure context.

​
Troubleshooting

​
Notifications Not Working

// Ensure this is set in your panel provider
->webPushNotifications()

​
Service Worker Not Loading

Ensure the service worker file exists: 
ls -la public/sw.js
ls -la public/js/wirechat/sw.js

​
Cache Issues

Force refresh the service worker: 
// In browser console
navigator.serviceWorker.getRegistrations().then(registrations => {
  registrations.forEach(registration => registration.unregister());
});
Then hard refresh your browser (Ctrl+Shift+R or Cmd+Shift+R).

​
Source Reference

Command implementation: ~/workspace/source/src/Console/Commands/SetupNotifications.php:10