Как установить значок в приложении PWA на главном экране и добавить закладку с помощью nuxt.config.js (Safari) - PullRequest
Новая
       59

Как установить значок в приложении PWA на главном экране и добавить закладку с помощью nuxt.config.js (Safari)

0 голосов
/ 20 февраля 2019

Я разрабатываю приложение PWA, используя Nuxt.js.Я мог запустить его хорошо, поэтому я попытался добавить HomeScreen и Bookmark от Safari (iOS11.4).Однако значок не отображался на главном экране и в закладках. (Google Chrome и Android работают хорошо)

nuxt.config.js ниже 

const pkg = require('./package')
const dir = "/dir/"

module.exports = {
  mode: 'spa',
  head: {
    title: pkg.name,
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { name: 'apple-mobile-web-app-capable', content: 'yes' },
      { name: 'apple-mobile-web-app-status-bar-style', content:'black'},
      { name: 'apple-mobile-web-app-title', content:"test"},
      { hid: 'description', name: 'description', content: pkg.description }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: `${dir}/favicon.ico` },
      { rel: 'apple-touch-icon', type: 'image/x-icon', href: `${dir}/apple-touch-icon.png` }
    ]
  },
  loading: { color: '#fff' },
  router:{
    base:`${dir}/`,
    mode:"history",
    middleware:[
      'auth'
    ]   
  },
  plugins: [
    '~/plugins/onsenui',
    '~/plugins/axios',
    '~/plugins/routerOption'
  ],
  manifest: {
      name: "test",
      lang: 'ja',
      'display':'fullscreen',
      title:'test',
      'og:title':'test',
      description:'test',
      'og:description':'test',
      theme_color:'#FFFFFF',
      background_color:'#FFFFFF',
      start_url:`${dir}/`,
      short_name:"test",
      icons:[{
        src:`${dir}/icon.png`,
        size:"144x144",
        type:"image/png"
      },{
        src:`${dir}/icon.png`,
        size:"192x192",
        type:"image/png"
      }]
  },
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/pwa', 
    ['@nuxtjs/moment', ['ja']],
    defaultLocale: 'ja',
  ],    
  workbox: {
    dev: true 
  },
  axios:{
    proxy:true
  }
}

Что пошло не так?Кто-нибудь научит меня, как это исправить, пожалуйста:)

PS Вот каталог статической папки.

static -icon.png -favicon.ico

И я пробовал это, но этоне работал. 

   const pkg = require('./package')
const dir = "/dir/"

module.exports = {
  mode: 'spa',
  head: {
    title: pkg.name,
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { name: 'apple-mobile-web-app-capable', content: 'yes' },
      { name: 'apple-mobile-web-app-status-bar-style', content:'black'},
      { name: 'apple-mobile-web-app-title', content:"test"},
      { hid: 'description', name: 'description', content: pkg.description }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: `${dir}/favicon.ico` },
      { rel: 'apple-touch-icon', type: 'image/x-icon', href: `${dir}/apple-touch-icon.png` },
      { rel: 'apple-touch-icon', type: 'image/x-icon',sizes:"57x57", href: `${dir}/apple-touch-icon.png` },
      { rel: 'apple-touch-icon', type: 'image/x-icon',sizes:"60x60", href: `${dir}/apple-touch-icon.png` },
      { rel: 'apple-touch-icon', type: 'image/x-icon',sizes:"72x72", href: `${dir}/apple-touch-icon.png` },
      { rel: 'apple-touch-icon', type: 'image/x-icon',sizes:"76x76", href: `${dir}/apple-touch-icon.png` },
      { rel: 'apple-touch-icon', type: 'image/x-icon',sizes:"114x114", href: `${dir}/apple-touch-icon.png` },
      { rel: 'apple-touch-icon', type: 'image/x-icon',sizes:"120x120", href: `${dir}/apple-touch-icon.png` },
      { rel: 'apple-touch-icon', type: 'image/x-icon',sizes:"144x144", href: `${dir}/apple-touch-icon.png` },
      { rel: 'apple-touch-icon', type: 'image/x-icon',sizes:"152x152", href: `${dir}/apple-touch-icon.png` },
      { rel: 'apple-touch-icon', type: 'image/x-icon',sizes:"180x180", href: `${dir}/apple-touch-icon.png` }

    ]
  },
  manifest: {
      name: "test",
      lang: 'ja',
      'display':'fullscreen',
      title:'test',
      'og:title':'test',
      description:'test',
      'og:description':'test',
      theme_color:'#FFFFFF',
      background_color:'#FFFFFF',
      start_url:`${dir}/`,
      short_name:"test",
      icons:[{
        src:`${dir}/icon.png`,
        size:"144x144",
        type:"image/png"
      },{
        src:`${dir}/icon.png`,
        size:"180x180",
        type:"image/png"
      }]
  }
}

Ответы [ 3 ]

0 голосов
/ 20 февраля 2019

Исходя из этого SO post , iOS 11.3 поддерживает манифесты веб-приложений, но пока не поддерживает указание значков таким образом.Вы захотите включить его в манифест для других устройств, но по крайней мере сейчас вам придется использовать следующее для iOS: 

<link rel="apple-touch-icon" sizes="180x180" href="icon.png">

Вы должны указать размер значка и включить URL-адрес.

Пожалуйста, проверьте это Документация Apple .

0 голосов
/ 21 февраля 2019

Я мог бы решить сам, используя PWACompat.

Он работал хорошо, как показано ниже. 

module.exports = {
  mode: 'spa',
  head: {
    title: pkg.name,
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { name: 'apple-mobile-web-app-capable', content: 'yes' },
      { name: 'apple-mobile-web-app-status-bar-style', content:'black'},
      { name: 'apple-mobile-web-app-title', content:"test"},
      { hid: 'description', name: 'description', content: pkg.description }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: `${dir}/favicon.ico` }
    ],
    script:[
      {
      src:"https://cdn.jsdelivr.net/npm/pwacompat@2.0.6/pwacompat.min.js",
        integrity:"sha384-GOaSLecPIMCJksN83HLuYf9FToOiQ2Df0+0ntv7ey8zjUHESXhthwvq9hXAZTifA",
        crossorigin:"anonymous" ,defer:true
      }
    ]
  },
  manifest: {
      name: "test",
      lang: 'ja',
      // 'display':'standalone',
      title:'test',
      'og:title':'test',
      description:'test',
      'og:description':'test',
      theme_color:'#FFFFFF',
      background_color:'#FFFFFF',
      start_url:`${dir}/`,
      short_name:"test",
      icons:[{
        src:`${dir}/icon.png`,
        size:"144x144",
        type:"image/png"
      },{
        src:`${dir}/apple-touch-icon.png`,
        size:"128x128",
        type:"image/png"
      },{
        src:`${dir}/apple-touch-icon.png`,
        size:"152x152",
        type:"image/png"
      },{
        src:`${dir}/apple-touch-icon.png`,
        size:"180x180",
        type:"image/png"
      },{
        src:`${dir}/apple-touch-icon.png`,
        size:"192x192",
        type:"image/png"
      },{
        src:`${dir}/apple-touch-icon.png`,
        size:"256x256",
        type:"image/png"
      }
    ]
  }
}

Спасибо за просмотр и ответ! :)) 1010 *

0 голосов
/ 20 февраля 2019

Вы можете просто добавить свой файл в папку static nuxt (static)

и загрузить все свои файлы просто из корневого пути. 

      <!-- Static image from static directory -->
      <img src="/my-image.png"/>

См. Документы =>

https://nuxtjs.org/guide/assets/.

Спасибо

...