I am trying to use workbox background-sync in Nuxtjs via #nuxt/pwa-module.
this is my workbox property in nuxt.config.js file:
workbox: {
importScripts : [
'sw-background-sync.js'
]
}
contents of plugins/sw-background-sync.js file :
console.log("backsync called")
workbox.routing.registerRoute(
'https:\/\/example.com\/api\/Survey\/post.*',
new workbox.strategies.NetworkOnly({
plugins: [
new workbox.backgroundSync.Plugin('myQueueName', {
maxRetentionTime: 24 * 60
})
]
}),
'POST'
);
Offline caching is supposed to work by default and it is working fine. but when I uncomment importScripts and refresh the page I get this error in console :
backsync called
workbox-sw.js:1 Uncaught Error: Config must be set before accessing workbox.* modules
at Proxy.setConfig (workbox-sw.js:1)
at sw.js:8
Any example of how to implement pwa background sync with nuxtjs would be appreciated.
Thank you very much.
Actually I should put the script inside workboxExtensions property in nuxt.config.js file:
workbox: {
workboxExtensions : '#/plugins/sw-background-sync.js'
}
When using workbox you can also put:
strategyPlugins:[{
use:'BackgroundSync',
config: {}
}],
I am still trying to find out what config to put in there.
Related
My nuxt.config.js file has the following section
build: {
babel: {
presets (_, [_1, _2]) {
return [['#babel/preset-env', {}]]
},
plugins: [
['#babel/plugin-transform-runtime',
{
regenerator: true
}]
]
}
}
If I start my app (yarn dev), this section is ignored, and I've got regeneratorRuntime is not defined error instead of backend answer when I call my REST API (server middleware). But if after that (while server is up and running) I perform some changes in nuxt.config.js (i.e. set regenerator to false and then again to true), app is beeing regenerated and my REST API starts working fine.
yarn generate fails with ERROR ServerMiddleware Error: regeneratorRuntime is not defined
How to make it working always?
i have Nuxt project, when i try to add or edit message property it's not reflect direct, i should terminate the app and re-run it to see the results.
i followed the Nuxt Documentation and applied every single step
Edit your nuxt.config.js modules to look like this
modules: [
[
"#nuxtjs/i18n",
{
locales: [{ code: "en", name: "en-US", file: "en.json" }],
langDir: "locales/"
}
],
]
assuming your strings file is called en.json and it's inside locales/ like locales/en.json
I'm trying to use a service worker in my Vue.js project. I have it functioning with a very basic worker that I just dropped into my public/ directory (example below), but this doesn't allow me to load dependencies using require(), which is what I'd like to do next.
self.addEventListener('install', event => {
self.skipWaiting();
console.log(self)
});
self.addEventListener('fetch', function(event) {
const url = new URL(event.request.url);
console.log(url)
})
I found service-worker-loader, but it presents me with this during compilation: Syntax Error: TypeError: Cannot read property 'unlink' of null. The error persists even when I provide a serviceWorker.js file that is completely blank. My vue.config.js has the loader configured:
module.exports = {
configureWebpack: {
module: {
rules: [
{ test: /serviceWorker\.js$/, use: { loader: "service-worker-loader" }}
]
}
}
}
And I'm referencing my worker using import registerServiceWorker from 'service-worker-loader!./serviceWorker';.
Am I missing something basic? What's the "standard" way to include custom service worker code into a Vue.js project?
I am trying to use THIS library on the client side as a plugin When I npm run dev the client, I get this error
My vue2socketcluster.js file inside the plugins folder looks like this
import Vue2Socketcluster from 'vue2-socketcluster'
Vue.use(Vue2Socketcluster,{
hostname:"localhost",
secure:true,
propName:"socket" // Defaults to socket - so if you want vm.$soc you would change this to "soc"
})
and nuxt config had an entry for plugins
plugins: [
'~/plugins/vue2socketcluster'
],
Any direction will be super appreciated
Fixed it by setting server side rendering to false. Thank you
plugins: [
{ src: '~/plugins/sc', mode: 'client' }
],
I'm trying to implement Passport strategies into a sails hook, like this I can share on multiple project.
When I try to log I have this error :
Error: passport.initialize() middleware not in use
at IncomingMessage.req.login.req.logIn (/Users/jaumard/IdeaProjects/HookPassportTest/node_modules/sails-hook-passport/node_modules/passport-github/node_modules/passport-oauth/node_modules/passport/lib/passport/http/request.js:30:30)
at /Users/jaumard/IdeaProjects/HookPassportTest/node_modules/sails-hook-passport/api/controllers/AuthController.js:163:11
at Strategy.strategy.success (/Users/jaumard/IdeaProjects/HookPassportTest/node_modules/sails-hook-passport/node_modules/passport/lib/middleware/authenticate.js:194:18)
at verified (/Users/jaumard/IdeaProjects/HookPassportTest/node_modules/sails-hook-passport/node_modules/passport-twitter/node_modules/passport-oauth1/lib/strategy.js:169:16)
at returnResults (/Users/jaumard/IdeaProjects/HookPassportTest/node_modules/sails/node_modules/waterline/lib/waterline/query/finders/basic.js:168:9)
at /Users/jaumard/IdeaProjects/HookPassportTest/node_modules/sails/node_modules/waterline/lib/waterline/query/finders/basic.js:74:16
at /Users/jaumard/IdeaProjects/HookPassportTest/node_modules/sails/node_modules/waterline/lib/waterline/query/finders/operations.js:82:7
at Object.async.each (/Users/jaumard/IdeaProjects/HookPassportTest/node_modules/sails/node_modules/async/lib/async.js:121:20)
at /Users/jaumard/IdeaProjects/HookPassportTest/node_modules/sails/node_modules/waterline/lib/waterline/query/finders/operations.js:425:11
at /Users/jaumard/IdeaProjects/HookPassportTest/node_modules/sails/node_modules/waterline/lib/waterline/query/finders/operations.js:564:5
at Object.async.each (/Users/jaumard/IdeaProjects/HookPassportTest/node_modules/sails/node_modules/async/lib/async.js:121:20)
at _buildChildOpts (/Users/jaumard/IdeaProjects/HookPassportTest/node_modules/sails/node_modules/waterline/lib/waterline/query/finders/operations.js:453:9)
at _execChildOpts (/Users/jaumard/IdeaProjects/HookPassportTest/node_modules/sails/node_modules/waterline/lib/waterline/query/finders/operations.js:421:8)
at /Users/jaumard/IdeaProjects/HookPassportTest/node_modules/sails/node_modules/waterline/lib/waterline/query/finders/operations.js:80:10
at bound (/Users/jaumard/IdeaProjects/HookPassportTest/node_modules/sails/node_modules/lodash/dist/lodash.js:957:21)
at applyInOriginalCtx (/Users/jaumard/IdeaProjects/HookPassportTest/node_modules/sails/node_modules/waterline/lib/waterline/utils/normalize.js:421:80)
I read that I have to add some middleware in config/http.js
middleware: {
passportInit : require('passport').initialize(),
passportSession : require('passport').session(),
order: [
'startRequestTimer',
'cookieParser',
'session',
'passportInit',
'passportSession',
'myRequestLogger',
'bodyParser',
'handleBodyParserError',
'compress',
'methodOverride',
'poweredBy',
'router',
'www',
'favicon',
'404',
'500'
]
}
All it's working after this but I'm under an installable hook and don't want to manually change http.js, is there a way to modify this from the hook ? Or fix the error without adding this.
If I understand correctly, you need to init passport.js in your middleware but want to avoid having to manually edit http.js in each of your projects. To do that you'd create an installable hook like so:
module.exports = function passware(sails) {
sails.config.http.middleware = {
passportInit : require('passport').initialize(),
passportSession : require('passport').session(),
order: [
'startRequestTimer',
'cookieParser',
'session',
'passportInit',
'passportSession',
'myRequestLogger',
'bodyParser',
'handleBodyParserError',
'compress',
'methodOverride',
'poweredBy',
'router',
'www',
'favicon',
'404',
'500'
]
}
return {};
}
To use it you simply copy the hook into your node_modules or npm publish and npm install it in your projects.