Создание PWA на сайте JSF с SSO - PullRequest
1 голос
/ 25 мая 2020

У меня есть проект, сделанный на JSF и primefaces. Я пробовал много вещей, но у меня все еще возникают проблемы, чтобы заставить его работать. Моя работа заключается в реализации возможности использования веб-сайта в качестве PWA с автономным кешем.

Но я столкнулся с некоторыми проблемами, на самом деле у меня нет подходящего index.x html.

Все начинается с перенаправления на SSO, сделанного с помощью https://www.keycloak.org/. Но мы не имеем к этому никакого отношения.

Так что мне пришлось найти способ заставить его работать.

Фактически:

- сначала я пытаюсь поставить манифест. json и ссылку на скрипт для сервисного работника внутри перенаправления страницы перед SSO.

-второй я пытаюсь поместить его на страницу после SSO.

Поэтому первый способ не сработал, и мне может потребоваться включить все это в SSO keycloak. Но вторая идея не сработала, поэтому я не знаю, связана ли моя проблема с start_url / scope, которые явно различаются в каждой точке. Я пытаюсь найти правильный способ сделать это. Но по инте rnet и такого рода вопросам нет ничего. Сервисный работник не работает, и манифест не найден.

Наши страницы используют шаблон, показанный ниже

<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&amp;v=#{utilBean.version}"/>

Я буду дайте вам также манифест. 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>

Спасибо, за вашу помощь.

1 Ответ

0 голосов
/ 27 мая 2020

Вы можете использовать https://www.pwabuilder.com/ для анализа проблем (связанных с PWA) на вашем сайте, просто указав URL-адрес, что также помогает достичь того же.

Надеюсь, это поможет!

...