通知 JavaScript 不显示操作按钮

Question

这是我的 JavaScript 代码。

'use strict';
/*
import {
    pkg
} from './module/';
*/

function push() {
    try {
        let p, q, y = '';
        const ng = navigator,
            j = x => {
                return JSON.parse(x)
            },
            v = './push/api/v1',
            o = x => !window.su ? alert(x) : fetch(v, {
                method: 'POST',
                headers: {
                    body: JSON.stringify({
                        a: su,
                        b: x
                    })
                }
            }),
            e = new EventSource(v);
        e.onmessage = m => {
            p = j(m.data);
            Notification.requestPermission().then(n => ng.serviceWorker.register('sw.js').then(w => {
                (p.a).forEach(b => y += {
                    "action": `"${b}"`,
                    "title": `"${b}"`
                }, );
                let arg = {
                    body: p.y,
                    icon: p.z,
                    badge: p.z,
                    actions: [y]
                };
                w.showNotification(p.x, arg);
                o(1);
                y = ''
            }))
        }
    } catch (e0) {
        alert(e0)
    }
}

<button onclick="push()">Push</button>
<span id="io">Demo...</span>
<script src="main.js"></script>

这是我的 PHP 代码

<?php
header("X-Accel-Buffering: no");
header("Content-Type: text/event-stream");
header("Cache-Control: no-cache");
while (1) {
echo 'data: {"x":"Demo notification","y":"Hence no further actions needed. Thanks for cooperation.","z":"https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Apple_logo_grey.svg/1724px-Apple_logo_grey.svg.png","a":["Archive","Demo Btn"]}'."\n\n";
sleep(10);
flush();
}
?>

我期望 PHP 代码中所述的数组元素在 JavaScript 通知中显示为按钮。我 99.9% 确信问题出在 JSON 处理上。但无法弄清楚问题所在。如果我完全删除通知 API 参数中的 actions 属性，它就可以正常工作。

如果我完全删除 actions 属性，那么我会收到通知。这是示例输出。

与通知中的“站点设置”选项类似，我希望将 JSON 元素“a”中 PHP 代码中所述的数组元素显示为按钮。

Answer 1

通知中的 actions 属性接受一个对象数组，但在这里您将其作为字符串数组传递。您可以简单地创建一个数组并在其中传递操作

let y = []

(p.a).forEach(b => y.push({
  "action": `${b}`,
  "title": `${b}`
}));
let arg = {
  body: p.y,
  icon: p.z,
  badge: p.z,
  actions: y
};