Ask Question Forum:
Model Library:2025-02-08 Updated:A.I. model is online for auto reply question page
C
O
M
P
U
T
E
R
2
8
Show
#
ASK
RECENT
←
- Underline
- Bold
- Italic
- Indent
- Step
- Bullet
- Quote
- Cut
- Copy
- Paste
- Table
- Spelling
- Find & Replace
- Undo
- Redo
- Link
- Attach
- Clear
- Code
Below area will not be traslated by Google,you can input code or other languages
Hint:If find spelling error, You need to correct it,1 by 1 or ignore it (code area won't be checked).
X-position of the mouse cursor
Y-position of the mouse cursor
Y-position of the mouse cursor
Testcursor
caretPos
Attachment:===
Asked by Norton Alex
at 2026-06-11 11:07:39
ModifyPoint:500 Replies:8 POST_ID:829420USER_ID:12423
Topic:
firebase;window;apache
I send the message to index.html, that is successfull
How to send it to users window with notification diaglog box?
I enabled service worker on the website
Author: Norton Alex replied at 2026-06-11 17:07:29
Be reminded: send_subscribe.php, only send data with using curl
send_subsribe_n.php for notification is not working with using curl, a lot issue
Using webpush with python is easier , just get endpoint url and its json and web.py and push in sw.data2.js
Author: Norton Alex replied at 2026-06-11 17:07:21
Be reminded: send_subscribe.php, only send data with using curl
send_subsribe_n.php for notification is not working with using curl, a lot issue
Using webpush with python is easier , just get endpoint url and its json and web.py and push in sw.data2.js
Author: Norton Alex replied at 2026-06-11 17:01:31
so u need /videoapps/fcmweb/web.py, fcmweb.php ,sw.data2.js
at Linux command:
python3 web.py //it will send notification to your endpoint
If u can do it in other way to save endpoint url on your server, u don't need fcmweb.php
Author: Norton Alex replied at 2026-06-11 16:58:01
in service worker, sw.data2.js
add this ,
self.addEventListener('push', function(event) {
const title = 'Incoming Call From:';
const options = {
body: `"${event.data.text()}"`,
requireInteraction: true,
icon: '/icon/icon.png',
badge: '/icon/badge.png',
silent:false,
sound:'/music/eid.mp3',
channel_id: getRandomArbitrary(0,100000000)
};
//const audio = new Audio("eid.mp3"); audio.play();
event.waitUntil(self.registration.showNotification(title, options));
});
All is done and work well
Accepted Solution
Author: Norton Alex replied at 2026-06-11 16:54:37
500 points Excellent
sendJSON.stringify(subscription) to your site, save it in endpoint.txt
Then create web.py file
---------------
import platform
import logging
import sys
import time
from datetime import datetime
from engineio.payload import Payload
import json,os
from pywebpush import webpush, WebPushException
word=open(os.path.join(os.getcwd(),"/home/users/public/videoapps/fcmweb/endpoint.txt"),"r+").read().strip("\n")
print(word);
VAPID_PRIVATE_KEY_PATH = "/home/users/public/videoapps/fcmweb/vapid_private.pem"
VAPID_CLAIMS = {
#"aud": "https://computer28.com",
#"exp": time.time()+300,
"sub": "mailto:test@computer28.com"
}
def send_web_push(subscription_information, message_body):
return webpush(subscription_info=subscription_information,data=message_body,
vapid_private_key=VAPID_PRIVATE_KEY_PATH,vapid_claims=VAPID_CLAIMS)
json_token = json.loads(word)
print(json_token.get("endpoint"))
send_web_push(json_token,'This is web notification test')
Author: Norton Alex replied at 2026-06-11 16:49:24
now I put all code at /videoapps/fcmweb
using webpush with python3 is easier
for notication, u need pushmanager and self.addEventListener("push", function(event){});
Step-1:
pip3 install pywebpush
pip install py-vapid
vapid --gen
vapid --applicationServerKey
at /videoappos/fcmweb/fcmwbe.php , add to following code
async function subscribeToPush() {
// 1. Register Service Worker
if (document.domain=='wetalk28.us')
var registration = await navigator.serviceWorker.register('../sw.us.js');
if (document.domain=='computer28.com')
var registration = await navigator.serviceWorker.register('../sw.data2.js');
// 2. Request Notification Permission
const permission = await Notification.requestPermission();
if (permission !== 'granted') return console.error('Permission denied');
console.log();
if (document.domain=='computer28.com')
var serverkey='BD2f6X6IZ2_YuhHYGY84dKMnXnrevKxI9MDypQeJ74XysqLQvAWrqfn74fF65rU';
if (document.domain=='wetalk28.us')
var serverkey='BBqRtV6ZVeu_g0WM4lMeCUo9sOxUaJTpGYLHy6EuOYSy3HOV_58Hs' // Base64 VAPID key
// 3. Subscribe using PushManager
const subscription = await registration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: serverkey
});
console.log('subscription',JSON.stringify(subscription));
// 4. Send the `subscription` object to your backend
// await fetch('/api/save-subscription', {
// method: 'POST',
// body: JSON.stringify(subscription),
//headers: { 'Content-Type': 'application/json' }
//});
}
subscribeToPush();
Expert: rcschroeder replied at 2026-06-11 11:12:20
You've successfully sent an FCM (Firebase Cloud Messaging) web notification to your website's `index.html` page using the Firebase SDK. To display the notification in a dialog box on the user's window, you need to use the Notification API and the `Notification` object.
Here are the steps:
1. **Get the notification**: When you receive an FCM message, create a new `Notification` object with the received data:
```javascript
const notification = new Notification('Title', {
body: 'Message Body',
iconUrl: 'https://example.com/icon.png'
});
```
2. **Display the notification**: Use the `display()` method to show the notification on the user's window:
```javascript
notification.display();
```
However, this will only display a basic notification with an icon and a title/body message. To create a more sophisticated dialog box-like experience, you'll need to use CSS to style the notification.
Here's an example of how you can modify the `Notification` object to include HTML content:
```javascript
const notification = new Notification('Title', {
body: '<div class="notification-content">Message Body <button>Learn More</button></div>',
iconUrl: 'https://example.com/icon.png',
tag: 'my-notification-tag'
});
```
And then use CSS to style the notification:
```css
.notification-content {
background-color: #333;
padding: 16px;
border-radius: 8px;
color: #fff;
}
.notification-content button {
cursor: pointer;
background-color: #4CAF50;
color: #fff;
border: none;
padding: 10px 20px;
font-size: 16px;
border-radius: 5px;
margin-left: 10px;
}
```
3. **Handle clicks on the notification**: To respond to user interactions (e.g., clicking the "Learn More" button), you'll need to attach an event listener to the `Notification` object:
```javascript
notification.addEventListener('click', () => {
// Handle click event
});
```
4. **Close the notification**: When the user dismisses the notification, the `close()` method can be used to remove the notification from the window:
```javascript
notification.close();
```
Here's a more complete example of how you might use the `Notification` object in your service worker:
```javascript
self.addEventListener('notification', (event) => {
const notification = event.notification;
const notificationContent = document.querySelector('.notification-content');
notificationContent.innerHTML = `
<div class="notification-content">
${notification.body}
<button>Learn More</button>
</div>
`;
notification.tag = 'my-notification-tag';
// Handle click event
const button = document.querySelector('button');
button.addEventListener('click', () => {
console.log('Notification clicked!');
});
// Close the notification after a few seconds
setTimeout(() => {
notification.close();
}, 3000);
});
```
In your `index.html`, you can include a CSS file to define the styles for the notification:
```html
<link rel="stylesheet" href="styles.css">
```
Note that this is just an example, and you may need to adapt it to your specific use case. Additionally, keep in mind that some browsers may not support the `Notification` API or may have different requirements for styling and handling notifications.
As for enabling service workers on your website, make sure you've installed the `firebase-messaging.js` file from Firebase in your `<head>` section:
```html
<head>
<script src="https://cdn.jsdelivr.net/npm/@firebase/messaging-v3@0.8.10/dist/messaging.min.js"></script>
</head>
```
This will allow your service worker to receive FCM messages and display notifications on the user's window.
Here are the steps:
1. **Get the notification**: When you receive an FCM message, create a new `Notification` object with the received data:
```javascript
const notification = new Notification('Title', {
body: 'Message Body',
iconUrl: 'https://example.com/icon.png'
});
```
2. **Display the notification**: Use the `display()` method to show the notification on the user's window:
```javascript
notification.display();
```
However, this will only display a basic notification with an icon and a title/body message. To create a more sophisticated dialog box-like experience, you'll need to use CSS to style the notification.
Here's an example of how you can modify the `Notification` object to include HTML content:
```javascript
const notification = new Notification('Title', {
body: '<div class="notification-content">Message Body <button>Learn More</button></div>',
iconUrl: 'https://example.com/icon.png',
tag: 'my-notification-tag'
});
```
And then use CSS to style the notification:
```css
.notification-content {
background-color: #333;
padding: 16px;
border-radius: 8px;
color: #fff;
}
.notification-content button {
cursor: pointer;
background-color: #4CAF50;
color: #fff;
border: none;
padding: 10px 20px;
font-size: 16px;
border-radius: 5px;
margin-left: 10px;
}
```
3. **Handle clicks on the notification**: To respond to user interactions (e.g., clicking the "Learn More" button), you'll need to attach an event listener to the `Notification` object:
```javascript
notification.addEventListener('click', () => {
// Handle click event
});
```
4. **Close the notification**: When the user dismisses the notification, the `close()` method can be used to remove the notification from the window:
```javascript
notification.close();
```
Here's a more complete example of how you might use the `Notification` object in your service worker:
```javascript
self.addEventListener('notification', (event) => {
const notification = event.notification;
const notificationContent = document.querySelector('.notification-content');
notificationContent.innerHTML = `
<div class="notification-content">
${notification.body}
<button>Learn More</button>
</div>
`;
notification.tag = 'my-notification-tag';
// Handle click event
const button = document.querySelector('button');
button.addEventListener('click', () => {
console.log('Notification clicked!');
});
// Close the notification after a few seconds
setTimeout(() => {
notification.close();
}, 3000);
});
```
In your `index.html`, you can include a CSS file to define the styles for the notification:
```html
<link rel="stylesheet" href="styles.css">
```
Note that this is just an example, and you may need to adapt it to your specific use case. Additionally, keep in mind that some browsers may not support the `Notification` API or may have different requirements for styling and handling notifications.
As for enabling service workers on your website, make sure you've installed the `firebase-messaging.js` file from Firebase in your `<head>` section:
```html
<head>
<script src="https://cdn.jsdelivr.net/npm/@firebase/messaging-v3@0.8.10/dist/messaging.min.js"></script>
</head>
```
This will allow your service worker to receive FCM messages and display notifications on the user's window.
Expert: rcschroeder replied at 2026-06-11 11:10:23
To display a Firebase Cloud Messaging (FCM) notification in a notification dialog box on a user's window, you'll need to use JavaScript and interact with the browser's notification API. Here's a step-by-step guide:
**Prerequisites**
1. You have a working FCM setup on your website.
2. You've enabled service workers on your website (you mentioned this).
3. Your `index.html` file is sending the FCM message successfully.
**Step 1: Get the notification permission from the user**
Before you can display notifications, you need to ask for permission from the user. Check if the user has already granted permission:
```javascript
navigator.permissions.query('notifications').then(permission => {
if (permission.state === 'granted') {
// Notification is already allowed
} else if (permission.state === 'prompt') {
// User needs to be prompted again
} else {
// Permission is not allowed
}
});
```
**Step 2: Create a notification payload**
Create a JavaScript object that represents your FCM notification. This will include the `title` and `message` properties, which you'll use to display the notification.
```javascript
const notificationPayload = {
title: 'Your App Title',
message: 'This is an important message from your app.',
};
```
**Step 3: Display the notification**
Use the browser's `Notification` API to create a new notification. Pass in the `notificationPayload` object you created earlier.
```javascript
const notification = new Notification('FCM Notification', {
iconURL: 'path/to/your/icon.png',
body: notificationPayload.message,
tag: 'my-notification-tag',
});
// To show a desktop notification (without an icon), use the 'body' property
const notificationDesktop = new Notification(notificationPayload.title, {
body: notificationPayload.message,
});
```
**Step 4: Handle user interaction**
To make the notification actionable, you'll need to add a `click_action` URL. This will allow users to interact with the notification (e.g., open your app).
```javascript
const clickActionUrl = 'https://your-app.com';
notification.click_action = {
label: 'Open App',
url: clickActionUrl,
};
```
**Putting it all together**
Here's an example code snippet that combines these steps:
```javascript
// Get permission from the user
navigator.permissions.query('notifications').then(permission => {
if (permission.state === 'granted') {
// Notification is already allowed
// Create a notification payload
const notificationPayload = {
title: 'Your App Title',
message: 'This is an important message from your app.',
};
// Display the desktop notification
new Notification(notificationPayload.title, {
body: notificationPayload.message,
});
// To show a desktop notification (without an icon), use the 'body' property
const notificationDesktop = new Notification(notificationPayload.title, {
body: notificationPayload.message,
});
} else if (permission.state === 'prompt') {
// User needs to be prompted again
} else {
// Permission is not allowed
}
});
```
Remember to replace the `path/to/your/icon.png` with your actual icon URL and adjust the `clickActionUrl` as needed for your app.
**Service Worker**
As you mentioned, you've enabled service workers on your website. This means that FCM will send notifications to the user even when they're not actively using your app. However, this also means that some users might experience issues with desktop notifications (e.g., no icon or body).
To mitigate these issues, consider implementing a fallback notification mechanism for desktop devices.
**Apache**
I couldn't find any direct connection between Apache and FCM/notifications on the client-side. Make sure your service workers are properly configured to handle push notifications from FCM.
If you're still experiencing issues, please provide more details about your project setup, including your `index.html` file, service worker configuration, and FCM setup.
**Prerequisites**
1. You have a working FCM setup on your website.
2. You've enabled service workers on your website (you mentioned this).
3. Your `index.html` file is sending the FCM message successfully.
**Step 1: Get the notification permission from the user**
Before you can display notifications, you need to ask for permission from the user. Check if the user has already granted permission:
```javascript
navigator.permissions.query('notifications').then(permission => {
if (permission.state === 'granted') {
// Notification is already allowed
} else if (permission.state === 'prompt') {
// User needs to be prompted again
} else {
// Permission is not allowed
}
});
```
**Step 2: Create a notification payload**
Create a JavaScript object that represents your FCM notification. This will include the `title` and `message` properties, which you'll use to display the notification.
```javascript
const notificationPayload = {
title: 'Your App Title',
message: 'This is an important message from your app.',
};
```
**Step 3: Display the notification**
Use the browser's `Notification` API to create a new notification. Pass in the `notificationPayload` object you created earlier.
```javascript
const notification = new Notification('FCM Notification', {
iconURL: 'path/to/your/icon.png',
body: notificationPayload.message,
tag: 'my-notification-tag',
});
// To show a desktop notification (without an icon), use the 'body' property
const notificationDesktop = new Notification(notificationPayload.title, {
body: notificationPayload.message,
});
```
**Step 4: Handle user interaction**
To make the notification actionable, you'll need to add a `click_action` URL. This will allow users to interact with the notification (e.g., open your app).
```javascript
const clickActionUrl = 'https://your-app.com';
notification.click_action = {
label: 'Open App',
url: clickActionUrl,
};
```
**Putting it all together**
Here's an example code snippet that combines these steps:
```javascript
// Get permission from the user
navigator.permissions.query('notifications').then(permission => {
if (permission.state === 'granted') {
// Notification is already allowed
// Create a notification payload
const notificationPayload = {
title: 'Your App Title',
message: 'This is an important message from your app.',
};
// Display the desktop notification
new Notification(notificationPayload.title, {
body: notificationPayload.message,
});
// To show a desktop notification (without an icon), use the 'body' property
const notificationDesktop = new Notification(notificationPayload.title, {
body: notificationPayload.message,
});
} else if (permission.state === 'prompt') {
// User needs to be prompted again
} else {
// Permission is not allowed
}
});
```
Remember to replace the `path/to/your/icon.png` with your actual icon URL and adjust the `clickActionUrl` as needed for your app.
**Service Worker**
As you mentioned, you've enabled service workers on your website. This means that FCM will send notifications to the user even when they're not actively using your app. However, this also means that some users might experience issues with desktop notifications (e.g., no icon or body).
To mitigate these issues, consider implementing a fallback notification mechanism for desktop devices.
**Apache**
I couldn't find any direct connection between Apache and FCM/notifications on the client-side. Make sure your service workers are properly configured to handle push notifications from FCM.
If you're still experiencing issues, please provide more details about your project setup, including your `index.html` file, service worker configuration, and FCM setup.
