ReactJS PWA & Firebase - Service Worker Registration Fail in IOS
I am trying to implement web push in a PWA made in ReactS. It even achieved some success, but I'm having trouble updating the service worker, especially on 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.
My files
My 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
<!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>Solution
Unfortunately, Notifications API is not supported currently on iOS https://caniuse.com/#feat=notifications.
- Is it possible to pull css values with HTA javascript?
- What a strange syntax?
- JavaScript / Jest: How to show logs from test case only when test fails?
- How to secure my login page
- How can I create a two-way mapping in JavaScript, or some other way to swap out values?
- Route "/[locale]" used `params.locale`. `params` should be awaited before using its properties
- Page.locator() is the recommended way to select and interact with elements. Why does it offer less functionalities than Page.$()?
- How to filter object array based on attributes?
- How do you convert from emoji to unicode escapes in JS
- How to simulate a mouse click?
- Is it possible to add a single item to a vis.js timeline?
- How to ensure order of Cypress request execution
- Jquery Ajax Problem
- Can I run a function after navigating to a new page and waiting for that page to finish loading?
- Cannot start cocos after adding a new file
- Active link with React-Router?
- Is there a way to schedule offline notifications in a pwa?
- How to get the grid coordinates of an element using JavaScript?
- Bootstrap popper.js Failed to find a valid digest in the 'integrity' attribute for resource
- LeafLet map doesnt render properly on modal
- Create object from array
- How to ignore lines of code from coverage in vitest?
- How to manage CORS in Django
- How can I get an element's Accessible Name in javascript in the browser?
- TypeError: fs.readFileSync is not a function in Next.js
- Show hide divs on click in HTML and CSS without jQuery
- If an IIFE contains just one variable declaration that is immediately exported to global scope, why bother with it?
- Need explanation on following type of Javascript code
- What does an array literal with the `for` keyword inside mean in JavaScript?
- How to call a function every minute in a React component?