Unable to successfully register a ServiceWorker due to an unsupported MIME type ('text/html') in Vue.js

I have successfully implemented a service worker in my Vue.js project before with simple HTML projects, where it worked great. However, when I include the same file in my Vue.js code, it keeps throwing an error:

The script has an unsupported MIME type ('text/html'). index.js?3609:11 Service wroker: error: SecurityError: Failed to register a ServiceWorker: The script has an unsupported MIME type ('text/html').

Here is the code I used to register my service worker:

if (navigator.serviceWorker) {
    console.log("Service wroker: available");
    window.addEventListener("load", () => {
        navigator.serviceWorker
            .register("/service-worker.js")
            .then(res => console.log("Service worker: registered successfully"))
            .catch(err => console.log("Service wroker: error: " + err))
    })
} else {
    console.log("Servicde wroker: not found");
}

My service worker file:

        // This service worker caches all the responses of the sites besides caching files and assets individually

    const cacheName = "v1";

    // Install service worker

    self.addEventListener("install", (e) => {
        console.log("Service wroker: installed")
    })


    // Call activate event...

    [Code continues...]

I have successfully located the service worker on my browser, but encountering issues when trying to register the service worker file. I have searched extensively for a solution and still seeking help. Any assistance would be greatly appreciated. Thanks in advance.

Answer №1

Perhaps you could attempt registering the worker in this manner to obtain additional progress information and ensure the path is correct:

...

navigator.serviceWorker
            .register("service-worker.js", {
    scope: './' }).then(function (registration) {
    var serviceWorker;
    if (registration.installing) {
        serviceWorker = registration.installing;
        console.log('installing');
    } else if (registration.waiting) {
        serviceWorker = registration.waiting;
        console.log('waiting');
    } else if (registration.active) {
        serviceWorker = registration.active;
        console.log('active');
    }
    if (serviceWorker) {
        // logState(serviceWorker.state);
        serviceWorker.addEventListener('statechange', function (e) {
            // logState(e.target.state);
        });
    }
}).catch({…})

Additionally, could you please display the

service-worker.js

file?

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

What steps can be taken to create a change in the initial input box?

So, I have this input box that I cloned into another div, naming them ipbox1 and ipbox2. Basically, ipbox2 is an exact copy of ipbox1. The issue I'm facing is that when I type in or change the value in either of these boxes, the jQuery function dom.va ...

Jade transforms a collection of text into a group of individual strings

When I pass data to render a template, I run the following code: res.render 'index', {data: ['a', 'b']}, function(err, html) { }); Within the template, I want to display the array ['a', 'b'] as an array i ...

Uploading files and data in Laravel using Vue.js and Vuetify: A step-by-step guide

My Vuetify form is working fine with text input, but when I try to include images, I encounter the error GET http://danza.test/thumbnails[object%20File] 404 (Not Found). How can I successfully pass both text and images in a form? This is part of the code ...

The ng-view directive appears to be missing in the AngularJS framework

I am attempting to create a route using AngularJS, but when I launch my application, the ng-view does not display anything. I am new to AngularJS. index : <!DOCTYPE html> <html lang="en"> <head> <title>CRUD</title> </ ...

Disabling dynamically generated buttons in ASP.NET using jQuery

I am facing an issue with creating a dynamic button in my view based on a state. Index.cshtml: <html> <head> <script src="~/scripts/jquery-3.3.1.js"></script> <script src="~/scripts/jquery-3.3.1.min.js"></script&g ...

Transferring a variable from a .jsp file to a .js file

I'm currently working on a .jsp page where the appearance of a different div from a .js file depends on the header that comes from a request. I've added a second header and now want if (info.getLightHeader()!=null) the <div id="lightHeader ...

Can we condense the code to create a more concise and efficient function?

Can someone help me refactor this code snippet below into a function and combine the two IF statements? Many thanks! let value = productDetails.recentPurchaseDate; if (!productDetails.salesPrice && !productDetails.recentPurchaseDate) { value = false; } ...

Why is the ExpressJS response for a POST request returning as undefined upon connecting to MongoDB?

I am currently working on a web application using the MEAN framework and following the MVC design pattern. My goal is to execute a POST request from the Angular front-end to search for a document in my server-side MongoDB (version 2.4.9). The console logs ...

Input for uncomplicated changing identifier

I am looking to create types for dynamic keys that will be of type number. I have two similar types defined as follows: type UseCalculatePayments = () => { totalPayments: number; aggregate: number; condition: boolean; }; type UseCalculateCommissio ...

testing express router with several different handlers

I have been testing my guard middleware and everything appears to be functioning correctly, but my expect statement is failing. /// auth.test.js const request = require('supertest'); const express = require('express'); const app = req ...

Activate the full-screen video mode

On the website airbnb, there is a "play" button on the homepage that, when clicked, activates a fullscreen HTML video. Is it possible to design a button or function that can automatically trigger a full-screen HTML video? ...

Invoke a function within a v-if directive in a Vue.js script

I'm relatively new to working with vue.js and I have a small issue that I need help with. Within my vue.js file, there is an existing method called doSomething(): doSomething(){ //updates few properties here } I also have a list or array as a com ...

Is it possible for me to adjust the size of the Facebook login button on my website?

I have implemented a Facebook login on my website using the following code: <fb:login-button scope="public_profile,email" onlogin="checkLoginState();"> </fb:login-button> Is it possible to replace this button with a standard button or adjust ...

Nodejs and Express are seamlessly integrating error handling with database submission, ensuring a smooth flow of data processing

While testing my backend using nodejs and express, I encountered an issue with error handling in postman. The error message displays correctly for the 'Multiplier' column validation, but despite this, the data is being submitted into my mysql wor ...

Using AngularJS to show content based on a callback function

I'm a beginner in angular and it seems like I might be overlooking something. For the registration form, I need users to provide their location. Depending on whether they allow/support navigator.geolocation, I want to display a drop-down menu for cho ...

Utilizing AngularJS to implement a Currency Filter on the output of a personalized filter

I'm currently working on a custom filter that transforms zero values into ' - ' for display purposes. The goal is to display currency formatting for non-zero values. However, I encountered an unexpected token error while trying to implement ...

Generate a dynamic nested JSON structure in real-time

(context)I am currently gathering data from various elements to create a JSON object that will be passed down to an MVC3 controller for deserialization. Within the JSON object, there are both 'items' and 'item settings'. At the moment, ...

How to eliminate the check box feature in angular-ivh-treeview

I have successfully implemented a tree using angular-ivh-treeview with objects based on the code provided here: https://github.com/iVantage/angular-ivh-treeview You can view the running sample of the tree by visiting: http://jsbin.com/rigepe/1 The tree w ...

Effort to update Div element with Ajax fails to function

Looking for some assistance here. I'm attempting to update a database's entries using Ajax after submitting a form. The entries are displayed within a div. I've tried the following code to refresh only that specific div, but it doesn't ...

An error occurred while trying to access the object null in React-Native, specifically when evaluating 'this.state.token'

I encountered an error while trying to execute a class in a view: When running the class, I received the following error message: null is not an object (evaluating 'this.state.token') The problematic class that I'm attempting to render: c ...