我有一个用JSF和primefaces做的项目。我尝试了很多东西,但我仍然有一些问题使它工作。我的工作是实现将网站作为PWA使用的可能性和离线缓存。
但我遇到了一些问题,事实上,我没有一个合适的index.xhtml。
所有的一切都始于一个重定向到SSO,用了 https:/www.keycloak.org. 但是,我们没有一个手在这个。
所以我必须想办法让它发挥作用。
事实上。
-首先,我尝试把manifest.json和serviceworker的脚本链接放在SSO之前的页面重定向里面。
-第二,我试图把它在SSO后的页面。
因此,第一种方法没有工作,我可能需要在keycloak SSO中包含所有这些内容.但第二种想法也没有工作,所以我不知道我的问题是否是关于start_url范围的问题,因为每个点都明显不同。我试着找一个合适的方法来做。但是网上没有任何关于这种问题的资料。serviceworker不能用,manifest也找不到。
我们的页面使用的模板显示如下
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no;user-scalable=0, shrink-to-fit=no;"/>
<link rel="shortcut icon" type="image/x-icon" href="#{request.contextPath}/resources/img/flash-23.png"/>
<ui:include src="../head.xhtml"/>
<!-- <ui:include src="../serviceworker.xhtml"/>-->
</h:head>
和头部内部。
<link rel="apple-touch-icon" href="#{request.contextPath}/resources/img/icon-pwa-192x192.png"/>
<link rel="manifest" href="#{request.contextPath}/resources/manifest/manifest.json"/>
<link type="text/css" rel="stylesheet"
href="#{request.contextPath}/javax.faces.resource/theme.css.faces?ln=primefaces-alice&v=#{utilBean.version}"/>
我会把manifest.json也给你。
{
"dir" : "ltr",
"lang" : "fr",
"name": "Espace Client ÉS",
"scope" : "/",
"description": "« description »Espace client ÉS qui permet de gérer ses contrats ÉS. Gérez vos contrats ÉS. Consultez vos factures en ligne. Et suivre vos consommations.",
"short_name": "ÉS & Moi",
"start_url": "https://auth.es.fr/auth/realms/espace-client-sso/protocol/openid-connect/auth?response_type=code&client_id=ALICE_CLIENT&redirect_uri=http%3A%2F%2Fespaceclient.es.fr%2Falice-ael%2Fsso%2Flogin&state=4696387f-46b2-4cbf-aa1c-8adefe9dc35f&login=true&scope=openid",
"background_color": "transparent",
"display": "standalone",
"orientation": "any",
"theme_color": "transparent",
"related_applications" : [],
"prefer_related_applications" : false,
"generated" : "true",
"icons": [
{
"src": "/alice-ael/resources/img/icon-pwa-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "/alice-ael/resources/img/icon-pwa-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "/alice-ael/resources/img/icon-pwa-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/alice-ael/resources/img/icon-pwa-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
并为完成服务工 。
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets">
<script type="text/javascript">
if("serviceWorker" in navigator) {
if (navigator.serviceWorker.controller) {
console.log("Service worker trouver");
} else {
navigator.serviceWorker.register("/alice-ael/resources/js/service-worker.js", {
scope: './'
})
.then((reg) => {
console.log("Service worker authentifier" + reg.scope);
});
}
}
</script>
</ui:composition>
谢谢你的帮助。
你可以使用 https:/www.pwabuilder.com 以分析问题(与PWA相关)在您的网站,只需把URL,也有助于实现相同的。
希望对您有所帮助