个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-02 21:51:51 25 4
gpt4 key购买 nike

我正在尝试在 ReactS 中制作的 PWA 中实现网络推送。它甚至取得了一些成功，但我在更新 Service Worker 时遇到了麻烦，尤其是在 iOS 上。当我按下按钮启用通知时，需要一段时间来更新软件，然后注册它并隐藏通知消息。那是在 Android 上，因为在 iOS 上它根本不起作用。
我的文件
enter image description here

我的 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);
        })
    );
});

我的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>

最佳答案

遗憾的是，iOS 目前不支持通知 API https://caniuse.com/#feat=notifications .

关于javascript - ReactJS PWA 和 Firebase - Service Worker 在 IOS 中注册失败，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60115527/

25 4 0
文章推荐： javascript - 使用 Microsoft Edge 中的 Canvas 上下文调整图像的亮度
文章推荐： javascript - 如何让这个数字逗号格式函数能够处理 4 精度小数？
文章推荐： javascript - 我可以从集合中插入数组吗？
文章推荐： javascript - 如何获取具有特定类的 div 数组？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com