How to fix that URL query params are not working via the web share target API in vuejs pwa?

1
votes

I'm building a new PWA in VueJS and have registered the app as a Share Target in my manifest.json (https://developers.google.com/web/updates/2018/12/web-share-target). Now my code works if I put the query params directly in the URL via the browser address bar (e.g. "/#/page-edit?url=https://google.com/&title=Google&description=SearchEngine"), but it doesn't work if I sent it via the Web Share Target API.

I have already tried a range of different manifest settings, but I'm not sure if my manifest settings are wrong or my code (e.g., tried both method "GET" and "POST", etc).

Current Manifest:

{
  "name": "...",
  "short_name": "...",
  "icons": [],
  "start_url": "/",
  "display": "standalone",
  "orientation": "portrait",
  "background_color": "...",
  "theme_color": "...",
  "share_target": {
    "action": "/#/page-edit",
    "method": "GET",
    "enctype": "application/x-www-form-urlencoded",
    "params": {
      "title": "title",
      "text": "description",
      "url": "url"
    }
  }  
}

Current Vue view:

I have removed most of the not important code. As you can see I load the query data in two ways at the moment:
1. As data defaults, e.g., 'url': this.$route.query.url || null
2. As a variable in a <p>, e.g. {{ this.$route.query.url }} 

<template>
  <form class="modal-view">
    <div class="field">
      <label for="url" class="label">URL / link</label>
      <div class="control">
        <input id="url" v-model="url" class="input" type="url" placeholder="https://..." >
      </div>
      <p><strong>url query:</strong> {{ this.$route.query.url }}</p>
    </div>

    <div class="field">
      <label for="title" class="label">Title</label>
      <div class="control">
        <input id="title" v-model="title" class="input" type="text" placeholder="The greatest article" >
      </div>
      <p><strong>title query:</strong> {{ this.$route.query.title }}</p>
    </div>

    <div class="field">
      <label for="description" class="label">Description</label>
      <div class="control">
        <input id="description" v-model="description" class="input" type="text" placeholder="The greatest article" >
      </div>
      <p><strong>description query:</strong> {{ this.$route.query.description }}</p>
    </div>

    <hr class="is-small has-no-line">

    <div class="field is-grouped is-grouped-right">
      <div class="control">
        <button @click.prevent="createPage" class="button is-primary is-fullwidth is-family-secondary">Submit</button>
      </div>
    </div>
  </form>
</template>

<script>
  import ...
  export default {
    name: 'page-edit',
    computed: {},
    data () {
      return {
        // Initialize default form values
        'url': this.$route.query.url || null,
        'title': this.$route.query.title || null,
        'description': this.$route.query.description || null
      }
    },
    mounted () {},
    methods: {
      createPage () {},
    }
  }
</script>

So what I would expect is that the query params can also be read if shared via the Web Share Target API, but at this point, it doesn't show anything this way. But good to mention again, it does all work if I simply change the query params in the browser address bar (that's also why I'm confused).

End result should look like

Edits

Edit 1 Have been playing around a bit more, and now found out that if I use window.location.href that it shows the following: https://appurl.com/?title=xxx&description=xxx#/page-edit

I.e. it puts the query params in the wrong position?

Edit 2 Might be related to this Vue Router issue: Hash mode places # at incorrect location in URL if current query parameters exist on page load

Edit 3 Somehow fixed it with (I think)

const router = new Router({
  mode: 'history'

And removing the # from the action in share_target

1
vue.jsshareprogressive-web-apps

1 Answers

0
votes

To fix it I have done the following things:

  1. Added the following in the router, which resulted in removing the # from all URLs
const router = new Router({
  mode: 'history'
  1. Removed the # from the share_target.action in the manifest

Somehow fixed it all!