angular 7 pwa проявляется динамически

Я создал PWA с Angular 6. Позже я хочу иметь разные значки и запускать URL-адреса, поскольку приложение будет работать под несколькими URL-адресами (каждой учетной записи будет назначен уникальный URL-адрес, и у каждого из них будут разные логотипы). Поэтому я хочу динамически изменять manifest.json.

Есть ли способ сделать это?

Изменить:

Пробую вот так:

<head>
  <meta charset="utf-8">
  <title>Pwatest</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="assets/icons/coffee.png">
  <link rel="manifest" id="my-manifest-placeholder">
  <link rel="apple-touch-icon" href="assets/icons/icon-192x192.png">
  <!-- <link rel="manifest" href="manifest.json"> -->
  <meta name="theme-color" content="#1976d2">

  <script>
  var test = true;

  var myDynamicManifest = {
    "name": "pwatest",
    "short_name": "pwatest",
    "theme_color": "#1976d2",
    "background_color": "#fafafa",
    "display": "standalone",
    "scope": "/",
    "start_url": "/",
    "icons": []
  }

  if(test){
    myDynamicManifest['icons'].push({
            "src": "assets/icons/coffee-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
    });
  }else{
    myDynamicManifest['icons'].push({
            "src": "assets/icons/frog-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
    });
  }

  console.log(myDynamicManifest);
  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);
  console.log(document.querySelector('#my-manifest-placeholder'));
  </script>

</head>

output

Edit2:

Я не нашел решения. Сейчас пробую вот так:

index.html

<link rel="manifest" id="my-manifest-placeholder" href="/manifest.php">

manifest.php

<?php
$test = [
    "name" => "pwatest",
    "gcm_user_visible_only" => true,
    "short_name" => "pwatest",
    "start_url" => "/",
    "display" => "standalone",
    "orientation" => "portrait",
    "background_color" => "#fafafa",
    "theme_color" => "#1976d2",
    "icons" => [
        "src" => "assets/icons/coffee-192x192.png",
        "sizes"=> "192x192",
        "type" => "image/png"
    ]
];

header('Content-Type: application/json');
echo json_encode($test);
?>

но я становлюсь полным файлом php, а не JSON.

я могу сделать это так?


angular progressive-web-apps manifest angular-pwa
person vDrews    schedule 30.01.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете добиться этого, обслуживая манифест через службу nodejs (или на выбранном вами языке) и динамически выводя ответ на запрос GET manifest.json.

Я делал это раньше на основе заголовка «Host», который сообщит вам, для какого домена запрашивается манифест.

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

app.get("/manifest.json", function (req, res) {
    const host = req.header("Host")
    const manifest = buildManifestForHost(host)

    res
        .status(200)
        .send(manifest)
})

function buildManifestForHost(host: string): object {
    // build your manifest.json response here
}
person Michael    schedule 30.01.2020
comment
Добавлен пример того, как это можно сделать в службе Express NodeJS. - person Michael; 30.01.2020
comment
Я редактирую пример, я хочу это сделать, но я пробую ваши два и снова комментирую - person vDrews; 30.01.2020
comment
Я не уверен, будет ли работать ваш пример на стороне клиента, но даже если он работает, я все равно рекомендую использовать эту сторону сервера, чтобы избежать утечки информации обо всех различных развертываниях и избежать отправки ненужного кода / данных в браузер. - person Michael; 30.01.2020
comment
ваш код находится в дополнительном компоненте или где я должен разместить код? - person vDrews; 30.01.2020
comment
Это будет обработчик запросов в экспресс-службе NodeJS - он не зависит от кода Angular. См. expressjs.com или angular.io/guide/universal - person Michael; 30.01.2020
comment
Пример на стороне клиента работает, если manifest.json находится в папке dist, но не с другого URL-адреса. Тогда все время я становлюсь ошибкой: игнорируемый должен быть того же происхождения, что и документ. Я пробую твой, но что-то не так, не работает - person vDrews; 06.02.2020