Comments (5)
@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:
- https://vite-pwa-org.netlify.app/guide/inject-manifest.html
- https://vite-pwa-org.netlify.app/workbox/inject-manifest.html
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.
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.
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.
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.
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:
- Create the service worker file (
sw.js
) in your/public
directory. - Install the
workbox-core
,workbox-precaching
, andworkbox-routing
packages as dependencies - 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.
- Change
pwa:strategies
property toinjectManifest
in nuxt.config.ts
from nuxt.
Related Issues (20)
- State gets lost with "soft" reset when using @vite-pwa/nuxt and nuxt-auth-utils HOT 5
- How to disable caching "_nuxt" folder due to "The server responded with a status of 429" after every update!!! HOT 4
- How to use it with useAsyncData? HOT 1
- Service worker keeps showing 'trying to install' when using `app.baseURL` under injectManifest strategy HOT 1
- Importing the virtual module in a unit test with Vitest HOT 2
- npm WARN when run "npm i @vite-pwa/nuxt -D" HOT 3
- [Feature Request]: dynamic manifest.json via nitro HOT 2
- pwa does not cache data in Nuxt 3 SSR HOT 3
- Firefox injectManifest not working HOT 1
- Cannot find module '#pwa' or its corresponding type declarations. HOT 2
- vite-pwa/nuxt not working on ios
- Module does nothing ? (EDIT: No Firefox support ?) HOT 9
- Nuxt3 + PWA warnings in terminal HOT 6
- cant use npm run build
- I can't get 'start_url' to work for me
- showInstallPrompt not being called HOT 1
- Uncaught ReferenceError: __NUXT_ASYNC_CONTEXT__ is not defined HOT 7
- Service Worker "import sentry-release-injection" error when loading page HOT 19
- @vite-pwa/nuxt and vue-tsc conflict HOT 4
- API Request URLs Open in New Tab Redirect to 404 Page HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from nuxt.