如何在 PWA 和 ReactJS 中创建动态 manifest.json 文件? [英] How to create dynamic manifest.json file in PWA and ReactJS?
本文介绍了如何在 PWA 和 ReactJS 中创建动态 manifest.json 文件?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个项目需要为我的 PWA (ReactJS) 创建一个动态 manifest.json 文件.
I have a project which needs to create a dynamic manifest.json file for my PWA (ReactJS).
请看下面我的代码:
app.service.js:
function getAppDetails() {
const requestOptions = {
method: 'GET',
headers: authHeader()
};
// TODO create dynamic manifest.json file here
return fetch(`${config.apiUrl}/api/apps`, requestOptions).then(handleResponse);
}
function handleResponse(response) {
return response.text().then(text => {
const data = text && JSON.parse(text);
if (!response.ok) {
if (response.status === 401) {
// auto logout if 401 response returned from api
logout();
location.reload(true);
}
const error = (data && data.message) || response.statusText;
return Promise.reject(error);
}
return data;
});
}
app.actions.js:
function getAppDetails() {
return dispatch => {
dispatch(request());
appService.getAppDetails()
.then(
details => dispatch(success(details)),
error => dispatch(failure(error.toString()))
);
};
function request() { return { type: appConstants.GETDETAILS_REQUEST } }
function success(details) { return { type: appConstants.GETDETAILS_SUCCESS, details } }
function failure(error) { return { type: appConstants.GETDETAILS_FAILURE, error } }
}
LoginPage.jsx:
import { appActions } from '../_actions';
class LoginPage extends React.Component {
constructor(props) {
super(props);
// reset login status
this.props.dispatch(userActions.logout());
this.state = {
email: '',
password: '',
isDisabled: false,
submitted: false
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.showSwal = this.showSwal.bind(this);
}
componentDidMount() {
// TODO call the action to add dynamic manifest file to index.html
this.props.dispatch(aapActions.getAppDetails());
}
render() {
return (
................
);
}
}
我对这种事情很陌生.我该如何开始?
I am new to this kind of thing. How can I get started?
推荐答案
如果您想创建动态 manifest.json，您希望在 HTML 中有一个带有 rel="manifest" 但没有 href 属性的链接标签.稍后使用此标签来填充您的清单.如在
if you want to create dynamic manifest.json you want to have a link tag in the HTML with rel="manifest" but without href attribute. And use this tag later to populate your manifest. As in
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
<link rel="manifest" id="my-manifest-placeholder">
</head>
<body>
<!-- page content -->
</body>
</html>使用 JSON 对象设置清单
Use a JSON object to set your manifest
var myDynamicManifest = {
"name": "Your Great Site",
"short_name": "Site",
"description": "Something dynamic",
"start_url": "<your-url>",
"background_color": "#000000",
"theme_color": "#0f4a73",
"icons": [{
"src": "whatever.png",
"sizes": "256x256",
"type": "image/png"
}]
}
const stringManifest = JSON.stringify(myDynamicManifest);
const blob = new Blob([stringManifest], {type: 'application/json'});
const manifestURL = URL.createObjectURL(blob);
document.querySelector('#my-manifest-placeholder').setAttribute('href', manifestURL);这篇关于如何在 PWA 和 ReactJS 中创建动态 manifest.json 文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
