Giter VIP home page Giter VIP logo

Comments (5)

userquin avatar userquin commented on June 19, 2024 1

@calico-crusade using vite-plugin-pwa, @vite-pwa/nuxt or any other library will not solve the logic you need to add push notifications to your app/sw, you have to write a custom service worker (js/ts) and add the corresponding logic.

Check these entries:

You have the service-worker folder in the elk.zone repository, you have a custom service worker with push notifications there.

The pwa options are basically the same, just add any new ones you need or you're using (plugin) to the pwa module configuration.

You can also refer to this document: https://docs.elk.zone/pwa.

The work I've done on the elk.zone repository was the precursor to @vite-pwa/nuxt. At that time I had no idea about push notifications and needed to read a lot of documentation.

from nuxt.

calico-crusade avatar calico-crusade commented on June 19, 2024 1

Thanks for your reply.

I ended up getting it to work, though it isn't pretty.

For anyone else want to get a custom service worker running, the simplest method is as follows:

  1. Create the service worker file (sw.js) in your /public directory.
  2. Install the workbox-core, workbox-precaching, and workbox-routing packages as dependencies
  3. Copy the default service-worker configuration:
import { clientsClaim } from 'workbox-core'
import { precacheAndRoute, cleanupOutdatedCaches, createHandlerBoundToURL } from 'workbox-precaching';
import { registerRoute, NavigationRoute } from 'workbox-routing';

self.skipWaiting();
clientsClaim();
precacheAndRoute(self.__WB_MANIFEST);
cleanupOutdatedCaches();

//You can remove this code if you aren't precaching anything, or leave it in and live with the warning message
try {
    const handler = createHandlerBoundToURL('/');
    const route = new NavigationRoute(handler);
    registerRoute(route);
} catch (error) {
    console.warn('Error while registering cache route', { error });
}

//Your service-worker code here.
  1. Change pwa:strategies property to injectManifest in nuxt.config.ts

from nuxt.

userquin avatar userquin commented on June 19, 2024

About stackoverflow, I don't use it, sorry: we've issues and discussions here and also a discord channel (check pwa docs header)

from nuxt.

userquin avatar userquin commented on June 19, 2024

However, the given repo doesn't use @vite-pwa/nuxt right now, siting that it needs to be added back upon release. Is this because this module doesn't support custom service-worker code?

No, it is because we need web manifest with i18n and theme (dark/light), we've 2 web manifest per locale and we've a few locales there.

from nuxt.

userquin avatar userquin commented on June 19, 2024

If you check the pwa options in the plugin and in the integration, both have a lot of common entries (in fact, nuxt integration types extends or uses the types from the plugin): you need to change the strategy to injectManifest and configure the entries to locate your custom service worker, you can use the same structure and configuration we've in elk.zone repo.

Check the nuxt config file, we're excluding the service-worker folder from the typescript configuration.

We've also a few common modules to reuse the custom IndexedDB where we store the users (push notification logic will use it to find the user in the app and the app to initialize the user info from the remote backend when sign-in).

from nuxt.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.