Error: This Service Worker is restricted to secure origins only due to a DOMException

Having trouble implementing this on my website; it keeps showing the following error. Help, please!

Service Worker Error DOMException: Only secure origins are allowed.

if ('serviceWorker' in navigator && 'PushManager' in window) {
  console.log('Service Worker and Push is supported');

  navigator.serviceWorker.register("{{ 'sw.js' | asset_url }}")
  .then(function(swReg) {
registration.pushManager.subscribe({ userVisibleOnly: true })
.then(function(subscription) {
            console.log('endpoint:', subscription.endpoint);
        });
    console.log('Service Worker is registered', swReg);

    swRegistration = swReg;
    initialiseUI();
  })
  .catch(function(error) {
    console.error('Service Worker Error', error);
  });
} else {
  console.warn('Push messaging is not supported');
  pushButton.textContent = 'Push Not Supported';
}

https://i.sstatic.net/v4O1G.png

Answer №1

It is recommended to enable web push notifications on a secure website by installing an SSL Certificate. You can test the functionality at

Please note that SSL Certificate is not required for testing on localhost. Simply visit localhost.

Answer №2

For increased security, the transport layer security (TLS) protocol utilizes either localhost or 127.0.0.1 as secure origins. Give it a try and you may find that this resolves your issue.

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

express-session fails to remove sessions from mongodb

account.js (node.js part) const express = require("express"); const router = express.Router(); router.post("/logout", (req, res) => { console.log("session: ", req.session); req.session.destroy(); console.log("session: ", req.session); res.send ...

Discovering the data from a JSON serialization in JavaScript

Within my PrintViewModel list, there is a sublist called Summary. I am working with ASP.NET MVC. @model CRC.Models.PrintViewModel; <label id="lblTotalMonthlyLoanDeduction"></label> I am serializing it using JSON. var obj = @Json.Se ...

Setting up a React application and API on the same port: A step-by-step guide

I have developed a React app that fetches data from a separate database through an API. While testing the app locally, it runs on one port while the API runs on another port. Since I need to make AJAX calls from the app to the API, I have to specify the ...

Why does Material-UI TableCell-root include a padding-right of 40px?

I'm intrigued by the reasoning behind this. I'm considering overriding it, but I want to ensure that I'm not undoing someone's hard work. .MuiTableCell-root { display: table-cell; padding: 14px 40px 14px 16px; font-size: 0. ...

Encountering an issue with Meteor and node-celery: "Unable to access property 'slice' of null"

Check out the Github repository for reproducing this issue Run localhost:3000 to replicate the problem. In my setup with Meteor 1.4.4.1, I am utilizing the node-celery npm packages on the server side. Upon Meteor initialization, the client automatically i ...

Tips for eliminating nested switchMaps with early returns

In my project, I have implemented 3 different endpoints that return upcoming, current, and past events. The requirement is to display only the event that is the farthest in the future without making unnecessary calls to all endpoints at once. To achieve th ...

What is causing the unexpected behavior in this Vue transformation?

I am currently attempting to implement a simple slide panel using Vue.js, similar to the one shown in this example website: . However, I am facing an issue where the panel does not slide; instead, it waits for 2 seconds and then closes without any animatio ...

ASP updatepanel textbox focusing - Working only with breakpoints, not without them

I've encountered a bizarre problem where my code functions perfectly with a breakpoint set, but when I remove the breakpoint, certain parts of the code fail to work. My goal is to have a textbox automatically select all text upon focus; it should foc ...

Encountering issues with the functionality of async await

I am a beginner when it comes to utilizing the async, await, and promise features in JavaScript. My current focus is on: async function sendTextMessage(text) { console.log("----1----"); var messageData = { message: { text: tex ...

What is the best way to align my clip-path's text with the center of the viewport and ensure that all of the clip-path's text is visible?

Check out my React component demo: https://codesandbox.io/s/epic-brown-osiq1. I am currently utilizing the values of viewBox, getBBox, and getBoundingClientRect() to perform calculations for positioning elements. At the moment, I have hardcoded some values ...

Data is not being refreshed by Ajax

In my forum, users are only allowed to edit and delete their own comments. I have set up an "edit" button that opens a modal when clicked, giving the user access to the data they submitted before. I've written an ajax function to target these fields a ...

How to accentuate search results using Angular filters and conceal non-matching text?

Recently, I came across an interesting example of using Angular filter to highlight search results. It works well in highlighting the word 'suit', but I noticed that all non-matching text remains visible. If you'd like to see the example I ...

What is the best way to determine if two external values are equal within a mongodb criteria object?

Consider the following collection: {id: 1, name:"abc"}, {id: 2, name:null} When testing a property, I typically use this method: db.collecton.find({name:"abc"}, {name:1}); // This will return the first document. Now, I want to incorporate two external ...

Using jQuery to revert back to the original SRC after mouse is not hovering over an element

I've been working on a script to change the src attribute for an icon. The icon I'm loading is a different color and it's meant to notify the user about the link associated with it. Currently, I have the src changing to the second icon on h ...

Mastering the Art of Defining JavaScript Classes in React-Native

In my React Native project, I am faced with a situation where I need to create a new class: class customClass { email: string; name: string; constructor() { setUser(fbid: string, token: string): boolean { To keep things organized, I decide ...

In Angular 2, transferring data from a parent route to a child route

I have set up a route named "home" with three child routes: documents, mail, and trash. Within the home route component, there is a variable called 'user'. While I am familiar with various methods of passing information between parent and child c ...

Looping through AJAX calls

Currently, I have a dataset that needs to be displayed on my webpage. Each item in the list has a unique identifier. Every item represents a bar and there is a corresponding document for bars that are visited by at least one user. If a bar has no visitors ...

What steps can I take to address security issues related to iframes?

Are there other security risks to consider when using iframes besides XSS vulnerabilities? How can I ensure that my website is secure when utilizing iframes? I've seen some JavaScript code that uses top.window, but I'm hesitant to rely on client ...

Promise.all() ensures that all promises in the array are resolved with the same value

Currently, I'm in the process of developing a module that contains a function designed to return a promise using Promise.all() for the purpose of sending emails to multiple users. By simplifying the code, I have managed to isolate and reproduce the is ...

What is the best way to organize class usage within other classes to prevent circular dependencies?

The engine class presented below utilizes two renderer classes that extend a base renderer class: import {RendererOne} from "./renderer-one"; import {RendererTwo} from "./renderer-two"; export class Engine { coordinates: number; randomProperty: ...