currently using "#nuxtjs/pwa": "2.6.0" having the issue manifest not registering on lighthouse analysis, service worker also taking time.
specific lighthouse error Failures: No manifest was fetched.
I can help with code also if needed!!
My nuxt.config.js
build: {
publicPath: cdn.com
},
modules: [
'#nuxtjs/axios',
'#nuxtjs/pwa'
],
manifest: {
name: 'name',
description: "Desc",
theme_color: '#607D8B',
short_name: 'shortname'
},
Using Docker deployer. upload the content of .nuxt/dist/client directory to your CDN (PublicPath Docs Nuxt)
According to the docs you have to wrap manifest object into pwa: https://pwa.nuxtjs.org/manifest
Try this:
// Nuxt config
pwa: {
manifest: {
name: 'name',
description: "Desc",
theme_color: '#607D8B',
short_name: 'shortname'
}
}
Related
I have a site with PWA img assets in
img/icons/imagename.png
I am trying to build the site with vite and vite-plugin-pwa to use it as a pwa.
The vite.config.js and the index.html are in the project root directory. Images are in img directory.
The problem is that when I run the build file places the imgs in the folder assets/imageName###.png
For example chrome192.png is placed in assets/chrome192.f25426fd.png
However, the manifest file generated upon build manifest.webmanifest still contains
src: 'img/icons/chrome192.png',
The application tab for dev tools in chrome shows {rootURL}/img/icon/chrome192.png not found. Which is expected since the bundling with vite build places it in a different folder (assets).
Why does it not update the path of the images in the generated manifest.webmanifest?
Isn't that the whole point of the vite-plugin-pwa to keep track of the filenames that change upon build.
Another issue is that I have different routes eg: html/about
Inside the about.html generated on build, the web manifest path is given as:
<link rel="manifest" href="./manifest.webmanifest">
It uses this path instead of using ../manifest.webmanifest or maybe a path from the root without the ./ such as href="./manifest.webmanifest"
My vite.config.js is shown below
import { resolve } from 'path';
import { defineConfig } from 'vite';
import { VitePWA } from 'vite-plugin-pwa'
// import legacy from '#vitejs/plugin-legacy';
export default defineConfig({
plugins: [
VitePWA({
includeAssets: ['img/icons/favicon.png', 'img/icons/maskable_icon.png' ],
manifest: {
name: 'Final Countdown',
start_url: "/",
short_name: 'Final Countdown',
description: 'Awesome countdown App',
theme_color: '#031c36',
icons: [
{
src: 'img/icons/chrome192.png',
sizes: '192x192',
type: 'image/png'
},
{
src: 'img/icons/chrome512.png',
sizes: '512x512',
type: 'image/png'
},
{
src: 'img/icons/chrome512.png',
sizes: '512x512',
type: 'image/png',
purpose: 'any maskable'
}
]
}
})
],
build: {
rollupOptions: {
input: {
main: resolve(__dirname, 'index.html'),
about: resolve(__dirname, 'html/about.html'),
countdownList: resolve(__dirname, 'html/countdown-list.html'),
fallback: resolve(__dirname, 'html/fallback.html'),
today: resolve(__dirname, 'html/today.html'),
formupload: resolve(__dirname, 'html/form-upload.html'),
},
},
},
});
The code is hosted at this branch if you need to take a look at the full folder
https://github.com/RDjarbeng/countdown/tree/vitePWA
I have removed the previous manifest.json file that used to work before I started using the vite-plugin-pwa, because when it was included there were two manifest files in the build instead.
Have also tried using /img/icons/... for the paths and resolve(__dirname, img/icons/chrome192.png)
How do I get the PWA manifest and icons to sync with the image build files generated by the viteJS bundler and satisfy the PWA conditions?
How do I get the paths of html files not in the root folder to use the correct path to the manifest.webmanifest?
If the icon is only being used in the webmanifest icons, those icons should go to public folder.
Create a folder named public in the root directory and move the icons for the manifest there. Vite will add these to the build without changing the file names.
Find full solution here.
https://github.com/vite-pwa/vite-plugin-pwa/issues/396
You do not need to add public/ to the names of the images in the manifest.json.
In the end the vite config, vitePWA contained
...
includeAssets: ["**/*.{png}"],
manifest: {
name: 'Final Countdown',
start_url: "/",
id: "/",
short_name: 'Final Countdown',
description: 'Awesome countdown App',
theme_color: '#031c36',
icons: [
{
src: '/img/icons/chrome192.png',
sizes: '192x192',
type: 'image/png'
},
{
src: '/img/icons/chrome512.png',
sizes: '512x512',
type: 'image/png'
},
]
},
Full path to the image:
{rootURL}/public/img/icons/chrome192.png
where {rootURL} is the root url from which the site is served
We implemented the swagger in our nodeJs application. As of now we are created production build using webpack and remove the controller and services file.
bin/www.js
const YAML = require('yamljs');
const swaggerTools = require('swagger-tools');
const swaggerDoc = YAML.safeLoad('./swagger.yaml');
// swaggerRouter configuration
const swaggerOptions = {
controllers: path.join(__dirname, '../public/javascripts/controllers'),
useStubs: true, // Conditionally turn on stubs (mock mode)
};
// Initialize the Swagger middleware
swaggerTools.initializeMiddleware(swaggerDoc, (middleware) => {
// Interpret Swagger resources and attach metadata to request - must be first in swagger-tools middleware chain
app.use(middleware.swaggerMetadata());
// validate the security using JWT token
app.use(middleware.swaggerSecurity({
Bearer: auth.verifyToken
}));
// Validate Swagger requests
app.use(middleware.swaggerValidator({
validateResponse: true
}));
// Route validated requests to appropriate controller
app.use(middleware.swaggerRouter(swaggerOptions));
// Serve the Swagger documents and Swagger UI
app.use(middleware.swaggerUi());
});
If we did the same in production build and the swagger middleware expecting the same path to resolve. after build we delete the public folder.
Webpack code
const path = require('path');
const nodeExternals = require('webpack-node-externals');
module.exports = {
entry: {
server: './bin/www',
},
output: {
path: path.join(__dirname, 'dist'),
publicPath: '/',
filename: 'server.build.js',
},
target: 'node',
node: {
// Need this when working with express, otherwise the build fails
__dirname: false, // if you don't put this is, __dirname
__filename: false, // and __filename return blank or /
},
externals: [nodeExternals()],
module: {
rules: [
{
// Transpiles ES6-8 into ES5
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
],
},
};
Pleas help us to create a build using swagger middleware
Thanks in advance
Swagger tools is not a package bundler like webpack. So you will still need to provide it the controller files. Since you are deleting /public from prod then there is no way for swagger tools middleware to get the files it needs. Webpack in this case is basically building a dist from your code which is why it's ok to delete the controller and services.
In development environment Moment.reindex and search is OK, but in staging env is error:
2.3.1 :002 > Moment.reindex
Elasticsearch::Transport::Transport::Errors::BadRequest: [400] {"error":{"root_cause":[{"type":"parse_exception","reason":"Failed to parse content to map"}],"type":"parse_exception","reason":"Failed to parse content to map","caused_by":{"type":"json_parse_exception","reason":"Duplicate field 'moment'\n at [Source: org.elasticsearch.transport.netty4.ByteBufStreamInput#1e0d7046; line: 1, column: 2720]"}},"status":400}
staing env using same ES.
My Moment class:
class Moment
include Mongoid::Document
searchkick inheritance: true, callbacks: :async, merge_mappings: true, mappings: {
moment: {
properties: {
text: {
type: "text",
# analyzer: "ik_max_word",
fields: {
analyzed: {
type: "text",
analyzer: "ik_max_word"
}
}
}
}
}
}}
GET /_cat/indices?v
health status index
yellow open moments_development_20180223203756302
yellow open moments_staging
This was an issue with how mappings were merged. It's fixed in the latest version of Searchkick.
There are several elements of a Protractor configuration that I need to modify at run-time, most importantly some values of the multiCapabilities object:
...
multiCapabilities: [
{
'build': buildNumber,
'app': 'app' + buildNumber + '.apk',
'browserName': '',
'appiumVersion': '1.4.16',
'deviceName': 'Android Emulator',
'deviceOrientation': 'portrait',
'platformVersion': '5.1',
'platformName': 'Android',
'autoWebview': true
},
{
...
}
],
...
Specifically, I'm running these tests against a specific build of an app that has been uploaded to SauceLabs. I'd like to be able to somehow set the 'build' and 'app' values dynamically.
Unfortunately, the Grunt Protractor Runner does not support the multiCapabilities feature, otherwise it could be handled using that wrapper.
One option would be to use browser.params and parameterize your tests from the command-line arguments. In this case, use getMultiCapabilities() method:
getMultiCapabilities: function () {
var buildNumber = browser.params.build,
app = browser.params.app;
return [
{
'build': buildNumber,
'app': app,
'browserName': '',
'appiumVersion': '1.4.16',
'deviceName': 'Android Emulator',
'deviceOrientation': 'portrait',
'platformVersion': '5.1',
'platformName': 'Android',
'autoWebview': true
},
{
...
}
],
},
Usage:
protractor protractor.conf.js --params.build="build" --params.app="app"
I'm trying to set up a local testing environment for my Dojo project. I've decided on Karma as the test runner and Jasmine as the suite. I've found a few example karma.config files on how to set it up and that works fine.
But when I try to set up the dojo.config in main test file to point to a local version of dojo it just breaks.
This works:
var dojoConfig = {
packages: [
{
name: 'dojo',
location: 'http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo'
}, {
name: 'dojox',
location: 'http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojox'
}, {
name: 'dijit',
location: 'http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dijit'
}
],
async: true
};
But as soon as I do something like this:
var dojoConfig = {
packages: [
{
name: 'dojo',
location: 'base/lib/dojo'
}, {
name: 'dojox',
location: 'base/lib/dojox'
}, {
name: 'dijit',
location: 'base/lib/dijit'
}
],
async: true
};
This is the error log:
ERROR: 'There is no timestamp for /base/lib/dojo/domReady.js!'
ERROR: 'There is no timestamp for /base/lib/dojo/_base/array.js!'
WARN [web-server]: 404: /base/lib/dojo/domReady.js
Then it runs through and outputs the same for all dojo modules.
That's an odd error... I can't give you much more than a Google search (You did google your error right?), but have you seen these questions?
test not running on karma/jasmine/require.js 'There is no timestamp for *lib*!' error
karma error 'There is no timestamp for'