I have a solidjs project which I want to convert to a PWA. After building the project and deploying it, the browser cannot understand the properties of manifest.json. It throws the following errors
I am attaching the manifest.json file and vite.config.js file contents
manifest.json
{
"name": "Trading App",
"short_name": "Trading App",
"start_url": "./index.html",
"display": "standalone",
"background_color": "#000",
"theme_color": "#000",
"scope": ".",
"orientation": "portrait-primary",
"icons": [
{
"src": "/src/assets/icons/icon-48x48.png",
"sizes": "48x48",
"type": "image/png",
"purpose": "any"
},
{
"src": "/src/assets/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png",
"purpose": "any"
},
{
"src": "/src/assets/icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png",
"purpose": "any"
},
{
"src": "/src/assets/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png",
"purpose": "any"
},
{
"src": "/src/assets/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "/src/assets/icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png",
"purpose": "any"
},
{
"src": "/src/assets/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
"src": "/src/assets/icons/icon-284x284.png",
"sizes": "284x284",
"type": "image/png",
"purpose": "any"
},
{
"src": "/src/assets/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
}
]
}
vite.config.js
import { defineConfig } from "vite";
import solidPlugin from "vite-plugin-solid";
import { VitePWA } from "vite-plugin-pwa";
export default defineConfig({
plugins: [solidPlugin(), VitePWA({ registerType: "autoUpdate" })],
server: {
port: 3000,
},
build: {
target: "esnext",
},
});
Any pointers will be really helpful. Thank you in advance
Related
I'm trying to host a webApp inside a subfolder of my host. I uploaded all the contents of the build/web folder, but in the console I get the error:
how can i set url of my subfolder?
{
"name": "pagamento",
"short_name": "pagamento",
"start_url": "./pagamenti",
"display": "standalone",
"background_color": "#0175C2",
"theme_color": "#0175C2",
"description": "A new Flutter project.",
"orientation": "portrait-primary",
"prefer_related_applications": false,
"icons": [
{
"src": "icons/Icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "icons/Icon-512.png",
"sizes": "512x512",
"type": "image/png"
},
{
"src": "icons/Icon-maskable-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "icons/Icon-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}
but it did not work
thank you and happy 2023 to all.
I've followed all the required steps, made sure everything that should be in the manifest is there:
start url
name
shortname
description
Scope is set to / and all the icons are there.
{
"description": "C5 manifest",
"name": "C5",
"short_name": "c5",
"icons": [
{
"src": "/icons/icon_512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "/icons/icon_384x384.png",
"sizes": "384x384",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "/icons/icon_192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "/icons/icon_152x152.png",
"sizes": "152x152",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "/icons/icon_144x144.png",
"sizes": "144x144",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "/icons/icon_120x120.png",
"sizes": "120x120",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "/icons/icon_64x64.png",
"sizes": "64x64",
"type": "image/png",
"purpose": "any maskable"
},
{
"src": "/icons/icon_32x32.png",
"sizes": "32x32",
"type": "image/png",
"purpose": "any maskable"
}
],
"start_url": "https://c5.kwyjibo.app/",
"display": "standalone",
"background_color": "#FF13DB",
"theme_color": "#FF7D13",
"lang": "en"
}
I've also used Lighthouse and it passes all their checks. However, the "Add to home" popup does not get shown when opening it in either Chrome or Firefox on Android.
I've added event listeners for both load and beforeinstallprompt events, and it does look like they are called.
Can anyone perhaps shed some light? I'm at my wits end. The site is https://c5.kwyjibo.app/
For anyone else finding this. The problem was that the service worker did not support offline. Changing it to support offline and making sure I have an offline.html file in the root solved the problem.
I have created a PWA sample app using Ionic 4 and it is working fine. My problem here is how can I change the splash screen?
Note: I can see the splash screen on the PWA app. But I don't know how to change it on below file?
manifest.json
{
"name": "app",
"short_name": "app",
"theme_color": "#1976d2",
"background_color": "#fafafa",
"display": "standalone",
"scope": "/",
"start_url": "/",
"icons": [
{
"src": "assets/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "assets/icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "assets/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "assets/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "assets/icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "assets/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "assets/icons/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "assets/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
PWAs have no concept of a launch image in the manifest.json. The launch image is generated by the browser using an appropriate icon and the background color property. If you want to change the splash screen, you need to change the icons and images.
For reference: https://developers.google.com/web/fundamentals/web-app-manifest/
This is my manifest.json
{
"name": "XXXXX",
"short_name": "XXXXX",
"start_url": "/",
"gcm_sender_id": "XXX",
"background_color": "#dfdfdf",
"display": "standalone",
"orientation": "landscape",
"icons": [
{
"src": "\/icons\/android-chrome-128x128.png",
"sizes": "128x128",
"type": "image\/png"
},
{
"src": "\/icons\/android-chrome-144x144.png",
"sizes": "144x144",
"type": "image\/png"
},
{
"src": "\/icons\/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image\/png"
},
{
"src": "\/icons\/android-chrome-256x256.png",
"sizes": "256x256",
"type": "image\/png"
}
]
}
This web app should always be in landscape mode, but it opens in portrait mode.
There is a question present here with the same problem, but none of the answers are solving my problem
I just tried "orientation": "landscape" on a sample app, and it seems to work correctly. You can see the code for the sample here
Based on your description, there are two possibilities why this may have failed at the time. First, it may have been a bug in Chrome that prevented this from happening. And second, the escaping of the forward slashes in your icons properties of your manifest may have caused issues parsing the manifest.
For example, you icons property should be:
"orientation": "landscape",
"icons": [
{
"src": "/icons/android-chrome-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "/icons/android-chrome-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "/icons/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/android-chrome-256x256.png",
"sizes": "256x256",
"type": "image/png"
}
]
I tried the standalone mode for a web application in the manifest.json file, but the iPhone just opens Safari to display the website. So I didn't found this option very useful. I put the application back in the browser mode, but no effect, when clicking on the icon it is opened as standalone. So here is it a local cache issue only ? Can test on https://tokeeen.com
{
"doc": "https://developer.mozilla.org/fr/docs/Web/Manifest",
"version": "0.10.1",
"name": "",
"short_name": "Tokeeen",
"lang": "en",
"background_color": "#000000",
"display": "browser",
"scope": "/",
"start_url": "./?utm_source=manifest",
"splash_screens": [],
"icons": [
{
"src": "\/android-icon-36x36.png",
"sizes": "36x36",
"type": "image\/png",
"density": "0.75"
},
{
"src": "\/android-icon-48x48.png",
"sizes": "48x48",
"type": "image\/png",
"density": "1.0"
},
{
"src": "\/android-icon-72x72.png",
"sizes": "72x72",
"type": "image\/png",
"density": "1.5"
},
{
"src": "\/android-icon-96x96.png",
"sizes": "96x96",
"type": "image\/png",
"density": "2.0"
},
{
"src": "\/android-icon-144x144.png",
"sizes": "144x144",
"type": "image\/png",
"density": "3.0"
},
{
"src": "\/android-icon-192x192.png",
"sizes": "192x192",
"type": "image\/png",
"density": "4.0"
}
]
}