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:"/"
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"
}
]
}
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"
}
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 am trying to implement my first PWA service worker and I have referred only google documentation. For now my manifest.json is complete and the service worker is a simple code as below.
// sw.js
var CACHE_NAME = "MyFirstPWA";
var filesToCache = [
// some css and js files to cache
];
self.addEventListener('install', function (e) {
e.waitUntil(caches.open(CACHE_NAME).then(function (cache) {
return cache.addAll(filesToCache);;
}).then(function (e) {
return self.skipWaiting();
}));
});
self.addEventListener('activate', function (event) {
event.waitUntil(caches.keys().then(function (cacheNames) {
return Promise.all(cacheNames.map(function (cacheName) {
return caches.delete(cacheName);
}));
}));
});
self.addEventListener('fetch', function (event) {
event.respondWith(caches.match(event.request).then(function (response) {
return response || fetch(event.request);
}).catch(function (e) {
console.log(e);
}));
});
// Manifest.json
{
"name": "MyFirstPWA",
"short_name": "MyFirstPWA",
"icons": [
{
"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-144x144.png",
"sizes": "144x144",
"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"
}
],
"start_url": "/?utm_source=pwa&utm_medium=pwa",
"orientation": "portrait",
"display": "standalone",
"theme_color": "#0054a6",
"background_color": "#ffffff",
"scope": "/",
"splash_pages": null
}
The working status of google's mini-info bar feature as below.
I want to know if I am missing something or have implemented wrongly?
Please suggest.
I have a payload in a script tag inside the head tag of an html page which is sent by C# using SMTP client. It works just fine, I see the card in Outlook 365 on the desktop but the problem is the height of the card is predefined based on the content thus when people have small screen, there's a vertical scrollbar for the card. Additionally, the html in the body of the page has also a vertical scrollbar. I tried with Outlook.com and it doesn't exhibit this behavior
These scrollbars are not desirable. What would be the correct way to ensure that both the card AND the html doesn't have vertical scrollbar and let Outlook have it's own one so we can scroll using Outlook scrollbar not the card or the HTML
Here's the payload :
<div>
<script type="application/adaptivecard+json">
{
"type": "AdaptiveCard",
"body": [
{
"type": "Container",
"items": [
{
"type": "Image",
"url": "#LOGO",
"size": "Large"
},
{
"type": "TextBlock",
"size": "Medium",
"weight": "Bolder",
"text": "#ADAPTIVE_CARD_TITLE"
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"weight": "Bolder",
"text": "#SERVICE_TITLE",
"wrap": true
},
{
"type": "TextBlock",
"spacing": "None",
"text": "#SERVICE_DATE",
"isSubtle": true,
"wrap": true
}
],
"width": "stretch"
}
]
}
]
},
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"spacing": "None",
"text": "#REVIEW_TITLE",
"wrap": true
},
{
"type": "ColumnSet",
"separator": true,
"columns": [
{
"type": "Column",
"separator": true,
"items": [
{
"type": "TextBlock",
"text": "#EMPLOYEE_TITLE"
}
],
"width": "stretch"
},
{
"type": "Column",
"separator": true,
"items": [
{
"type": "TextBlock",
"text": "#EMPLOYEE_VALUE"
}
],
"width": "stretch"
}
]
},
{
"type": "ColumnSet",
"spacing": "None",
"separator": true,
"columns": [
{
"type": "Column",
"separator": true,
"items": [
{
"type": "TextBlock",
"text": "#ACCOUNT_DATE_TITLE"
}
],
"width": "stretch"
},
{
"type": "Column",
"separator": true,
"items": [
{
"type": "TextBlock",
"text": "#ACCOUNT_DATE_VALUE"
}
],
"width": "stretch"
}
]
}
]
}
],
"actions": [
{
"type": "Action.OpenUrl",
"title": "#APPROVE_TITLE",
"url": "#APPROVE_URL"
},
{
"type": "Action.ShowCard",
"title": "#REJECT_TITLE",
"card": {
"type": "AdaptiveCard",
"body": [
{
"type": "Input.Text",
"id": "comment",
"placeholder": "#COMMENT_PLACE_HOLDER",
"isMultiline": true
}
],
"actions": [
{
"type": "Action.OpenUrl",
"title": "#SEND_REASON_TITLE",
"url": "#SEND_REASON_URL"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.0"
}
</script>
<br />
#BODY
</div>
I would comment, but I don't have the rep yet.
I am unable to replicate your issue. I tested with a long card I made in the designer (just added a bunch of text blocks), and viewed it in OWA (Outlook Web App), and there was only one scroll bar. I am not on the monthly release channel for the desktop client, so I can't test that (only compatible for monthly release channel.
Which version of Outlook is rendering the card?
Maybe try putting #BODY inside of head below the script tag? It might remove one of the scrollbars.