Question

我正在使用Nuxt.js开发PWA应用程序。我可以很好地启动它，所以我尝试通过Safari（iOS11.4）添加HomeScreen和Bookmark。但是，主屏幕和书签上未显示图标。（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
  }
}

出了什么问题？有人教我如何解决它：）

P.S。这是静态文件夹目录。

静态 -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"
      }]
  }
}

Answer 1

您只需将文件添加到静态nuxt文件夹（静态）中

只需从根路径加载所有文件。

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

请参阅文档=>

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

谢谢

Answer 2

基于此SO post，iOS 11.3确实支持Web应用程序清单，但尚不支持以这种方式指定图标。您需要将其包含在其他设备的清单中，但至少现在，您必须在iOS设备上使用以下内容：

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

您必须指定图标大小，并包括一个URL。

请检查此Apple documentation。

Answer 3

我可以使用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"
      }
    ]
  }
}

感谢收看和回答！：）

如何使用nuxt.config.js（Safari）在主屏幕上的PWA应用程序上设置图标并添加书签

3 个答案: