pwa实现动态start_url和scope等实现方案

1024小神2025-11-20 9:50

大家好，我的开源项目PakePlus可以将网页/Vue/React项目打包为桌面/手机应用并且小于5M只需几分钟，官网地址：pakeplus.com

要想实现动态的start_url，比如定制不同的路径或者添加参数，就可以使用这段代码，但是！！！！！这个在safari中不生效，所以如果你是ipad设备或者ios设备是不生效的，这个是坑

javascript 复制代码

const transformManifest = async () => {
    console.log('transformManifest')
    const url = '/manifest.webmanifest'
    console.log('url', url)
    const manifest = await (await fetch(url)).json()
    const path = location.pathname.split('/')
    const newPath =
        path && provideruuid && stationeuuid
            ? window.location.origin +
              '?provideruuid=' +
              provideruuid +
              '&stationeuuid=' +
              stationeuuid
            : window.location.href
    console.log('newPath', newPath)
    manifest.start_url = newPath
    manifest.scope = newPath
    manifest.id = '/'
    console.log('manifest', manifest)
    const manifestString = JSON.stringify(manifest)
    const blob = new Blob([manifestString], { type: 'application/json' })
    const manifestURL = URL.createObjectURL(blob)
    document
        .querySelector('[rel="manifest"]')
        ?.setAttribute('href', manifestURL)
    return Promise.resolve(manifestURL)
}

大家好，我是1024小神，技术群 / 私活群 / 股票群或交朋友都可以私信我。如果你觉得本文有用，一键三连 (点赞、评论、关注)，就是对我最大的支持~