Question

我从网络应用发送通知。在桌面上这可以正常工作，但是当我将通知发送到手机时，点击通知会打开网络应用程序...但仅限于横向。不仅如此，即使我在设置中将方向更改为肖像，它也拒绝让我更改为肖像？

我不确定我需要包含哪些代码，因此这里是网络应用的manifest.json和通知的serviceWorker.js。

的manifest.json

{
  "name": "My Web App",
  "icons": [
    {
      "src": "/images/android-icon-36x36.png",
      "sizes": "36x36",
      "type": "image/png",
      "density": 0.75
    },
    {
      "src": "/images/android-icon-48x48.png",
      "sizes": "48x48",
      "type": "image/png",
      "density": 1.0
    },
    {
      "src": "/images/android-icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png",
      "density": 1.5
    },
    {
      "src": "/images/android-icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png",
      "density": 2.0
    },
    {
      "src": "/images/android-icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png",
      "density": 3.0
    },
    {
      "src": "/images/android-icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "density": 4.0
    }
  ],
  "short_name": "App",
  "description": "It should work",
  "start_url": "index.php",
  "display": "standalone",
  "orientation": "portrait" // Why is this not doing anything!
}

serviceWorker.js

self.addEventListener('push', function (event) {
    if (!(self.Notification && self.Notification.permission === 'granted')) {
        return;
    }

    const sendNotification = content => {
        const title = content.title;
        const options = {
          body: content.body,
          icon: "/images/notify/logox.png",
          badge: "/images/notify/badge.png",
          vibrate: [100,600,100,100,600],
          actions: [
            {
              title: "Action",
              icon: "/images/action.png",
              action: "default-action"
            }
          ]
        };

        return self.registration.showNotification(title, options);
    };

    if (event.data) {
        const message = event.data.json();
        event.waitUntil(sendNotification(message));
    }
});
self.addEventListener('notificationclick', function(event) {
    let url = 'http://example.com/';
    event.notification.close(); // Android needs explicit close.
    event.waitUntil(
        clients.matchAll({type: 'window'}).then( windowClients => {
            // Check if there is already a window/tab open with the target URL
            for (var i = 0; i < windowClients.length; i++) {
                var client = windowClients[i];
                // If so, just focus it.
                if (client.url === url && 'focus' in client) {
                    return client.focus();
                }
            }
            // If not, then open the target URL in a new window/tab.
            if (clients.openWindow) {
                return clients.openWindow(url);
            }
        })
    );
});

当我从开始屏幕（在Android上）打开网络应用时，它会以纵向打开，应该如此。当我从通知中打开它时，为什么会发生这种情况？这是怎么回事？

Answer 1

您可以使用

强制用户设备方向为人像

screen.orientation.lock('portrait');

找到的示例here

推送通知强制Web应用程序进入格局

1 个答案: