Error: Failed to open the window due to an unexpected issue

I'm encountering an issue when trying to open a new link by clicking the web push notification.

Although my code works well and I am able to open the link after clicking the notification, I am seeing an error in the console. Interestingly, when I use a hardcoded URL, there is no error shown in the console.

Any assistance with resolving this error would be greatly appreciated.

Below is my service-worker.js code:

var link;
try{
self.addEventListener('push', function(e) {
    var data = e.data.json();
    var title = data.title;

        var options = {
            body: data.body
        };
        if(data.link){
            link = data.link;
        }

        if(data.badge){
            options.badge = data.badge;
        }

        if(data.icon){
            options.icon = data.icon;
        }

        if(data.image){
            options.image = data.image;
        }

        e.waitUntil(self.registration.showNotification(title, options));

 });
}
  catch(error){
  console.log('error while sending push notification');
}
 self.addEventListener('notificationclick', function(event) {

 event.notification.close();
 event.waitUntil(clients.openWindow(link));
});

Answer №2

After encountering this issue, I scoured the internet for answers but came up empty-handed. In my case, the problem arose when the URL I was attempting to use did not include a protocol.

event.waitUntil(clients.openWindow("http://localhost:3000/app")); // This one is functional
event.waitUntil(clients.openWindow("localhost:3000/app")); // This one does not work

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The Nodejs code snippet successfully allows adding items to the cart, however, a problem arises when adding multiple quantities of similar items individually

Cart functionality is working for initially adding new items, but then each item's quantity is added individually from other similar items? // Logic for handling cart addition // router.post("/", verifyToken, async (req, res) => { let o ...

Using the output of one AJAX request as the input for a follow-up AJAX request

I'm currently facing an issue with my code, which looks like this: function (){ var myVar = myFirstAjaxFunction() $.ajax({ url: myUrl + myVar .... }) } The problem I'm encountering is that my first ajax function returns a string t ...

Using Django to load a template and incorporate a loading spinner to enhance user experience during data retrieval

In my Django project, I need to load body.html first and then dashboard.html. The dashboard.html file is heavy as it works with python dataframes within the script tag. So, my goal is to display body.html first, and once it's rendered, show a loading ...

Enhance your Sails.js model by incorporating a custom instance method as a new property

As a JavaScript programmer still learning the ropes, I encountered a challenge while working with Sails.js and creating a model. Here is what I have so far: module.exports = { tableName: 'FOO_TABLE', attributes: { FOO: 'st ...

JavaScript and HTML are commonly used programming languages for developing

By utilizing JavaScript, I was able to generate a table dynamically based on user input. For example, if the user enters 3 and clicks "go", a table with 3 rows is created. Using the .keyup function allowed me to target a column successfully. However, an i ...

Harness the power of AngularJS by crafting your unique

Hey there! I'm having a bit of trouble figuring out why this isn't showing up. Both View1.html and View2.html are in the partials folder, so that's not the issue. Sometimes the screen is completely blank, other times I only see a Name: label ...

Using HTML and JavaScript to create a link that appears as a URL but actually directs to a JavaScript function

I am working on an HTML page and I am trying to create a link that appears to go to 'example.html' but actually goes to 'javascript:ajaxLoad(example.html);'. Here is what I have tried: <a href="example" onclick="javascipt:ajaxLoad( ...

Updating array of documents in MongoDB with a new array of documents

Is there a way to properly update an array of objects in a collection without having to remove and re-insert them? I am worried about losing data if the insert operation fails after removing the existing array. How can I efficiently update all documents in ...

Best practices for efficiently updating state in React components

Currently, I am in the process of learning React and trying to grasp its concepts by practicing. One exercise I decided to tackle involves deleting an element from an array when a user clicks on it in the UI. Below is the code snippet that I have been work ...

What causes the function to return null when using router.get('/:x',..), whereas router.get('/foo/:x',...) works perfectly fine?

After weeks of struggling to identify the root cause of my issue, I finally pinpointed it. Now, I'm curious to understand the reason behind this behavior. I constructed an api for my mongodb server following the techniques I learned in school, utiliz ...

Setting up a basic node.js + socket.IO + Express server from scratch

After setting up a basic node.js socket.IO server, I quickly realized it was not sufficient for handling webpages with script tags. This led me to explore express, a straightforward web framework for node.js. While going through the express documentation ...

Can someone explain what exactly is [object Object]?

Why is the data value from the database showing as [object Object] instead of the actual data? var dataObj = $(this).closest('form').serialize(); $.ajax({ type: "POST", url: url, data: dataObj, cache: false, ...

Transferring data and parameters between the Client-Side and Server-Side

I am currently working on setting up an express.js server, but I am struggling to figure out how to send and receive data effectively. Specifically, I have an input field where users can enter their email addresses. I want this email address to be sent to ...

I'm looking to add autocomplete functionality to a text input in my project, and then retrieve and display data from a MySQL database using

Looking to enhance user experience on my form where users can select inputs. Specifically, I want to implement a feature where as the user starts typing in a text input field with data from a MYSQL database, suggestions will be displayed. The form is locat ...

What is the best way to resize a PDF to match the width and height of a canvas using

I need help with a project involving rendering previews of PDF documents in a UI similar to Google Docs. {documents.map((doc) => { return ( <div key={doc.id} className=" ...

At what point is it necessary to generate a new vertex array object when sketching numerous objects?

I'm embarking on a game development project using WebGL. Currently, I have three textures in my arsenal- one for letters used in the font, another for character sprites, and a tilemap texture for the world. With these large textures at hand, I find m ...

Adding a function into a node within PostgreSQL

Hi there, I'm currently following a tutorial and attempting to execute a simple insert query, however, I keep encountering a 404 error. I am using Postman to input values. function function insertUser(req, res, next){ req.body.users = parseInt(r ...

Enhancing User Experience with AJAX Page Loading and Progress Tracker

I'm looking to create a jQuery AJAX page load with a progress bar displayed at the top. I came across a helpful example of what I have in mind here. Any tips on how to get started would be greatly appreciated. This will be implemented on a WordPress ...

Syntax Error Unearthed: Identifier Surprise Discovered in (Javascript, ASP.NET MVC, CSHTML)

I encountered an error when attempting to remove a dynamically created HTML element by clicking the corresponding remove button. The goal is to invoke the remove method at the end of the script and pass along certain arguments. However, I'm facing iss ...

What could be the reason behind the occurrence of an error after deleting certain lines of code

The code below is functioning correctly. obj = { go: function() { alert(this) } } obj.go(); // object (obj.go)(); // object (a = obj.go)(); // window (0 || obj.go)(); // window However, an error arises when I comment out the first two lines. obj ...