I have 2 questions about PWA.
I have installed PWA long time ago, than in a half year I have removed it from main screen like common application. Now i cant installed it from my browser. Chrome do not show popup and also do not fire event 'beforeinstallprompt'. How i can fix it?
When i see chrome installation PWA popup and push close button, pop up will never show up again. How come? How to show this pop up all the time?
My manifest:
{
"name": "Name of app",
"short_name": "Name of app",
"theme_color": "#55525d",
"background_color": "#275981",
"display": "standalone",
"start_url": "/",
"scope": "/",
"icons": [
{
"src": "\/android-icon-36.png",
"sizes": "36x36",
"type": "image\/png"
},
{
"src": "\/android-icon-48.png",
"sizes": "48x48",
"type": "image\/png"
},
{
"src": "\/android-icon-72.png",
"sizes": "72x72",
"type": "image\/png"
},
{
"src": "\/android-icon-96.png",
"sizes": "96x96",
"type": "image\/png"
},
{
"src": "\/android-icon-144.png",
"sizes": "144x144",
"type": "image\/png"
},
{
"src": "\/android-icon-192.png",
"sizes": "192x192",
"type": "image\/png"
},
{
"src": "\/android-icon-512.png",
"sizes": "512x512",
"type": "image\/png"
}
]
}
All ok with PWA. Chrome do not show any errors in lightroom.
For question 1, assuming you're using Android, when you removed the app from your homescreen did you "remove" or "uninstall"? It might be that the app was removed but is in fact still installed so you won't get prompted to reinstall. In the Chrome three dot menu, does it show "Open in Your_App_Name" or "Install "Your_App_Name"? If it shows "Open in...", it is still installed.
For question 2, that sounds like Chrome is just remembering that you chose not to install it. IMO it sounds like it would be a bad user experience to force an install popup every load, especially after the user has chosen to ignore it. Clearing browser data in the Chrome app settings would bring it back.
Related
I turned my site into a pwa, but the slash with the URL still appears, I made some changes to my manifest.json but so far I couldn't hide it, how to do it correctly?
This is my manifest.json
"lang": "pt",
"dir": "ltr",
"name": "GuiaCorretorPro",
"short_name": "GuiaCorretorPro",
"icons": [
{
"src": "https://painel.guiacorretor.com/public/favicon.png",
"type": "image/png",
"sizes": "512x512",
"purpose": "maskable"
},
{
"src": "https://painel.guiacorretor.com/public/favicon.png",
"type": "image/png",
"sizes": "144x144",
"purpose": "any"
}
],
"theme_color": "#341864",
"background_color": "#9b67f7",
"start_url": "/auth/login",
"display": "standalone",
"orientation": "portrait",
You need to add a scope to your manifest.json file for it
"scope": "https://painel.guiacorretor.com/"
The scope member is a string that defines the navigation scope of this web application's application context. It restricts what web pages can be viewed while the manifest is applied. If the user navigates outside the scope, it reverts to a normal web page inside a browser tab or window
https://developer.mozilla.org/en-US/docs/Web/Manifest/scope
I am trying to build a PWA, and in that process have added a manifest file to of my webpage, but I am getting "No Manifest Detected" in the Application tab in Chrome Dev Tools.
I have seen other threads on this and have tried solutions like restarting, clearing the cache etc. but to no avail.
I tried some other tools like https://manifest-validator.appspot.com/ and they don't seem to show any issues in the manifest file.
You can also try the website at https://beegle.app/apporter-book-help and see that when you do "view source", you can find manifest file added in header and the manifest file link working fine too.
Here's how it has been added
<link rel="manifest" href="/manifest.json">
Here's how the file looks like:
{
"name": "Beegle Apporter",
"short_name": "Apporter",
"icons": [{
"src": "/beegle-logo-128x128.png",
"sizes": "128x128",
"type": "image/png"
}, {
"src": "/beegle-logo-144x144.png",
"sizes": "144x144",
"type": "image/png"
}, {
"src": "/beegle-logo-152x152.png",
"sizes": "152x152",
"type": "image/png"
}, {
"src": "/beegle-logo-192x192.png",
"sizes": "192x192",
"type": "image/png"
}, {
"src": "/beegle-logo-256x256.png",
"sizes": "256x256",
"type": "image/png"
}, {
"src": "/beegle-logo-512x512.png",
"sizes": "512x512",
"type": "image/png"
}],
"start_url": "/apporter-book-help",
"display": "standalone",
"background_color": "#3E4EB8",
"theme_color": "#2F3BA2"
}
Any suggestions and thoughts on what could be going wrong?
Finally managed to solve it. I was using some plugin which was adding "body" tag within "head", and somehow that was causing the manifest to not get detected.
Flutter version: 1.19.0-4.0.pre
I am trying to generate a PWA app using Flutter web, but when I open the web app, it doesn't behave as a PWA should and it doesn't show add to home screen banner either on my android device.
Here's my manifest.json file:
{
"name": "Flutter PWA Demo",
"short_name": "PWA Demo",
"start_url": ".",
"scope": ".",
"display": "standalone",
"background_color": "#FFFFFF",
"theme_color": "#E50D7F",
"description": "A Flutter pwa application.",
"orientation": "portrait",
"icons": [
{
"src": "images/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "images/icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "images/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "images/icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "images/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "images/icons/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "images/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
I tried it on master and dev but it doesn't work. It doesn't show add to home screen option on device or desktop chrome browser.
Firt become sure that you have registered "flutter_service_worker.js" in your "index.html" file, just like below:
if ("serviceWorker" in navigator) {
window.addEventListener("load", function () {
navigator.serviceWorker.register("/flutter_service_worker.js");
});
}
Then open your pwa on chrome, right click on page and select "Inspect" option. Then go to "Application" tab and check if there is an error for "Manifest" and if there is you should fix it.
Then check "Service Workers" tab to see if "flutter_service_worker.js" is registered.
If it is registered and the "Manifest.json" file works fine, then you should see "Add to Home screen" option.
Can we change the style of the window that host Blazor offline apps, Like changing title bar color or set an icon or change default window back color.
yes - in the manifest.json - see https://pwa-workshop.js.org/1-manifest/#manifest-fields
example:
{
"name": "myapp",
"short_name": "myapp",
"start_url": "./",
"display": "standalone",
"background_color": "#B4ECF9",
"theme_color": "#F00BAA",
"icons": [
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
},
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
}
]
}
I have a PWA operating at 'https://www.ajcproperties.com'. On an iphone, when I 'add to home screen' the first time, there is no icon. However, the iphone behaves as if the icon was added.
As debug, I observe that adding the PWA to the home screen results in increasing the number of home-screen pages, but doesn't place the icon on any home-screen page [the last page is blank].
If I restart the phone, the icon appears on the last page.
If I add to home-screen a second time, the icon appears on the last page. but the device believes there are two apps... I have to remove twice.
manifest.json
{
"short_name": "AJC",
"name": "AJC Properties",
"icons": [
{
"src": "AJC_favicon.ico",
"sizes": "32x32 24x24 16x16",
"type": "image/x-icon"
}, {
"src": "/images/AJC_LogoLG_FINAL_SQUARE_64.png",
"sizes": "64x64",
"type": "image/png"
}, {
"src": "/images/AJC_LogoLG_FINAL_SQUARE_192.png",
"sizes": "192x192",
"type": "image/png"
}, {
"src": "/images/AJC_LogoLG_FINAL_SQUARE_512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": ".",
"scope": "/",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
I expect adding once results in the Icon on the home-screen immediately. Apparently something in my set-up is wrong, but gets cleaned up with a restart or a second add.
This is a bug on iOS. It is a special case of adding an app [whether PWA or native]. In the case of a PWA, when the last home page is full of icons. Upon selecting add to home screen, the device creates a new page for icons, but does not place the icon on the screen. A power cycle will reveal that the app was indeed added.