Live Update: bundle content?

[Aymkdn]

Hey,

I'm interested by the live-update plugin. However I'm not sure what to put in the bundle Zip file? Should it be the content of my dist folder (I'm using Vue/Vite to produce it)?

So, an example of the bundle content should be the below?

• index.html
• favicon.ico
• assets/
• assets/index.xyz.js
• assets/image.png
• assets/web.abc.js

[robingenz]

Yes, exactly. You must upload your zipped dist folder.

[osamahkenawy]

Correct but check for configurations some platforms might require additional configuration files json manifest env or any of configuration files

[robingenz]

What do you mean exactly? Do you have an example? You can only update the web part of your app using live updates. Feel free to check out this guide.

[domlysi]

In my case, I'm using Capacitor with the Quasar Framework.
Do I need to take the "quasar build" produced code and zip it? In other words, what's the requirements / schema for the bundle?

[domlysi]

Thank you for your advice. I'm trying to build it without the cloud. When I use quasar build it downloads and updates the app with the bundle, but on reload it says "Webpage not available - https://localhost could not be loaded. ERR_CONNECTION_REFUSED".

[robingenz]

Feel free to drop your bundle here and i will take a look.

[domlysi]

Thanks for looking into it!

6.zip

And this is my current implementation:

 async function updateApp() {
    const {LiveUpdate} = await import('@capawesome/capacitor-live-update')
    const {bundleIds} = await LiveUpdate.getBundles()
    api.get('app/update/').then(async (resp) => {
      if (resp.status !== 200) {
        console.log('Could not check for updates', resp.status)
        return
      }
      const {bundle_id, url} = resp.data

      if (bundleIds.includes(bundle_id)) {
        console.info('Bundle is up-to-date', bundle_id)
        return
      }

      console.info('downloading', bundle_id)

      let isDownloaded = false
      try {
        await LiveUpdate.downloadBundle({
          url: url,
          bundleId: bundle_id,
        })
        console.debug('Bundle downloaded')
        isDownloaded = true
      } catch (err) {
        console.error('Could not download bundle', err)
      }

      if (isDownloaded) {
        await LiveUpdate.reload()
      }
      await LiveUpdate.ready()
    })
  }

[robingenz]

Your bundle looks good.

When I use quasar build it downloads and updates the app with the bundle, but on reload it says "Webpage not available - localhost could not be loaded. ERR_CONNECTION_REFUSED".

Can you share a screenshot?

[domlysi]

I finally figured it out. So this is what I was doing wrong:

In Quasar you can develop for multiple platforms including web. There is an intern function "$q.platform.is.nativeMobile" that I used a lot in my code to differentiate between web and ios/android.

The Problem was building the bundle with quasar build, because it will not set $q.platform.is.nativeMobile to true and therefore there will be Errors mostly because some Settings are incorrect.

Building with quasar build -T android -m capactior --ide created a capacitor folder with the correct www files, that I zipped.

It seems to be a working but hacky solution. :)

Thanks for looking into it, tho.

Edit: Maybe a more advanced example (and a full example) and docs would help to make the plugin easier to use. "Announcing the Capacitor Live Update Plugin" was already helpful, tho 👍