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"
}
]
}
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 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
I'm facing a huge technical problem. I can't see "add to home screen". However, I did follow the installation guidelines.I want to know if I have created a small unintended malfunction and why it doesn't show up.
Link to the site : https://www.bclover.net
I apologize in advance, the site is in French. I hope that won't be too much of a hindrance to your assistance.
Thank you
EDIT :
Manifest.json
{
"lang": "fr",
"dir": "ltr",
"name": "Black Clover FR",
"short_name": "Bclover",
"theme_color": "#000000",
"background_color": "#000000",
"display": "standalone",
"scope": "/",
"start_url": "/?utm_source=pwa",
"icons": [
{
"src": "styles/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "styles/icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "styles/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "styles/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "styles/icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "styles/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "styles/icons/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "styles/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"splash_pages": null
}
Lighthouse
I checked out your website and saw error in the console that says sw.js file is responding with 404 error by the server:
So you have to checkout if the file exists on your server.
I recommend you to follow this tutorial (web.dev) by Google - well written.
In your case you have to register service worker which is shown how to do that in this article (web.dev)
And I recommend you to use Workbox library (this from Google too) to ease the pain while making PWA web app
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"
}
]