ReactJS PWA 和 Firebase - IOS 中的 Service Worker 注册失败

Question

I am trying to implement web push in a PWA made in ReactS.我正在尝试在 ReactS 制作的 PWA 中实现网络推送。 It even achieved some success, but I'm having trouble updating the service worker, especially on iOS.它甚至取得了一些成功，但我在更新 Service Worker 时遇到了麻烦，尤其是在 iOS 上。 When I press the button to enable notifications, it takes a while to update the SW and then register it and hide the notification message.当我按下按钮启用通知时，需要一段时间来更新软件，然后注册它并隐藏通知消息。 That's on Android, because on iOS it doesn't work at all.那是在 Android 上，因为在 iOS 上它根本不起作用。
My files我的文件

My service-worker-custom.js我的 service-worker-custom.js

 console.log('Service Worker Custom'); importScripts('://www.gstatic.com/firebasejs/4.8.1/firebase-app.js'); importScripts('://www.gstatic.com/firebasejs/4.8.1/firebase-messaging.js'); firebase.initializeApp({ messagingSenderId: "444099730124" }); const messaging = firebase.messaging(); self.addEventListener('install', function (e) { e.waitUntil( caches.open('pwa').then(function (cache) { return cache.addAll([ '/', '/index.html', ]); }) ); }); self.addEventListener('fetch', function (event) { // console.log(event.request.url); event.respondWith( caches.match(event.request).then(function (response) { return response || fetch(event.request); }) ); });

My index.html我的 index.html

 <!doctype html> <html lang="pt-br"> <head> <title>PWA</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="theme-color" content="#000000"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capaz" content = "yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-title" content="Yeapps PWA"> <meta name="description" content="Yeapps PWA"> <!-- Add meta theme-color --> <meta name="theme-color" content="#007bff" /> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bulma/0.4.3/css/bulma.min.css"> <!-- manifest.json provides metadata used when your web app is added to the homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/ --> <!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json"> <link rel="shortcut icon" href="%PUBLIC_URL%/icons/192X192.png"> <link rel="apple-touch-icon" href="%PUBLIC_URL%//icons/icon-152x152.png"> --> <link rel="manifest" href="./manifest.json"> <!-- <link rel="shortcut icon" href="./icons/192X192.png"> --> <link rel="shortcut icon" href="./icons/Icon-16.png"> <link rel="shortcut icon" href="./icons/Icon-20.png"> <link rel="shortcut icon" href="./icons/Icon-29.png"> <link rel="shortcut icon" href="./icons/Icon-32.png"> <link rel="shortcut icon" href="./icons/Icon-40.png"> <link rel="shortcut icon" href="./icons/Icon-48.png"> <link rel="shortcut icon" href="./icons/Icon-50.png"> <link rel="shortcut icon" href="./icons/Icon-55.png"> <link rel="shortcut icon" href="./icons/Icon-57.png"> <link rel="shortcut icon" href="./icons/Icon-58.png"> <link rel="shortcut icon" href="./icons/Icon-60.png"> <link rel="shortcut icon" href="./icons/Icon-64.png"> <link rel="shortcut icon" href="./icons/Icon-72.png"> <link rel="shortcut icon" href="./icons/Icon-76.png"> <link rel="shortcut icon" href="./icons/Icon-80.png"> <link rel="shortcut icon" href="./icons/Icon-87.png"> <link rel="shortcut icon" href="./icons/Icon-88.png"> <link rel="shortcut icon" href="./icons/Icon-100.png"> <link rel="shortcut icon" href="./icons/Icon-114.png"> <link rel="shortcut icon" href="./icons/Icon-120.png"> <link rel="shortcut icon" href="./icons/Icon-128.png"> <link rel="shortcut icon" href="./icons/Icon-144.png"> <link rel="shortcut icon" href="./icons/Icon-152.png"> <link rel="shortcut icon" href="./icons/Icon-167.png"> <link rel="shortcut icon" href="./icons/Icon-172.png"> <link rel="shortcut icon" href="./icons/Icon-180.png"> <link rel="shortcut icon" href="./icons/Icon-196.png"> <link rel="shortcut icon" href="./icons/Icon-256.png"> <link rel="shortcut icon" href="./icons/Icon-512.png"> <link rel="shortcut icon" href="./icons/Icon-1024.png"> <link rel="apple-touch-icon" sizes="16x16" href="./icons/Icon-16.png"> <link rel="apple-touch-icon" sizes="20x20" href="./icons/Icon-20.png"> <link rel="apple-touch-icon" sizes="29x29" href="./icons/Icon-29.png"> <link rel="apple-touch-icon" sizes="32x32" href="./icons/Icon-32.png"> <link rel="apple-touch-icon" sizes="40x40" href="./icons/Icon-40.png"> <link rel="apple-touch-icon" sizes="48x48" href="./icons/Icon-48.png"> <link rel="apple-touch-icon" sizes="50x50" href="./icons/Icon-50.png"> <link rel="apple-touch-icon" sizes="55x55" href="./icons/Icon-55.png"> <link rel="apple-touch-icon" sizes="57x57" href="./icons/Icon-57.png"> <link rel="apple-touch-icon" sizes="58x58" href="./icons/Icon-58.png"> <link rel="apple-touch-icon" sizes="60x60" href="./icons/Icon-60.png"> <link rel="apple-touch-icon" sizes="64x64" href="./icons/Icon-64.png"> <link rel="apple-touch-icon" sizes="72x72" href="./icons/Icon-72.png"> <link rel="apple-touch-icon" sizes="76x76" href="./icons/Icon-76.png"> <link rel="apple-touch-icon" sizes="80x80" href="./icons/Icon-80.png"> <link rel="apple-touch-icon" sizes="87x87" href="./icons/Icon-87.png"> <link rel="apple-touch-icon" sizes="88x88" href="./icons/Icon-88.png"> <link rel="apple-touch-icon" sizes="100x100" href="./icons/Icon-100.png"> <link rel="apple-touch-icon" sizes="114x114" href="./icons/Icon-114.png"> <link rel="apple-touch-icon" sizes="120x120" href="./icons/Icon-120.png"> <link rel="apple-touch-icon" sizes="128x128" href="./icons/Icon-128.png"> <link rel="apple-touch-icon" sizes="144x144" href="./icons/Icon-144.png"> <link rel="apple-touch-icon" sizes="152x152" href="./icons/Icon-152.png"> <link rel="apple-touch-icon" sizes="167x167" href="./icons/Icon-167.png"> <link rel="apple-touch-icon" sizes="172x172" href="./icons/Icon-172.png"> <link rel="apple-touch-icon" sizes="180x180" href="./icons/Icon-180.png"> <link rel="apple-touch-icon" sizes="196x196" href="./icons/Icon-196.png"> <link rel="apple-touch-icon" sizes="256x256" href="./icons/Icon-256.png"> <link rel="apple-touch-icon" sizes="512x512" href="./icons/Icon-512.png"> <link rel="apple-touch-icon" sizes="1024x1024" href="./icons/Icon-1024.png"> <!-- Notice the use of %PUBLIC_URL% in the tags above. It will be replaced with the URL of the `public` folder during the build. Only files inside the `public` folder can be referenced from the HTML. Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> <link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" /> <script src="https://www.gstatic.com/firebasejs/7.8.0/firebase-app.js"></script> <script src="https://www.gstatic.com/firebasejs/7.8.0/firebase-messaging.js"></script> <!-- <link rel="stylesheet" href="//use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous"> --> </head> <body> <noscript> You need to enable JavaScript to run this app. </noscript> <div id="root"></div> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> firebase.initializeApp({ apiKey: "AIzaSyDDxGUQxbWUhRH483KpbroAVprlYa1LQPg", authDomain: "yeapps-pwa.firebaseapp.com", databaseURL: "https://yeapps-pwa.firebaseio.com", projectId: "yeapps-pwa", storageBucket: "yeapps-pwa.appspot.com", messagingSenderId: "444099730124", appId: "1:444099730124:web:d43ba455127c07e6694069" }); if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/service-worker-custom.js').then(function (registration) { firebase.messaging().useServiceWorker(registration); console.log('Worker registration successful', registration.scope); }, function (err) { console.log('Worker registration failed', err); }).catch(function (err) { console.log(err); }); } else { console.log('Service Worker is not supported by browser.'); }`enter code here` </script> </body> </html>

Answer 1

不幸的是，iOS https://caniuse.com/#feat=notifications目前不支持 Notifications API。

ReactJS PWA 和 Firebase - IOS 中的 Service Worker 注册失败

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-02-08 13:32:32

ReactJS PWA 和 Firebase - IOS 中的 Service Worker 注册失败

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-02-08 13:32:32

解决方案1
1 已采纳 2020-02-08 13:32:32