TutorialsClonablesContact

Wized to PWA (WizedDev)

Add this line of HTML code to your Webflow Header Code

<link rel="manifest" wized="manifestURL">

  1. Create a Computed Variable in Wized called "v.manifest"

Example Variable

  1. Add this Sample Manifest Code into v.manifest

// Please customize your Manifest - based on your apps details ;-)

const manifestJson = {
  "short_name": "Tabs IO",
  "name": "Tabs IO",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#FFFFFF",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "https://embed.attribula.com/vault/xksahjyk/vZBgRmgWjYo0wGn9hOfmyLb_Hdg/xj5KgQ../%5BW.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ]
};

//Keep this part as it is ;-)

// Convert the JavaScript object to a JSON string
const jsonString = JSON.stringify(manifestJson);

// Create a Blob from the JSON string
const blob = new Blob([jsonString], {type: "application/json"});

// Generate a Blob URL from the Blob
const manifestUrl = URL.createObjectURL(blob);

return manifestUrl

  • Here is how it should look on your side...

Example Overview of the Computed Variable

  1. Create a Set HTML Attribute "Element Action" - and add the Manifest as the href attribute

Example of the "Set Manifest" Action

Thanks for reading the docs - please feel free to reference back to the YouTube Tutorial ;-)

Video Tutorial
PreviousWizedDev Docs

Last updated

Was this helpful?