Je développe une application PWA à l'aide de NUXT.J. Je pourrais bien le lancer, alors j'ai essayé d'ajouter un écran d'accueil et un signet par Safari (iOS11.4). Cependant, l'icône n'était pas indiquée sur l'écran d'accueil et le signet. (Google Chrome et Android Travail bien)
NUXT.CONFIG.JS est ci-dessous P>
p>
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 Réponses :
Vous pouvez simplement ajouter votre fichier dans le dossier STATIC NUXT (statique)
une chargement tout votre fichier simplement du chemin racine. P>
<!-- Static image from static directory -->
<img src="/my-image.png"/>
Salut Birante. Merci de commenter et désolé pour que je ne vous ai pas informé de quoi mon dossier statique se passe. Je suis prêt dans le dossier statique comme ci-dessous. /Static/favicon.ico /static/apple-touch-icon.png Cependant, il n'a pas encore fonctionné ..
Basé à partir de ce So Post , iOS 11.3 Soutenir l'application Web manifeste, il ne supporte pas encore la spécification des icônes de cette façon. Vous voudrez l'inclure dans votre manifeste pour d'autres appareils, mais au moins pour l'instant, vous devrez utiliser ce qui suit pour iOS: Vous devez spécifier la taille de l'icône et inclure une URL. Vérifiez que Documentation Apple .
Salut Jess, merci de commenter. J'ai essayé ça, mais ça n'a pas fonctionné malheureusement. icon.png Ce que je prépare et stocke dans le dossier statique doit être de taille 180x180? J'ai stocké icon.png (taille: 192x192) puis j'ai écrit ci-dessous, mais cela n'a pas bien fonctionné. Lien: [{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 -Con ", href: $ {dir} /apple-touch-icon.png tailles:" 180x180 "}]
Je pourrais résoudre moi-même à l'aide de Pwacompat.
Cela a bien fonctionné comme ci-dessous. p>
p>
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"
}
]
}
}