web app banner install - web

I'm using this page: https://developers.google.com/web/fundamentals/engage-and-retain/app-install-banners/ to create a web app banner install.
I have the sw.js as service worker in public/admin/
I have registered with success the service worker
and i have the manifest.json in public/admin too like this
{
"name": "Web App Install",
"short_name": "Admin",
"icons": [
{
"src": "/admin/mstile-70x70.png",
"sizes": "36x36",
"type": "image/png"
},
{
"src": "/admin/mstile-70x70.png",
"sizes": "48x48",
"type": "image/png"
},
{
"src": "/admin/mstile-70x70.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "/admin/mstile-70x70.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "/admin/mstile-70x70.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "/admin/mstile-70x70.png",
"sizes": "192x192",
"type": "image/png"
}
],
"start_url": ".",
"display": "standalone",
"related_applications": [{
"platform": "web"
}],
"related_applications": [],
"prefer_related_applications": false
}
in dev tools
the link of service worker is: https://01f1c2fb.ngrok/admin/pt
the link of manifest.json is https://01f1c2fb.ngrok/admin/manifest.json
but i'm getting an error on trying install the web app
the error is
"Site cannot be installed: no matching service worker detected. You may need to reload the page, or check that the service worker for the current page also controls the start URL from the manifest"
Can someone help me please.
i add a folder /pt in admin as admin/pt
and added the manifest.json.
i got some errors of image when i clicked to "add to homescreen" but i fixed it
but now clicking on "add to homescreen" he doesnt fire anything...
its all alright for now ?
i tried i mobile phone but not installing ...
can someone help
thanks
Carlos Vieira
i already have made some changes and i get
"beforeinstallprompt Event fired" in console using
window.addEventListener('beforeinstallprompt', function(e) {
console.log('beforeinstallprompt Event fired');
});
but no app in mobile is installed
Thanks in advance.
Carlos Vieira

I've had a similar problem.
You have your sw.js file in public/admin/, this is wrong. Move it to root directory / and serviceWorker should init fine.

Related

HTTP POST request to external gateway from Azure runtime module

