With Lighthouse, in the devtools, I'm getting an "Avoid chaining critical requests" warning about the site's webmanifest and its content:
Is there any way to avoid it?
I know you can prioritize the loading of resources with preload, but is there any option to de-prioritize loading for ressources from <link> elements? (<script> elements have defer/async, but what's to be done with link?) or anything that
This is what I'm using:
<link rel="manifest" href="https://assets.bilingueanglais.com/favicons/site.webmanifest?v=2022-03-15">
{
"name": "BilingueAnglais",
"short_name": "BilingueAnglais",
"icons": [
{
"src": "https://assets.bilingueanglais.com/favicons/android-chrome-192x192.png?v=2022-03-15",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "https://assets.bilingueanglais.com/favicons/android-chrome-512x512.png?v=2022-03-15",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}
Related
PWA is getting installed from chrome broswer but not in firfox.
in firfox its showing start_url is outside the scope, so scope is invalid. what could be the issue?
please help!!
manifest.json file
{
"name": "App Installation issue",
"short_name": "App Installation issue",
"description": "App Installation issue",
"start_url": "d725eaf0-81db-40fe-8b0e-39fe53fa05bb",
"scope": "/app/d725eaf0-81db-40fe-8b0e-39fe53fa05bb",
"display": "standalone",
"background_color": "#ff00ea",
"theme_color": "#ca7f16",
"orientation": "any",
"related_applications": [
{
"platform": "webapp",
"url": "https://5450-202-43-120-104.ngrok.io/projects/vuexy-laravel-mpfg/public/d725eaf0-81db-40fe-8b0e-39fe53fa05bb/d725eaf0_81db_40fe_8b0e_39fe53fa05bb_manifest.json"
}
],
"icons": [
{
"src": "https://5450-202-43-120-104.ngrok.io/projects/vuexy-laravel-mpfg/public/storage/uploads/1/1660912953_architecture.png",
"type": "image/png",
"sizes": "512x512",
"purpose": "any"
}
]
}
I am new to coding and am using create-react-app to build my first app, and was wondering if it is possible to update the manifest.json file from within my app.
For example, if my folder structure is:
public
>index.hmtl
>manifest.json
src
>app.js
>index.js
would it be possible for me to write some code to update the contents of manifest.json? Or would that not work because it is not in the src folder?
The current contents of the manifest.json file are this:
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
But let's say I wanted to change the "icons" array to this:
"icons": [
{
"firstName": "Jon",
"lastName": "Smith",
"id": "1"
}
Is that possible?
I'm just beginning to work with BotFramework. I'm trying to display an Adaptive Card in Microsoft Teams and I'm working with the code I downloaded from https://github.com/microsoft/BotBuilder-Samples/tree/master/samples/csharp_dotnetcore/50.teams-messaging-extensions-search
I see that the image URL being returned in the response JSON is correct and I can paste it in the browser and the image displays just fine, but in the card, the image is displayed as "undefined". I see that Teams changes the URL to - https://urlp.asm.skype.com/v1/url/content?url=[original_url]
I've tried changing the Azure Blob Firewall settings to "Allow All Networks" and I have added my application domain and urlp.asm.skype.com to the validDomains[] configuration in the manifest.json, but I still have the issue with my images.
The JSON I'm using is as follows -
the ${thumbnailurl} contains the url to the thumbnail image.
{
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.2",
"backgroundImage": "https://www.beautycolorcode.com/abcdef.png",
"body": [
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "Image",
"size": "large",
"style": "default",
"width": "100px",
"spacing": "extraLarge",
"url": "http://<myHostname>/xdownload/thumbnail/%257B%2522app%2522%253A%2522NH-vanilla-search%2522%252C%2522id%2522%253A%2522%255C%252FFS%255C%252FDemo%2BFiles%255C%252F%257CEnron%2BData%255C%252Fenron1992.pdf%2522%257D/file.jpg"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"text": "Enron Documents 1992 ENRON CORP",
"wrap": true,
"color": "accent",
"size": "medium",
"weight": "bolder",
"spacing": "padding",
"fontType": "default",
"horizontalAlignment": "left"
}
]
}
]
}
]
},
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "DC 20585 | 5 -- ': ... L. Lay Chairman and CEO **Enron** Corporation\r\nP.O. Box 1188 Houston, ... 1992, and for your comments... fired\r\nelectricity generation over the ... gas prices currently offered by\r\n**Enron** and others. Natural gas power ... coal or nuclear plants. In\r\naddition... America's strengths to achieve aggressive ... L. Lay,\r\nchairman and CEO of **Enron** Corp., in testimony today before the ...\r\nproductivity, prosperity and global leadership\r\n",
"wrap": true,
"maxLines": 6,
"spacing": "padding",
"fontType": "default",
"weight": "default",
"size": "small"
}
]
},
{
"type": "FactSet",
"facts": [
{
"title": "Source:",
"value": "\r\n /File System/Sample Data/Enron Data/\r\n"
},
{
"title": "Format:",
"value": "pdf"
},
{
"title": "Relevancy:",
"value": "85.04401%"
}
],
"separator": true,
"spacing": "extraLarge"
}
],
"actions": [
{
"type": "Action.OpenUrl",
"title": "Document Preview",
"url": "http://<myHostname>/app/NH-vanilla-search/#/preview?id=%2FFS%2FDemo+Files%2F%7CEnron+Data%2Fenron1992.pdf&query=%7B%22name%22%3A%22Custom_Query%22%2C%22text%22%3A%22enron+data%22%7D",
"style": "positive",
"width": "stretch"
}
]
}
I'd greatly appreciate your inputs here.
Thanks!
Teams cannot access that image. Any image you expect pretty much any channel client to display will need to be publicly accessible. Use a public image URL.
I'm having a problem with a PWA I'm developing using Angular. After adding the app to the homescreen in a mobile device, I tried to open it from the home screen but instead of showing the menu, just after the splash screen it shows me my manifest.json file.
{
"name": "Bitpoint",
"short_name": "Bitpoint",
"theme_color": "#03A9F4",
"background_color": "#03A9F4",
"display": "standalone",
"Scope": "/",
"orientation": "portrait",
"start_url": "#/app/recibirpago",
"icons": [
{
"src": "assets/images/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "assets/images/icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "assets/images/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "assets/images/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "assets/images/icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "assets/images/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "assets/images/icons/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "assets/images/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
You can check this error by yourself going to my app and adding the app to your homescreen.
In start_url to need to set a path to the index.html file, for example:
"start_url": "index.html/#/app/recibirpago", or
"start_url": "./#/app/recibirpago",
I added / for starturl
start_url:"/"
I made a chrome app to display my web by webview tag, but the js API alert()/confirm() doesn't work. That made me wondering. Chrome app needs to config something to support confirm?
this is my manifest.json:
{
"app": {
"background": {
"scripts": ["background.js"]
}
},
"manifest_version": 2,
"name": "Performance Monitor",
"version": "1.0",
"description": "A performance monitor to show cpu and memory status.",
"icons": {
"16": "img/ccloud.png",
"48": "img/ccloud.png",
"128": "img/ccloud.png"
},
"permissions": [
"webview"
],
"webview": {
"partitions": [
{
"name": "static",
"accessible_resources": ["header.html", "footer.html", "static.png"]
},
{
"name": "trusted*",
"accessible_resources": ["local_*.html", "*.png", "*.js"]
},
{
"name": "trusted-audio",
"accessible_resources": ["*.mp3"]
}
]
}
}