如何在PWA中使用动态清单文件？

如何解决如何在PWA中使用动态清单文件？

我们有一个SaaS平台，需要能够根据用户设置加载不同的清单文件。一旦启动应用程序，便会获取用户设置，一旦完成，我想加载正确的清单。但是，这不起作用。我尝试了几种不同的方法来执行此操作，但是无法触发beforeinstallprompt事件。

如果我在自己的index.html中加载清单，然后不更改清单href，那么每次似乎都可以正常工作。

我试图将href.html清单中的manifest元素上的href保留为空，然后稍后进行更新，但是beforeinstallprompt不会被触发。

在我的index.html中：

<link rel="manifest" href="">

或

<link rel="manifest" href="/manifest.json">

一旦我知道要加载哪个清单文件，就可以在我的引导js文件中将href更新为清单文件：

var href = "https://xxx.s3.eu-central-1.amazonaws.com/sites/1/manifest2.json";
var manifestJson = {
  "name": "test in code","short_name": "test in code","icons": [
    {
      "src": "https://xxx.s3.eu-central-1.amazonaws.com/sites/0/icons/android-chrome-192x192.png","sizes": "192x192","type": "image/png"
    },{
      "src": "https://xxx.s3.eu-central-1.amazonaws.com/sites/0/icons/android-chrome-256x256.png","sizes": "256x256",{
      "src": "https://xxx.s3.eu-central-1.amazonaws.com/sites/0/icons/android-chrome-512x512.png","sizes": "512x512","type": "image/png"
    }
  ],"start_url": "http://localhost:9000/home/","display": "standalone","background_color": "#2B3D4B","theme_color": "#00afec","prefer_related_applications": false
};
var stringManifest = JSON.stringify(manifestJson);
var blob = new Blob([stringManifest],{type: 'application/json'});
var manifestURL = URL.createObjectURL(blob);

// I have tried both ways of updating the manifest below

// $("head").find("link[rel='manifest']").attr("href",manifestURL);
$("head").find("link[rel='manifest']").attr("href",href);

window.addEventListener('beforeinstallprompt',function(event) {
    console.log("poa: \nxxxxxxxxxx BEFOREINSTALLPROMPT xxxxxxxxxxx\n\n");
    $("body").addClass("hypo-install-prompt");

    // Save the event for later use (when the user clicks an install button)
    app.cache.beforeinstallprompt = event;
});

navigator.serviceWorker.getRegistrations().then(function(registrations) {
    console.log("Unregister ServiceWorker",registrations);
    for (var i = 0; i < registrations.length; i++) {
       var registration = registrations[i];
       registration.unregister();
    }
});

navigator.serviceWorker.register('/home/serviceWorker.js',{ scope: '/home/' }).then(function(registration) {
   // Registration was successful
   console.log('ServiceWorker registration successful with scope: ',registration.scope);
},function(err) {
   console.log('ServiceWorker registration failed: ',err);
});

我知道这是一个相当普遍的情况，许多人已经解决了这个问题，但是到目前为止，对我来说什么都没有。有人给了小费吗？

解决方法

根据获取用户设置的方式，您可以将<!-- These scripts include the full jQuery UI --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <script src=""></script> <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" /> <div class="modal-body"> <div class="images"> <a href="https://www.site1.com"> <img src="https://images.pexels.com/photos/413727/pexels-photo-413727.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Image 1"> </a> <br> <a href="https://www.site2.com"> <img src="https://images.pexels.com/photos/1036623/pexels-photo-1036623.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt=""> </a> </div> <div id="dialog" title="Lorem ipsum"> <p>Lorem ipsum dolor sit amet consectetur,adipisicing elit. Quod amet,et minus commodi repellendus hic? Ut eos blanditiis quis provident.</p> </div> </div>动态地写为数据URI ，以便正确的WebManifest被引用为页面加载并且不需要单独获取：

WebManifest