I am working on Azure edge module where I created a custom module that actually received a message from another module within edge runtime.
My requirement is to send data to an external gateway(example thingsboard) over the HTTP post method. In docker file, expose 80 port and bind with local machine 80 port.
The problem is whenever I tried to send message from a custom module to external gateway(thingsboards) using the HTTP post method, getting an error of HTTP 500.
If I run the container directly(not under the edge runtime) is working fine.
As my code in container want to send message to external world(external device or gateway) over internet. I am sending message to thingsboard (http://demo.thingsboard.io/api/v1/camera/telemetry).
Edge deployment manifest:
{
"modulesContent": {
"$edgeAgent": {
"properties.desired": {
"schemaVersion": "1.0",
"runtime": {
"type": "docker",
"settings": {
"minDockerVersion": "v1.25",
"loggingOptions": "",
"registryCredentials": {
"cameraedgedev": {
"username": "username",
"password": "password",
"address": "cameraedgedev.azurecr.io"
}
}
}
},
"systemModules": {
"edgeAgent": {
"type": "docker",
"settings": {
"image": "mcr.microsoft.com/azureiotedge-agent:1.0",
"createOptions": "{}"
}
},
"edgeHub": {
"type": "docker",
"status": "running",
"restartPolicy": "always",
"settings": {
"image": "mcr.microsoft.com/azureiotedge-hub:1.0",
"createOptions": "{\"HostConfig\":{\"PortBindings\":{\"5671/tcp\":[{\"HostPort\":\"5671\"}],\"8883/tcp\":[{\"HostPort\":\"8883\"}],\"443/tcp\":[{\"HostPort\":\"443\"}],\"8082/tcp\":[{\"HostPort\":\"8082\"}]}}}"
}
}
},
"modules": {
"lvaEdge": {
"version": "1.0",
"type": "docker",
"status": "running",
"restartPolicy": "always",
"settings": {
"image": "mcr.microsoft.com/media/live-video-analytics:2",
"createOptions": "{\"HostConfig\":{\"PortBindings\":{\"8082/tcp\":[{\"HostPort\":\"8082\"}]},\"LogConfig\":{\"Type\":\"\",\"Config\":{\"max-size\":\"10m\",\"max-file\":\"10\"}},\"Binds\":[\"/var/media:/var/media/\",\"/var/lib/azuremediaservices:/var/lib/azuremediaservices\"]}}"
}
},
"rtspsim": {
"version": "1.0",
"type": "docker",
"status": "running",
"restartPolicy": "always",
"settings": {
"image": "mcr.microsoft.com/lva-utilities/rtspsim-live555:1.2",
"createOptions": "{\"HostConfig\":{\"Binds\":[\"/home/cameraedgevm_user/samples/input:/live/mediaServer/media\"]}}"
}
},
"lvaSupport": {
"version": "1.0",
"type": "docker",
"status": "running",
"restartPolicy": "always",
"settings": {
"image": "cameraedgedev.azurecr.io/lvasupport:1.2",
"createOptions": "{\"HostConfig\":{\"PortBindings\":{\"80/tcp\":[{\"HostPort\":\"80\"}]}}}"
}
},
"ai_module": {
"version": "1.0",
"type": "docker",
"status": "running",
"restartPolicy": "always",
"env": {
"PYTHONUNBUFFERED": {
"value": "1"
},
"NVIDIA_VISIBLE_DEVICES": {
"value": "all"
}
},
"settings": {
"image": "cameraedgedev.azurecr.io/ai_module:1.2",
"createOptions": "{\"HostConfig\":{\"Runtime\":\"nvidia\",\"PortBindings\":{\"8082/tcp\":[{\"HostPort\":\"8082\"}]},\"Binds\":[\"/home/cameraedgevm_user/ai_module/data:/ai_module/data/\"]}}"
}
}
}
}
},
"$edgeHub": {
"properties.desired": {
"schemaVersion": "1.0",
"routes": {
"LVAToHub": "FROM /messages/modules/lvaEdge/outputs/* INTO $upstream",
"LVATolvaSupportModule": "FROM /messages/modules/lvaEdge/outputs/* INTO BrokeredEndpoint(\"/modules/lvaSupport/inputs/input1\")"
},
"storeAndForwardConfiguration": {
"timeToLiveSecs": 7200
}
}
},
"lvaEdge": {
"properties.desired": {
some properties
}
},
"lvaSupport": {
"properties.desired": {
"Gateway": "http://demo.thingsboard.io/api/v1/camera/telemetry",
"gatewayMethod": "POST"
}
}
}
}
How should I resolve this problem?
How can i send message to external gateway
Thanks.
By default, your modules in Azure IoT Edge will be able to access the internet, unless the configuration was changed, or a firewall is in place that restricts you from reaching thingsboards.io To verify if your module can reach that URL, you can try the following:
docker run -i --rm -p 80:80 --network="azure-iot-edge" alpine ping thingsboard.io
This will run a container on the same Docker network as your modules and see if you can resolve the URL.
You mentioned the HTTP status code 500, which indicates that a server (from Thingsboard) is having an issue with your request. Because you mentioned that this works if you just run the container manually, this could be because your payload is different when you run your module in the Azure IoT Edge runtime. An easy way to find out is to use logging to check what you're sending to Thingsboard in each scenario.
Note: in your question, you said
In docker file, expose 80 port and bind with local machine 80 port
This is only needed if you want your module to accept incoming requests over port 80. For outgoing requests (such as messages to Thingsboard) this is not needed.

Microrosft teams Usupported Manifest Version

I'm developing a custom teams app and until few days ago it was running ok: wep app run local from visual studio code with chrome debug, and the service app distributed on azure.
Yesterday I deleted by mistake the local app from app studio (inside visual studio code) and then I created a new app and set it as the old.
Teams recognize the app and when I run it from local (with debug from chrome) it opens a new window on chrome and I correctly see the button for install it:
When I click install I receive one popUp error: and i can see thi erro on the local visual studio debug console:
My manifest app is a standard manifest, with 1.8 version:
"$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.8/MicrosoftTeams.schema.json",
"manifestVersion": "1.8",
"version": "1.0.0",
"id": "d8bf27a8-a5a3-4381-9dd8-696d473450a1",
"packageName": "com.microsoft.teams.eclexia",
"developer": {
"name": "",
"websiteUrl": "https://localhost:3000",
"privacyUrl": "https://localhost:3000/privacy",
"termsOfUseUrl": "https://localhost:3000/termsofuse"
},
"icons": {
"color": "color.png",
"outline": "outline.png"
},
"name": {
"short": "",
"full": ""
},
"description": {
"short": "",
"full": ""
},
"accentColor": "#FFFFFF",
"staticTabs": [
{
"entityId": "index",
"name": "Catalogo",
"contentUrl": "https://localhost:3000/tab?tid={tid}&aaId={userObjectId}",
"websiteUrl": "https://localhost:3000/tab",
"scopes": [
"personal"
]
},
{
"entityId": "live",
"name": "Live",
"contentUrl": "https://localhost:3000/live?tid={tid}&aaId={userObjectId}",
"websiteUrl": "https://localhost:3000/live",
"scopes": [
"personal"
]
}
],
"composeExtensions": [
{
"botId": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
"canUpdateConfiguration": true,
"commands": [
{
"id": "searchQuery",
"type": "query",
"title": "Search",
"description": "Test command to run query",
"initialRun": false,
"fetchTask": false,
"context": [
"compose",
"commandBox"
],
"parameters": [
{
"name": "searchQuery",
"title": "Search Query",
"description": "Your search query",
"inputType": "text"
}
]
}
]
}
],
"permissions": [
"identity",
"messageTeamMembers"
],
"validDomains": [
"localhost"
]
How can I solve it?
There's currently a bug with App Studio that's being addressed (see my question here: App Studio is auto-converting my app to Schema 1.9, and the failing to install it into Teams). In the meantime, you can side-load to the internal company app store, and install from there, especially if you have a Developer tenant

MS Teams app manifest file Tenant restriction

I created the bot application and created the manifest file for it. I added it to the Microsoft teams and it is working fine. So if I use that manifest file with the other tenant account then also that app will be added and working. I don't want it to be like this. If the other tenant people tries to add the manifest it should not work or added. How to give tenant restriction in the manifest file? I am attaching my manifest file also.
{
"$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.5/MicrosoftTeams.schema.json",
"manifestVersion": "1.5",
"version": "1.0.0",
"id": "<id>",
"packageName": "com.example.myapp",
"developer": {
"name": "AzS",
"websiteUrl": "https://teams.com",
"privacyUrl": "https://teams.com/privacy",
"termsOfUseUrl": "https://teams.com/termsofuse"
},
"icons": {
"color": "color.png",
"outline": "outline.png"
},
"name": {
"short": "test Bot",
"full": "test App"
},
"description": {
"short": "This is a test bot",
"full": " bot"
},
"accentColor": "#FFFFFF",
"bots": [
{
"botId": "<botid>",
"scopes": [
"team",
"groupchat",
"personal"
],
"supportsFiles": true,
"isNotificationOnly": false
}
],
"permissions": [
"identity",
"messageTeamMembers"
],
"validDomains": []
}
Aside from my question in the comments above, Microsoft provide a middleware as part of the bot framework itself, to filter for specific tenant id(s). Have a look at teamsTenantFilteringMiddleware
(The above is for Node). For interest, here is the C# version as well.

Problem to deploy a node / express API using now.sh

I'm trying to deploy a node / express API that has several endpoints for use at now.sh.
My question is how to correctly configure the file now.json.
leave the image where you can see the complete structure of the project, the main path would be the ./src/ where are all the folders and files.
The main entrypoint is http://localhost:3000/api/v1/ for localhost
I delete the file now.json and from the terminal I paste the now command, and then I generated the deployment in the following path
https://ryuanime.chrismichael.now.sh
But when I try to go to https://ryuanime.chrismichael.now.sh/api/v1 it shows me 404: NOT_FOUND
Image
source code
now.json
{
"version": 2,
"name": "ryuanime",
"builds": [
{
"src": "src/index.ts",
"use": "#now/node-server"
}
],
"routes": [{"src": "/(.*)", "dest": "/src/index.ts"}]
}
For some reason it worked by referring to
"src": "./src/index.ts"
and not
"src": "src / index.ts",
{
"name": "ryuanime-api",
"version": 2,
"builds": [
{
"src": "./src/index.ts",
"use": "#now/node-server"
}
],
"routes": [
{ "src": "/(.*)", "dest": "/src/index.ts" }
]
}

Site cannot be installed: the page is not served from a secure origin - yet page is actually secure

I have a website fully secured with CloudFlare SSL/TLS. Am trying to upgrade some page to a "Progressive Web Application"... Everything required by the Progressive Web Application Checklist is in place. I can even see the "Add to homescreen" link in the Manifest option of Application tab in Debug Tools - but alas when I click add to homescreen Google Chrome doesn't allow my page to install neither show an app banner. Under Console tab I see the error "Site cannot be installed: the page is not served from a secure origin"... It's the only error I note. Yet in the Security tab Chrome reports that This page is secure (valid HTTPS).
What could be wrong? How can I proceed with the work?
manifest.json
{
"short_name": "My PWA",
"name": "My PWA - Live Marketplace Status Updates",
"icons": [{
"src": "/assets/images/s3-icon-x48.png",
"type": "image/png",
"sizes": "48x48"
},
{
"src": "/assets/images/s3-icon-x96.png",
"type": "image/png",
"sizes": "96x96"
},
{
"src": "/assets/images/s3-icon-x128.png",
"type": "image/png",
"sizes": "128x128"
},
{
"src": "/assets/images/s3-icon-x256.png",
"type": "image/png",
"sizes": "256x256"
},
{
"src": "/assets/images/s3-icon-x512.png",
"type": "image/png",
"sizes": "512x512"
},
{
"src": "/assets/images/s3-icon-x768.png",
"type": "image/png",
"sizes": "768x768"
},
{
"src": "/assets/images/s3-icon-x1024.png",
"type": "image/png",
"sizes": "1024x1024"
}
],
"background_color": "#000000",
"theme_color": "#f7c723",
"display": "standalone",
"start_url": "/home?launcher=true"
}

Resources