Encountering issues when attempting to create a service worker in a Vue.js application using Workbox's injectManifest feature

I'm attempting to utilize vue.js's capabilities for progressive web apps by creating a customized service worker using workbox. However, every time I try to build the app, I encounter the following error:

AssertionError [ERR_ASSERTION]: swSrc must be set to the path to an existing service worker file.

In my project/vue.config.js file:

module.exports = {
  runtimeCompiler: true,
  pwa: {
    workboxPluginMode: "InjectManifest",
    plugins: [
      new InjectManifest({
        swSrc: "src/service-worker.js"
      })
    ]
  }
};

And in my project/src/service-worker.js file:

self.__precacheManifest = [].concat(self.__precacheManifest || []);
workbox.precaching.suppressWarnings();
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});

//Web Push Notifications//
let click_open_url;
self.addEventListener("push", function(event) {
  let push_message = event.data.json();
  // push notification can send event.data.json() as well
  click_open_url = push_message.notification.data.url;
  const options = {
    body: push_message.notification.body,
    icon: push_message.notification.icon,
    image: push_message.notification.image,
    tag: "alert"
  };
  event.waitUntil(
    self.registration.showNotification(push_message.notification.title, options)
  );
});

self.addEventListener("notificationclick", function(event) {
  const clickedNotification = event.notification;
  clickedNotification.close();
  if (click_open_url) {
    const promiseChain = clients.openWindow(click_open_url);
    event.waitUntil(promiseChain);
  }
});

I've experimented with altering the formatting of swSrc, such as adding ./ or just /, and even removing src/, but none of these changes have resolved the issue. I've also tried copying code generated by workbox and pasting it into service-worker.js, but it still doesn't recognize it. How can I make InjectManifest acknowledge my service worker file?

Answer №1

After some investigation, I found the solution to my problem. It turns out that I had to make modifications in project/vue.config.js file:

module.exports = {
  runtimeCompiler: true,
  pwa: {
    workboxPluginMode: "InjectManifest",
    workboxOptions:{
      swSrc: "src/service-worker.js"
  }
};

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

Loop through an HTML table in order to emphasize variations in cells that contain multiple comparison items

I am interested in highlighting variances between the initial row of a table and all other rows based on columns. I have successfully managed to achieve this when each cell contains only one item/comparison. However, I would like to expand this to include ...

Automating Python functions with Selenium API after exceeding page load time

I am currently working on a Python script that uses Selenium with the Chrome webdriver. Occasionally, the script gets stuck while loading pages because of JavaScript trying to load in the background. I have tried using the line: driver.execute_script("$(w ...

How can I convert a string number with leading zeros into a string in a node.js environment?

When rendering a page, I pass the id as a string (e.g. 001, 002) but at the client side, I receive it as a number (e.g. 1, 2). res.render('leafletDemo',{id:userID,latitude:latitude,longitude:longitude}); Is there a way to keep the id as a str ...

Utilizing Dynamic Image Sources in Vue.js with the Help of APIs

Can someone help me figure out how to solve this issue? I have an API that returns a base64 image, and I want to load this image on my site. Any suggestions on where or how I should implement my function? This is the API call located in the methods: metho ...

How come my invocation of (mobx) extendObservable isn't causing a re-render?

Can't figure out why the render isn't triggering after running addSimpleProperty in this code. Been staring at it for a while now and think it might have something to do with extendObservable. const {observable, action, extendObservable} = mobx; ...

Exploring the World of Angular JS Services

Following the recommended practices, I am working on encapsulating my global functions into reusable factory services. In the provided code snippet, my objective is to execute a function that takes the string value of "Qprogress" from my JSON data, perform ...

The Chrome Extension was denied from loading due to a violation of the specified Content Security Policy

I am encountering an issue while loading a Chrome Extension using React. Whenever I try to load it, the error message below pops up: Refused to load the script 'https://code.jquery.com/jquery-3.2.1.slim.min.js' because it violates the following ...

Seeking to develop a pair of functions for submitting data via my website's form

I need to pass form data to both Docusign and Zapier with just one button click using JavaScript. When the Submit button is pressed, I want the data to be sent to Zapier without opening a success page and then redirect to the Docusign page with all the in ...

Is there a way to gradually reveal an element as I scroll to a specific position?

If the window top position is about 100px from the bottom, I want to create a fading in/out effect for the element overlay. Check out this image Any ideas on how to achieve this? .section-card{ position: relative; height: 500px; line-heigh ...

Switching the visibility of rows in a table

Imagine this as my example table: <table> <tr> <td>a</td> <td>one</td> <td>two</td> </tr> <tr> <td>b</td> <td>three</td> <td>four</t ...

Receiving a "Maximum call exceeded" error when using Vue.js router guards for the beforeEach hook

As I work on my Firebase-VueJS app, I am implementing basic security rules with router guards. In my main.js file, I have added the following code to handle permissions based on the user's authentication status. However, I encounter an error 'vue ...

Steps for modifying the CSS class of an <a> tag with Jquery/Javascript

I am attempting to dynamically change the class of a tab on the dashboard based on the selected page. In the dashboard, there are 3 tabs: <div> <ul class="menu"> <li class="MenuDashboard"><a href="#" >Dashboard</a&g ...

Cannot access Nextjs Query Parameters props within the componentDidMount() lifecycle method

I have been facing a challenge with my Next.js and React setup for quite some time now. In my Next.js pages, I have dynamic page [postid].js structured as shown below: import Layout from "../../components/layout"; import { useRouter } from "next/router"; ...

Is it possible to organize MongoDB records that possess identical update timestamps?

My goal is to validate a route within my Express server using Supertest. This particular route retrieves data from a MongoDB, and the data is then sorted based on the updatedAt field. While attempting to test the order of the output, I encountered an issu ...

Discovering a specific element within a deeply nested JavaScript object

let data = [{ "ItemAID" : 1, "ItemADesc" : [ { "ItemBid" : 11, "ItemBDesc" : [ { "ItemCid" : 111, "ItemCTitle" : "TitleC111", }, { " ...

What is the best way to change a variable in an AngularJS view?

My Request In my application, I have implemented 3 views, each with its own controller. The first view is the home screen, and from there the user can navigate to view 2 by clicking on a div element. On view 2, the user can then move to view 3 by clicking ...

Sending information from controller to directive in angularjs

I'm currently facing an issue where I am attempting to send data from a controller to a directive in order to dynamically update rows in a table. However, despite my efforts, the table does not reflect any updates and there are no error messages displ ...

Tips for identifying emails from protected platforms such as ProtonMail or Hushmail

A question for the community: So, I have a website that's totally above board and legitimate. Lately, I've noticed some shady characters trying to register from email domains like Proton and Hush - yikes! Before I dive into PhoneText validation, ...

Managing Emails with Vue and Firestore

I am facing an issue with updating the 'email' field. Whenever I try to change the email address, it gets updated correctly. However, when I attempt to log in again, the new email address does not work; only the old one seems to be functional. Ho ...

A beginner's guide to importing modules in Node.js

Whenever I attempt to import into my nodejs file, I consistently encounter the error message stating "cannot import outside a module." I have experimented with various solutions found on StackOverFlow, such as including "type":"module" ...