When I look at the manifest.js in Chrome DevTools I can see that the logo and colors are there. However, when I start the website from my homescreen on my android device, neither the background or theme color is loaded, nor my splash screen is shown.
Any idea why?
Manifest.json:
{
"short_name": "Example",
"name": "Example",
"icons": [
{
"src": "images/logo_192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "images/logo_512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "./",
"display": "standalone",
"theme_color": "#a300c4",
"background_color": "#c46a00"
}
Screenshot:
EDIT
I found the mistake. I was browsing the website via a remote device using the Chrome DevTools. Port-forwarding to localhost:3000 doesn't match the https requirement for the splash screen to get triggered.
Now the pwa starts in standalone mode, the colors and the splash screen are shown correctly.
However, the splash screen logo is not shown and I have no idea why.
The path to the image is correct and the image exists with the correct filename and type.
Any suggestions?
"If you page already has a theme-color meta tag — for example <meta name="theme-color" content="#2196F3"> — then the page level configuration will be used instead of the value in the manifest."
from: https://developers.google.com/web/updates/2015/08/using-manifest-to-set-sitewide-theme-color
Only thing I see wrong with this manifest is start URL. Change it to something like below
"start_url": "/index.html",
or
"start_url": "https://example.com/myapp/",
If this didn't help, please host your app in some public domain and share the URL.
Change the following:
"background_color": "#c46a00" and "background-color": "#ffffff"
Related
EDIT:
I've removed a bunch of the explanation that I had here, because I realized that the issue was intermittent and my previous thoughts were misled.
The issue is that the iPhone loads both a screenshot and your web app's icon when downloading your PWA. Whatever loads last gets used as the icon (race condition bug). My solution was to make the icon file size huge, which causes it to always be loaded last.
Here's how I tried setting the icon using Apple's own documentation.
I added this to index.html;
<link rel="apple-touch-icon" sizes="180x180" href="ream4.png">
Also tried without sizes, because why not;
<link rel="apple-touch-icon" href="ream4.png">
If anyone wants to compare, this is my manifest.
{
"name": "Ream",
"short_name": "Ream",
"display": "standalone",
"orientation": "portrait",
"start_url": "/",
"icons": [
{
"src": "assets/ream6.png",
"sizes": "64x64 180x180",
"type": "image/png"
}
],
"background_color": "#f8f7fa",
"categories": ["books", "stories", "memberships"],
"homepage_url": "https://reamstories.com"
}
When I download the app from whatever location, it does download as a PWA and I can use it fine, but the icon is not downloaded unless I create it from the home page of the app. I want the icon to always be used regardless of where the user is and stop using screenshots as icons.
EDIT:
More details. The issue appears to be intermittent. Sometimes it uses a screenshot, sometimes it uses the icons. I have no idea why. I tested this by closing the tab and reopening it several times, each time I would try to download the PWA again. Sometimes it downloads the icon, sometimes it uses a screenshot. iPhone is just garbage code?
EDIT (I think I understand what is happening): It is in fact intermittent. When the cache is cleared, the icon takes longer to load which causes it display because it loads after the screenshot is generated. I think my fix is to make the icon really fng big. So it will always load after the screenshot.
This is a bug in Apple's pigsty code. The only solution is to use a larger image so that the image loads after the screenshot gets taken.
I solved this by increasing the size of the logo image from 180px to 980px. Now it works every time.
I guess this is to be expected from a startup company.
I succeed pwa(twa) app deploy google play store. but i faced the problem that pwa splash screen icon is too big when download application on google play store then launched app. How handle this? i used pwabuilder tool(MS Tool) that convert apk.
i think manifest is no problem. because add to home is works fine. splash screen is works. But only problem is pwa app downloaded from google play store.
any advice welcome.
// manifest.json
{
"short_name": "My",
"name": "My",
"description": "My App",
"icons": [
{
"src": "android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#ffffff",
"background_color": "#ffffff"
}
Just to generate the apk, don't change the image file size, but decrease the useful part of your logo. Save and generate the APK, then return the image the way it was for your PWA to work better.
I've created a chrome app and opening a new window in background.js using:
chrome.app.window.create
I would like to take a screenshot of the screen, but from what I've read I need to use:
chrome.tabs.captureVisibleTab
but chrome.tabs is undefined
I have permissions:
"tabs",
"activeTab"
How do I take a screenshot?
check the permissions in your Manifest.json file, it should conatins
In chrome extension: use chrome.tabs.captureVisibleTab.For more : captureVisibleTab
tabs and activeTab
"permissions": [
"activeTab",
"tabs",
],
and in chrome apps:: use chrome.desktopCapture. for more: chrome.desktopCapture
"permissions": [
"desktopCapture",
],
The documentation https://code.visualstudio.com/docs/extensionAPI/vscode-api says that icon-name can be taken from the octicon, is it possible to insert icon that is not an octicon?
No, you can't, at least, not yet.
There is an open issue asking to support more icons, but no Milestone defined.
You can add your custom icon.
https://glyphter.com/
add your 5 X 5 svg logo here in section A, then Download the font.
in vscode's package.json
"contributes": {
"icons": {
"custom-icon-id": {
"description": "custom descr",
"default": {
"fontPath": "./customicon.woff", //woff file
"fontCharacter": "\\41" //you added svg logo in section A
}
}}
I just want a simple, light, couple of lines extension that hides the div #appsNav in facebook. As far as I can see #appsNav is holding some useless information for me like games or games feed. Its annoying.
Now I wrote my manifest.json like this:
{
"manifest_version": 2,
"name": "Hide sideNav",
"description": "Hide facebook sideNav.",
"version": "1.0",
"content_scripts": [
{
"matches": ["http://facebook.com/*", "https://facebook.com/*"],
"css": ["mycss.css"],
"js": ["jquery.js", "myscript.js"]
}
],
"permissions": [
"http://facebook.com/*", "https://facebook.com/*"
]
}
My myscript.js like this:
$("#appsNav").hide();
And even a css file to display:none;
#appsNav{
display:none;
}
When I make a dummy page it all works (so I guess the code is written right), but when I try doing it for Facebook, nothing happens. Is there something wrong with my code? Is there is something I am missing?
Every time I change the code (changing the urls from dummy page, to facebook, or some other page), I reload the extension.