4

この記事に従って、プッシュ通知に Service Worker を使用しています。Chrome ではすべてが機能しますが、Firefox (v.44.0.2) では奇妙な問題が発生します。アプリへのログインに成功したら、プッシュ イベントを待機するだけの Service Worker を登録します。正しく登録されていることがわかります（いくつかのログとabout:serviceworkersから）。ここで、ページを更新すると (CTRL+R)、この Service Worker が原因ですべての POST に CORS の問題 ( Access-Control-Allow-Originヘッダーがない) があり、ユーザーはログイン ページにリダイレクトされます。これ以降、同じ理由ですべての POST が機能しなくなります。逆に、ログインしたら Service Worker の登録を解除してからリフレッシュ、まったく問題ありません。何が起こっているのか分かりますか？繰り返しますが、サービスワーカーはプッシュイベントを処理するだけで、キャッシュは行われず、他の処理は行われず、Chrome で完全に動作します。

これが私のService Workerコードです（ SOME_API_URL は、Service Workerの登録後に問題が発生するため、テスト目的では必要のない実際のAPIを指しています。プッシュイベントは必要ありません）

self.addEventListener('push', function(event) {
  // Since there is no payload data with the first version
  // of push messages, we'll grab some data from
  // an API and use it to populate a notification
  event.waitUntil(
    fetch(SOME_API_URL).then(function(response) {
      if (response.status !== 200) {
        // Either show a message to the user explaining the error
        // or enter a generic message and handle the
        // onnotificationclick event to direct the user to a web page
        console.log('Looks like there was a problem. Status Code: ' + response.status);
        throw new Error();
      }

      // Examine the text in the response
      return response.json().then(function(data) {
        if (data.error || !data.notification) {
          console.error('The API returned an error.', data.error);
          throw new Error();
        }

        var title = data.notification.title;
        var message = data.notification.message;
        var icon = data.notification.icon;
        var notificationTag = data.notification.tag;

        return self.registration.showNotification(title, {
          body: message,
          icon: icon,
          tag: notificationTag
        });
      });
    }).catch(function(err) {
      console.error('Unable to retrieve data', err);

      var title = 'An error occurred';
      var message = 'We were unable to get the information for this push message';

      var notificationTag = 'notification-error';
      return self.registration.showNotification(title, {
        body: message,
        tag: notificationTag
      });
    })
  );
});

self.addEventListener('notificationclick', function(event) {
  console.log('On notification click: ', event.notification.tag);
  // Android doesn't close the notification when you click on it
  // See: http://crbug.com/463146
  event.notification.close();

  // This looks to see if the current is already open and
  // focuses if it is
  event.waitUntil(
    clients.matchAll({
        type: 'window'
      })
      .then(function(clientList) {
        for (var i = 0; i < clientList.length; i++) {
          var client = clientList[i];
          if (client.url == '/' && 'focus' in client)
            return client.focus();
        }
        if (clients.openWindow) {
          return clients.openWindow('/');
        }
      })
  );
});
4

1 に答える 1

3

Firefox 44 にはバグ 1243453があり、Service Worker がフェッチ イベントをリッスンしない場合、クロスオリジン リクエストの Origin ヘッダーがドロップされます。

このバグは、2016 年 3 月 8 日の週にリリースされる Firefox 45 で修正されています (この記事の執筆時点では、来週です)。それまでの間、最新の Firefox リリースにすぐにアップグレードしないユーザーは、次のコードを Service Worker に追加することで問題を回避できます。

addEventListener('fetch', function(evt) {
  evt.respondWith(fetch(evt.request));
});
于 2016-03-04T19:47:16.353 に答える