ProgramBox

Как я могу динамически генерировать манифест PWA в PHP, извлекая данные из URL-адреса и из общедоступного файла JSON?

Post author:admin
Запись опубликована:31 марта, 2023
Post category:Вопросы по программированию

#php #web #progressive-web-apps

#php #веб #progressive-веб-приложения

Вопрос:

На данный момент у меня возникают проблемы с настройкой прогрессивного веб-приложения, вот особенности:

Цель:

Я пытаюсь настроить страницу, которая позволит устанавливать несколько PWA на основе параметров URL.

Чтобы быть точным, я создал набор значков для игр, доступных в облачном игровом сервисе Google Stadia, и хотел бы разрешить пользователям создавать значки на рабочем столе / главном экране для всех этих названий. Доступ к играм можно получить напрямую, просто открыв правильный URL.

Задача

Чтобы разрешить пользователям иметь один PWA, «установленный» для каждой комбинации игры / значка, я пытаюсь заполнить содержимое страницы с помощью PHP.

Хотя я понимаю, что PWA должны иметь возможность запускать на стороне клиента, похоже, что до тех пор, пока загружается начальная страница PHP, если содержимое правильно отформатировано и может выполняться локально, его следует загружать как есть и запускать должным образом; это правильно?

Проблема:

Основная проблема, с которой я в настоящее время сталкиваюсь, заключается в том, что браузеры, похоже, не распознают мой app.webmanifest файл как действительный JSON, тогда как когда я загружаю страницу в браузере, он выдает совершенно действительный PHP.

Вот конкретная ошибка в консоли Chrome: Manifest: Line: 1, column: 1, Syntax error.

Вот код, который отображается на вкладке «Источники» в Chrome dev tools, который не соответствует тому, что должна генерировать страница:

Примечание: я удалил 3 строки, которые выглядели как UID (возможно, связанные с файлами cookie?) на всякий случай, если они были чем-то, чем я не должен делиться.

 <html>
   <body>
      <script type="text/javascript" src="/aes.js" ></script><script>
         function toNumbers(d) {
            var e = [];
            d.replace(/(..)/g, function(d) {
               e.push(parseInt(d, 16))
            });
            return e
         }

         function toHex() {
            for (var d = [], d = 1 == arguments.length amp;amp; arguments[0].constructor == Array ? arguments[0] : arguments, e = "", f = 0; f < d.length; f  ) e  = (16 > d[f] ? "0" : "")   d[f].toString(16);
            return e.toLowerCase()
         }
         var a = toNumbers("UID_HERE"),
            b = toNumbers("UID_HERE"),
            c = toNumbers("UID_HERE");
         document.cookie = "__test="   toHex(slowAES.decrypt(c, 2, a, b))   "; expires=Thu, 31-Dec-37 23:55:55 GMT; path=/";
         location.href = "MY_APP_URL/app.webmanifest?fullName=Full Nameamp;shortName=Shortamp;uid=b17f16d4a4f94c0a85e07f54dbdedbb6rcp1amp;variant=2amp;i=1";
      </script>
      <noscript>This site requires Javascript to work, please enable Javascript in your browser or use a browser with Javascript support</noscript>
   </body>
</html>

Разбивка кода:

Контекст:

PWA размещается на веб-сервере InfinityFree.

РЕДАКТИРОВАТЬ: я нашел это сообщение на форуме, которое может быть связано с ошибкой, которую я получаю, имеет ли это смысл? https://forum.infinityfree.net/t/extra-javascript-in-response/7031/2

Note: I’ve removed any direct URL references (such as the site I am running the app off of and a github repo).

The main page being called is MY_APP_URL/index.php?fullName=Full Nameamp;shortName=Shortamp;uid=b17f16d4a4f94c0a85e07f54dbdedbb6rcp1amp;variant=2

