Issue adding PWA features

sage
,
1

Hey everyone!
I’m trying to add Progressive Web App (PWA) features to my website using WorkBox yarn add workbox-webpack-plugin. I followed these steps, but sadly, I’m not seeing any changes:

  • Installed workbox-webpack-plugin (yarn add workbox-webpack-plugin)
  • Created a service-worker.js file in the theme directory
  • Set up webpack.mix.js with the following code:
// resources/scripts/config.js

const { GenerateSW } = require('workbox-webpack-plugin');

module.exports = {
    // ... other configuration options

    plugins: [
        // ... other plugins

        new GenerateSW({
            swDest: 'service-worker.js',
            // ... additional configuration options
        }),
    ],
};
  • Registered the Service Worker using this code:
if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
        navigator.serviceWorker.register('/service-worker.js')
            .then((registration) => {
                console.log('Service Worker registered with scope:', registration.scope);
            })
            .catch((error) => {
                console.error('Service Worker registration failed:', error);
            });
    });
}

The only thing I noticed is a manifest.json file created in the public directory.
Any ideas why it’s not working? What am I missing?

2

Sage switched from Mix to bud.js at the end of 2021

Are you working on an older site using Mix?

3

Thank you @ben for the heads-up about webpack.mix.js . I was following a tutorial that had it, and that caused some confusion.

Now, I’m trying Bud. Do you have any specific tutorials or resources you recommend that I follow?