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.
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'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",
],
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"
I want to create a map starting from the basic template but when I open the template in the editor I do not see the map.Even in preview mode the map does not appear
In red is where it should appear the map or am I doing something wrong?
I downloaded json file from mapbox has more than 800 lines of code, it seems that is not empty.
I created a new map from street template and still not showing nothing in edit mode
I would recommend deleting that style and creating a new one based on the style Basic. I just attempted what you described and it works fine.
To create a new Style in Mapbox Studio. You can also follow the Get started with Mapbox Studio docs.
Login into Studio
Home > New Style
Pick a template, I would recommend starting with Streets
To verify, you created a new style based on Basic and not on the Style Empty, correct? The screen capture you have above looks like Empty. You can download your Style to compare.
This is what an Empty style looks like. Empty will have no map, giving you the power to build your own map literally from the ground up.
{
"version": 8,
"name": "Empty",
"metadata": {
"mapbox:autocomposite": true,
"mapbox:type": "template"
},
"sources": {
},
"glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
"layers": [
{
"id": "background",
"type": "background",
"interactive": true,
"paint": {
"background-color": "rgba(0,0,0,0)"
}
}
]
}
I was able to resolve this issue by changing out my video card. (I worked with Mapbox support for a while but they were unable to help.) On a whim I swapped out my BFGE Tech GeForce GTS 250 for a NVIDIA GeForce GTX 670 and it started working.
I suspected a hardware issue as the problem persisted after upgrading to Windows 10.
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.