Main index.php

 <?php
    if( !$fullName = filter_var ( $_GET['fullName'], FILTER_SANITIZE_STRING ) ) {
        $fullName = null;
    }
    if( !$shortName = filter_var ( $_GET['shortName'], FILTER_SANITIZE_STRING ) ) {
        $shortName = null;
    }
    if( !$uid = filter_var ( $_GET['uid'], FILTER_SANITIZE_STRING ) ) {
        $uid = null;
    }
    if( !$variant = filter_var ( $_GET['variant'], FILTER_SANITIZE_NUMBER_INT ) ) {
        $variant = 0;
    }
    if( !$alt = filter_var ( $_GET['alt'], FILTER_SANITIZE_STRING ) ) {
        $alt = '';
    }
    
    $data = json_decode( file_get_contents( "GITHUB_REPO_URL/refs.json" ) );
    
    if ($fullName != null amp;amp; $shortName != null amp;amp; $uid != null amp;amp; $data != null)
    {
?>
<!DOCTYPE HTML>
<html lang="en">
    <head>
        <title>Game – <?php echo $fullName ?></title>
        <link rel="manifest" href="app.webmanifest?fullName=<?php
            echo $fullName . 'amp;shortName=' . $shortName . 'amp;uid=' . $uid;
            if ($variant != 0)
            {
                echo 'amp;variant=' . $variant;
            }
            if ($alt != '')
            {
                echo 'amp;alt=' . $alt;
            }
        ?>">
        <meta name="Description" content="This page will allow you to install <?php echo $fullName ?> as a Progressive Web App.">
        <meta name="mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="application-name" content="<?php echo $fullName ?>">
        <meta name="apple-mobile-web-app-title" content="<?php echo $shortName ?>">
        <meta name="theme-color" content="#202124">
        <meta name="msapplication-navbutton-color" content="#202124">
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
        <meta name="msapplication-starturl" content="https://stadia.google.com/player/<?php echo $uid ?>">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="theme-color" content="#202124">

        <?php
            echo '<link rel="icon" type="image/x-icon" sizes="16x16 32x32 48x48 64x64 128x128 256x256" href="' . $data->datasets->icons->uri . $data->uids->$uid->$variant . $alt . $data->datasets->icons->extension . '">' . "ntt";
            echo '<link rel="icon" type="image/png" sizes="128x128" href="' . $data->datasets->{'images-128'}->uri . $data->uids->$uid->$variant . $alt . $data->datasets->{'images-128'}->extension . '">' . "ntt";
            echo '<link rel="icon" type="image/png" sizes="192x192" href="' . $data->datasets->{'images-192'}->uri . $data->uids->$uid->$variant . $alt . $data->datasets->{'images-192'}->extension . '">' . "ntt";
            echo '<link rel="icon" type="image/png" sizes="512x512" href="' . $data->datasets->{'images-512'}->uri . $data->uids->$uid->$variant . $alt . $data->datasets->{'images-512'}->extension . '">' . "ntt";
            echo '<link rel="icon" type="image/png" sizes="1024x1024" href="' . $data->datasets->images->uri . $data->uids->$uid->$variant . $alt . $data->datasets->images->extension . '">' . "ntt";
            echo '<link rel="icon" type="image/webp" sizes="1024x1024" href="' . $data->datasets->webp->uri . $data->uids->$uid->$variant . $alt . $data->datasets->webp->extension . '">' . "n";
            echo '<link rel="apple-touch-icon" href="' . $data->datasets->{'images-192'}->uri . $data->uids->$uid->$variant . $alt . $data->datasets->{'images-192'}->extension . '">' . "ntt";
        ?>
    </head>
    <body>
        <?php echo '<p>Hello World</p>'; ?> 
    </body>
</html>
<?php
    }
    else
    {
        echo "ERROR";
    }
?>

The app.webmanifest File:

Note, this file is run as PHP using the following code in the folder’s .htaccess file: AddType application/x-httpd-php5 .webmanifest

 <?php
    header('Content-Type: manifest/json');

    if( !$fullName = filter_var ( $_GET['fullName'], FILTER_SANITIZE_STRING ) ) {
        $fullName = null;
    }
    if( !$shortName = filter_var ( $_GET['shortName'], FILTER_SANITIZE_STRING ) ) {
        $shortName = null;
    }
    if( !$uid = filter_var ( $_GET['uid'], FILTER_SANITIZE_STRING ) ) {
        $uid = null;
    }
    if( !$variant = filter_var ( $_GET['variant'], FILTER_SANITIZE_NUMBER_INT ) ) {
        $variant = 0;
    }
    if( !$alt = filter_var ( $_GET['alt'], FILTER_SANITIZE_STRING ) ) {
        $alt = '';
    }
    
    $data = json_decode( file_get_contents( "GITHUB_REPO_URL/refs.json" ) );
    
