javascript - 如何在 PWA 中使用动态 list 文件？

Question

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

如果我在我的 index.html 中加载 list ，然后不更改 list href，它似乎每次都能正常工作。

我试图将 index.html 中的 list 元素上的 href 留空，然后稍后更新它，但是当我这样做时，beforeinstallprompt 没有被触发。

在我的 index.html 中:

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

或

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

在我的 bootstrap js 文件中将 href 更新为 list ，一旦我知道要加载哪个 list 文件:

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",
      "type": "image/png"
    },
    {
      "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);
});

我知道这是一个相当普遍的情况，很多人已经解决了它，但到目前为止对我没有任何效果。有人知道吗？

Answer 1

根据获取用户设置的方式，您可以动态地将 WebManifest 编写为 Data URI，以便正确的 WebManifest 是已经在页面加载时被引用，不需要单独获取:

<link rel="manifest" href='data:application/manifest+json,{"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", "type": "image/png"}, {"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}' />