[英]How to generate and place a blob file on a relative path?
在相對 URL 上構建“添加到主屏幕”功能時,我正在動態生成manifest.json
並通過創建 Blob URL 並將其添加到link[rel="manifest"]
的href
屬性來放置它。
我被卡住的地方是,我生成的清單 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 的靜態方法。
任何能讓我在相對 URL 上動態生成和放置manifest.json
文件的建議都將不勝感激。
提前致謝。
關於相對 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);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.