Реализация файла manifest.json для приложения VueJS для установки условий - PullRequest
Новая
       21

Реализация файла manifest.json для приложения VueJS для установки условий

0 голосов
/ 26 января 2019

Я добавил файл manifest.json в свое приложение Vue. Этот файл находится в папке с именем scripts, на которую затем ссылаются мои main.js. Тем не менее, это действительно ничего не делает. Например, я настроил его так, чтобы он отображался как автономный, устанавливал ориентацию на портрет, а также добавлял значки заголовка и закладки, когда пользователь добавляет его в закладки в своем браузере. К сожалению, по некоторым причинам это, кажется, не работает вообще. Где я ошибся?

Манифест.json выглядит следующим образом 

{
  "name": "Bake Bread App",
  "short_name": "Breadr",
  "theme_color": "blue",
  "background_color": "blue",
  "display": "standalone",
  "orientation": "portrait",
  "Scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "/assets/bookmark-icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "/assets/bookmark-icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "/assets/bookmark-icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "/assets/bookmark-icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "/assets/bookmark-icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "/assets/bookmark-icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/assets/bookmark-icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "/assets/bookmark-icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "splash_pages": null
}

Тогда, если мы поднимемся на уровень (из этой папки скриптов) и перейдем к main.js, у меня будет 

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

Vue.config.productionTip = false;

// FILTERS
Vue.filter('snippet', function(value) {
    return value.slice(0,100);
});

Vue.component('loading-screen', {
  template: '<div id="loading">Loading...</div>'
});

import json from './scripts/manifest.json'
export default{
    data(){
        return{
            myJson: json
        }
    }
}

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount("#app");

Кроме того, я добавил <link rel="manifest" href="js/manifest.json"> в свой index.html, как указано в Документации для разработчиков Google.

1 Ответ

0 голосов
/ 27 января 2019

Причина, по которой он не работает в Vue img src, которые должны быть определены в Data object с require()

и веб-пакет должен знать об изображениях.

  • песочница

  • вы можете изменить манифест и использовать функцию получения для своих ресурсов.

  • Или вы можете use require("path to the resource (not the manifest string)") в вашем объекте данных.

helloWorld.vue: 

 <template>
    <div class="hello">
    <h1>{{ msg }}</h1>

    <ol v-for="x in myJson.icons" :v-bind="x" :key="x">
      <li>
      <div> name: {{x.name}}</div>
      <div> name: {{x.sizes}}</div>
      <div> name: {{x.type}}</div>
      <img :src="getSrc(x.src)" alt="wrong..">
      </li>
    </ol>
  </div>
</template>

<script>
import json from "../../manifest.json";

export default {
  name: "HelloWorld",
  data() {
    return {
      myJson: json,
      msg: "Manifest:"
    };
  },
  methods: {
    getSrc(src) {
      return require("../assets/" + src);
    }
  }
};
</script>

измененный значок JSON: 

  "icons": [
    {
      "name": "logo",
      "src": "logo.png",
      "sizes": "99x99",
      "type": "image/png"
    },
    {
      "name": "logo2",
      "src": "logo.png",
      "sizes": "929x929",
      "type": "image/png"
    }
  ],
...