I am trying to link manifest.json file to the website I built to convert it to PWA. Have used html/css and python flask for the backend.
I am not getting whether it is the issue of the path or something else. Service worker is being detected and that is working absolutely fine.
But in the Application manifest I am getting this error Manifest is not valid JSON. Line: 1, column: 1, Unexpected token
manifest.json file
{
"name": "Flask-PWA",
"short_name": "Flask-PWA",
"description": "A progressive webapp template built with Flask",
"theme_color": "transparent",
"background_color": "transparent",
"display": "standalone",
"orientation": "portrait",
"scope": "/",
"start_url": "../templates/login_user.html",
"icons": [
{
"src": "images/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"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"
}
]
}
This is the file structure for the manifest
change content type
Check your network tab in the developer console and look for the manifest.json request. If the content type of the response is text/html, then you might need to add an additional header changing Content-Type to application/json in your flask route.
use python object
If changing the content type doesn't work, you can write your entire manifest as a python object then jsonify it before returning it to the browser.
from flask import jsonify
#app.route('/manifest.json')
def manifest():
return jsonify(manifest_python_object)
The selected answer is no longer working as of today. I assume the OP was using ngrok same as me based on the files from the repo he has cloned (which is same as me). Dependent on the caching strategy of the service worker, someone might actually not have this issue at all.
If it is not caching, there is not going to be any problem because my theory is that caching is causing the problem. What happens is Ngrok has this default page when you first browse a URL. And our PWA is caching everything. or the site is loading the manifest only once or something like that.
These are images but my SO Rep is not allowing me to embed them.
Image: The page that is cached into manifest
Image: The error on manifest
Image: Clicking on the manifest file is showing the error page instead of the original manifest linked
Based on this my theory is that the manifest is getting cached at the time Ngrok shows this default page. (Or I'm wrong and something entirely different is going on but this solution still solves the issue, so read on)
If we actually follow Ngrok's solution to skip that page by passing ngrok-skip-browser-warning header with our initial request. The page works, and the PWA is installable. I used This chrome extension to do this non programmatically.
Image: The extension I used to add that header
Also note that I skipped the use of Ngrok as a flask extension, but instead used it directly after running flask server via:
./ngrok http http://127.0.0.1:5000/
Also, this issue was on a lot of other stackoverflow questions with the use of Ngrok and this solution is obviously applicable because the solution has nothing to do with Flask / Python.
Here are the images of it working when the headers are passed.
Image: PWA is active
Image: No errors in the manifest
Image: This actually is the original manifest file linked in html
Related
I have created an Azure Function base on a custom image (docker) using VS Code.
I used the deployment feature of VS code to deploy it to azure and everything was fine.
My function.json file specifies anonymous auth level:
{
"scriptFile": "__init__.py",
"bindings": [
{
"authLevel": "anonymous",
"type": "httpTrigger",
"direction": "in",
"name": "req",
"methods": [
"get",
"post"
]
},
{
"type": "http",
"direction": "out",
"name": "$return"
}
]
}
Why an I still getting the 401 unauthorized error?
Thanks
Amit
I changed my authLevel from function to anonymous and it finally worked!
Below methods can fix 4XX errors in our function app:
Make sure you add all the values from Local.Settings.json file to Application settings (FunctionApp -> Configuration -> Application Settings)
Check for CORS in your function app. Try adding “*” and saving it.. reload the function app and try to run it.
(Any request made against a storage resource when CORS is enabled must either have a valid authorization header or must be made against a public resource.)
When you make your request to your function, you may need to pass an authorization header with key 'x-functions-key' and value equal to either your default key for all functions (Function App > App Keys > default in the Azure portal) or a key specific to that function (Function App > Functions > [specific function] > Function Keys > default in Azure Portal).
I am working on django-rest-framework site and keep getting and error with the index.js file. I've tried adding the .mjs file extension and changing package.json but nothing has fixed this error. VS code gives me the error of 'App is declared but its value is never read ts(6133). I run the python manage.py runserver and then the npm dev server command and I do not have any errors yet I am still not able to get the site to render some of the values in the console properly.
I am new to programming so please forgive my ignorance as I pretend to know something about what I am talking about here.
Here is my index.js file
import App from "./components/App";
This is the App.js file
import React, { Component } from "react";
import { render } from "react-dom";
import HomePage from "./HomePage";
export default class App extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<HomePage />
</div>
);
}
}
const appDiv = document.getElementById("app");
render(<App />, appDiv);
package.json file
{
"name": "frontend",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack --mode development --watch",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.12.10",
"#babel/preset-env": "^7.12.11",
"#babel/preset-react": "^7.12.10",
"babel-loader": "^8.2.2",
"webpack": "^5.11.0",
"webpack-cli": "^4.2.0"
},
"dependencies": {
"#babel/plugin-proposal-class-properties": "^7.12.1",
"#material-ui/core": "^4.11.2",
"#material-ui/icons": "^4.11.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router-dom": "^5.2.0"
}
}
Any help is very much appreciated!
That's just a lint. It's telling you that in index.js, you have declared a variable (App), and not used it. Bad programming practice, so your linter (I think VSCode lints JS by default, or maybe you have installed a linter like ESLint) is telling you that. The 6133 number is the error number in the linter.
I need to create a file using the Google Drive API (I'm using v3, the latest at the moment). Using python if it matters.
My code is below,
drive_service.files().create(supportsTeamDrives=True, body={
'name': 'test-file',
'mimeType': 'application/vnd.google-apps.spreadsheet',
'parents': [folder_id],
'properties': {'locale': 'en_GB',
'timeZone': 'Europe/Berlin'}
})
Following the documentation #here, I tried to set the properties key with the locale set to the wanted one but it keeps creating the file with the default locale of my account.
How can I make it work at the creation time? is there another parameter I can fill?
Your problem is that you are mixing up two different "properties".
The properties you are setting are user-defined properties which are only ever consumed by you yourself. They are of no significance to Google.
The properties you want to set are part of the Spreadsheet API. See https://developers.google.com/sheets/api/reference/rest/v4/spreadsheets#SpreadsheetProperties
The simplest solution is to not use the Drive API to create your spreadsheet. Instead use the Spreadsheet API as descibed https://developers.google.com/sheets/api/reference/rest/v4/spreadsheets/create
I just tested this in the Apis Explorer
Create file Request
POST https://www.googleapis.com/drive/v3/files?key={YOUR_API_KEY}
{
"properties": {
"test": "test"
},
"name": "Hello"
}
Response
{
"kind": "drive#file",
"id": "1CYFI5rootSO5cndBD2gFb1n8SVvJ7_jo",
"name": "Hello",
"mimeType": "application/octet-stream"
}
File get request
GET https://www.googleapis.com/drive/v3/files/1CYFI5rootSO5cndBD2gFb1n8SVvJ7_jo?fields=*&key={YOUR_API_KEY}
Response
"kind": "drive#file",
"id": "1CYFI5rootSO5cndBD2gFb1n8SVvJ7_jo",
"name": "Hello",
"mimeType": "application/octet-stream",
"starred": false,
"trashed": false,
"explicitlyTrashed": false,
"parents": [
"0AJpJkOVaKccEUk9PVA"
],
"properties": {
"test": "test"
},
It appears to be working just fine i suggest you try checking the following:
The file id that is returned in the response from creating the file. To ensure that you are checking the one you just uploaded. Every time you run that you are going t create a new file.
Also remember to add fields=* with file.get if that's what you are using to check the result of your properties.
I'm sending a message to a Microsoft Teams channel using incoming webhooks. This works perfectly fine except for the button "Open log" which should open a file via the browser but simply doesn't.
JSON
{
"#type": "MessageCard",
"#context": "http://schema.org/extensions",
"themeColor": "0076D7",
"summary": "Error Log",
"sections": [{
"activityTitle": "Error in integration " + integration_name,
"activitySubtitle": "live stage",
"markdown": True,
"text": message
}],
"potentialAction": [{
"#type": "ActionCard",
"name": "Open log",
"actions": [{
"#type": "OpenUri",
"name": "Open log",
"targets": [{
"os": "default",
"uri": "file://someserver/d$/somefolder/logs/" + logname
}]
}]
}]
}
The result of this webhook call looks like this:
Message via webhook
My problem is, that this button does absolutely nothing. If I use standard websites, even android/iOS URLs, it works like expected.
Any help to solve this is much appreciated! Am I doing something wrong? Is Microsoft Teams blocking file:// links?
Yes, currently we sanitize (block) file:// links as they are a pretty significant security hole (e.g. local executables/batch files). See here for more info.
That said, your use case seems both valid and safe. How would you like it to work while still being secure?
Is there really no way to create a webhook message containing a link pointing to an file like file://myshare/file.htm?
We posting messages with a webhook and we also want to be able to post links to stuff in our companies intranet.
Is there a way to dynamically get the version tag from my __init__.py file and append it to the dockerrun.aws.json image name for example::
{
"AWSEBDockerrunVersion": "1",
"Authentication": {
"Bucket": "dockerkey",
"Key": "mydockercfg"
},
"Image": {
"Name": "comp/app:{{version}}",
"Update": "true"
},
"Ports": [
{
"ContainerPort": "80"
}
]
}
This when when I do eb deploy it will build the correct version. At the moment I have to keep modifying the json file with each deploy.
I also stumbled upon that last year, where AWS support stated there's no such feature at hand. I ended up writing a script that receives the docker tag as parameter and composes the dockerrun.aws.json file on the fly with the correct tagname.
I've written a bash script which runs
eb deploy
Before it executes that command I change a symlink depending on if I'm running production or staging. For Example:
ln -sf ../ebs/Dockerrun.aws.$deploy_type.json ../ebs/Dockerrun.aws.json