?>{
    "name": "<?php echo $fullName ?>",
    "short_name": "<?php echo $shortName ?>",
    "lang": "en-US",
    "start_url": "https://stadia.google.com/player/<?php echo $uid ?>",
    "scope": "https://stadia.google.com/",
    "display": "standalone",
    "theme_color": "#202124",
    "icons": [
        {
            "src": "<?php echo $data->datasets->{'images-128'}->uri . $data->uids->$uid->$variant . $alt . $data->datasets->{'images-128'}->extension; ?>",
            "type": "image/png",
            "sizes": "128x128"
        },
        {
            "src": "<?php echo $data->datasets->{'images-192'}->uri . $data->uids->$uid->$variant . $alt . $data->datasets->{'images-192'}->extension; ?>",
            "type": "image/png",
            "sizes": "192x192"
        },
        {
            "src": "<?php echo $data->datasets->{'images-512'}->uri . $data->uids->$uid->$variant . $alt . $data->datasets->{'images-512'}->extension; ?>",
            "type": "image/png",
            "sizes": "512x512"
        },
        {
            "src": "<?php echo $data->datasets->images->uri . $data->uids->$uid->$variant . $alt . $data->datasets->images->extension; ?>",
            "type": "image/png",
            "sizes": "1024x1024"
        },
        {
            "src": "<?php echo $data->datasets->webp->uri . $data->uids->$uid->$variant . $alt . $data->datasets->webp->extension; ?>",
            "type": "image/webp",
            "sizes": "1024x1024"
        },
        {
            "src": "<?php echo $data->datasets->icons->uri . $data->uids->$uid->$variant . $alt . $data->datasets->icons->extension; ?>",
            "type": "image/x-icon",
            "sizes": "16x16 32x32 48x48 64x64 128x128 256x256"
        }
    ],
    "background_color": "#202124",
    "related_applications": [
        {
            "platform": "play",
            "id": "com.google.stadia.android",
            "url": "https://play.google.com/store/apps/details?id=com.google.stadia.android"
        }
    ],
    "prefer_related_applications": false
}

The output of this is the following:

 {
    "name": "Long Name",
    "short_name": "Short",
    "lang": "en-US",
    "start_url": "https://stadia.google.com/player/b17f16d4a4f94c0a85e07f54dbdedbb6rcp1",
    "scope": "https://stadia.google.com/",
    "display": "standalone",
    "theme_color": "#202124",
    "icons": [
        {
            "src": "GITHUB_REPO_URL/Images/128/The Elder Scrolls – Online-Summerset.png",
            "type": "image/png",
            "sizes": "128x128"
        },
        {
            "src": "GITHUB_REPO_URL/Images/192/The Elder Scrolls – Online-Summerset.png",
            "type": "image/png",
            "sizes": "192x192"
        },
        {
            "src": "GITHUB_REPO_URL/Images/512/The Elder Scrolls – Online-Summerset.png",
            "type": "image/png",
            "sizes": "512x512"
        },
        {
            "src": "GITHUB_REPO_URL/Images/The Elder Scrolls – Online-Summerset.png",
            "type": "image/png",
            "sizes": "1024x1024"
        },
        {
            "src": "GITHUB_REPO_URL/WebP/The Elder Scrolls – Online-Summerset.webp",
            "type": "image/webp",
            "sizes": "1024x1024"
        },
        {
            "src": "GITHUB_REPO_URL/Icons/The Elder Scrolls – Online-Summerset.ico",
            "type": "image/x-icon",
            "sizes": "16x16 32x32 48x48 64x64 128x128 256x256"
        }
    ],
    "background_color": "#202124",
    "related_applications": [
        {
            "platform": "play",
            "id": "com.google.stadia.android",
            "url": "https://play.google.com/store/apps/details?id=com.google.stadia.android"
        }
    ],
    "prefer_related_applications": false
}

Ссылка на файл репозитория Github «refs.json»:

Я упростил это, добавив только одну запись в "uids" , чтобы сделать ее короче.

 {
    "datasets":{
        "icons":{
            "uri":"GITHUB_REPO_URL/Icons/",
            "extension":".ico"
        },
        "images":{
            "uri":"GITHUB_REPO_URL/Images/",
            "extension":".png"
        },
        "images-512":{
            "uri":"GITHUB_REPO_URL/Images/512/",
            "extension":".png"
        },
        "images-192":{
            "uri":"GITHUB_REPO_URL/Images/192/",
            "extension":".png"
        },
        "images-128":{
            "uri":"GITHUB_REPO_URL/Images/128/",
            "extension":".png"
        },
        "webp":{
            "uri":"GITHUB_REPO_URL/WebP/",
            "extension":".webp"
        }
    },
    "other":{
        "altSuffix":"_alt"
    },
    "uids":{
        "b17f16d4a4f94c0a85e07f54dbdedbb6rcp1":{
            "0":"The Elder Scrolls – Online",
            "1":"The Elder Scrolls – Online-Morrowind",
            "2":"The Elder Scrolls – Online-Summerset",
            "3":"The Elder Scrolls – Online-Elsweyr",
            "4":"The Elder Scrolls – Online-Greymoor"
        },
    }
}

1. РЕШАЕМАЯ: Похоже, что с сайтом бесплатного хостинга, который я использовал, возникла проблема, из-за которой webmanifest стал непригодным для использования: forum.infinityfree.net/t/extra-javascript-in-response/7031/2

Вопрос:

Цель:

Задача

Проблема:

Разбивка кода:

Контекст:

Main index.php

The app.webmanifest File:

Ссылка на файл репозитория Github «refs.json»:

Комментарии:

Вам также может понравиться

присваивайте значения точкам в соответствии со значениями ближайших точек

Функция Firebase Analytics не распознается

RxJava ( Room): Почему Flowable<Список> возвращает список<Список>?