如何生成 blob 文件并将其放置在相对路径上？

Question

在相对 URL 上构建 "Add to Homescreen" 功能时，我正在动态生成我的 manifest.json 并通过创建 Blob URL 并将其添加到href link[rel="manifest"] 的属性。

我卡住的地方是，我生成的清单 URL 指向如下内容： https://example.com/jbskdjcs9987r38943nsmd 相反，我想要的是： https://example.com/pwa/jbskdjcs9987r38943nsmd 这只不过是想要将 blob 文件放在相对 URL.

上

下面是我如何生成 blob 文件的示例：

let myManifest = {
  "name": "Example PWA",
  "short_name": "PWA",
  "description": "Example PWA",
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#3f51b5",
  "background_color": "#3f51b5",
  "icons": [
    {
        "src": "images/android-chrome-192x192.png",
        "sizes": "192x192",
        "type": "image/png"
    },
    {
        "src": "images/android-chrome-512x512.png",
        "sizes": "512x512",
        "type": "image/png"
    }
  ]
}


const stringManifest = JSON.stringify(myManifest);
const blob = new Blob([stringManifest], {type: 'application/json'});
const manifestURL = URL.createObjectURL(blob);
console.log(manifestURL);
//document.getElementById('my-manifest-placeholder').setAttribute('href', manifestURL);

我想做这样的事情：

const myURL = new URL('/pwa/','https://example.com');
const manifestURL = myURL.createObjectURL(blob);

但这不起作用，因为 createObjectURL 是 URL 的静态方法。

任何能让我生成 manifest.json 文件并将其动态放置在相对 URL 上的建议都将不胜感激。

提前致谢。

Answer 1

关于亲戚 URL，我想不出一种方法将 blob 文件动态放置在亲戚 URL 上，但使用数据 URL 方法解决了问题。

下面是数据 URL 方法的示例：

const stringManifest = JSON.stringify(myDynamicManifest);
const blob = new Blob([stringManifest], {type: 'application/json'});
// const manifestURL = URL.createObjectURL(blob);
let reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = function(){
  document.getElementById('my-manifest-placeholder').setAttribute('href', reader.result);
}

如何生成 blob 文件并将其放置在相对路径上？

How to generate and place a blob file on a relative path?

javascript

web-applications

progressive-web-apps

manifest.json