使用 Nuxt 2.15.3、Tailwind 和 Pwa 模块首次访问时不会加载 Safari 本地字体
Safari local fonts do not load on first visit with Nuxt 2.15.3, Tailwind and Pwa Module
我创建了一个 nuxt pwa 应用程序，www.shirime.one，它运行良好，
但我的 Safari 移动版有问题，自定义字体未加载。
当 PWA 在 IOS 上安装了 safari 时，如果我将设备连接到我的 macbook，我看不到字体文件夹。如果我从 safari 检查器刷新 PWA 就可以了。当 PWA 在 IOS 上安装了 safari 时，Nuxt PWA 模块似乎无法加载字体文件夹。不知道为什么。
我的 nuxt pwa 配置：
pwa: {
icon: {
fileName: 'app-icon.png',
},
meta: {
name: 'Shirime Challenge',
mobileApp: true,
mobileAppIOS: true,
description: false,
lang: false,
theme_color: '#000000',
ogHost: 'https://shirime.one',
twitterCard: 'summary',
twitterSite: '@jbty_dev',
twitterCreator: '@jbty_dev',
},
},
我的字体：
@font-face {
font-family: 'Nouveau';
src: url('~/assets/fonts/NouveauRegular.eot');
font-weight: 100;
font-style: normal;
}
@font-face {
font-family: 'Nouveau';
src: local('Nouveau Regular'), local('NouveauRegular'),
url('~/assets/fonts/NouveauRegular.woff2') format('woff2'),
url('~/assets/fonts/NouveauRegular.woff') format('woff'),
url('~/assets/fonts/NouveauRegular.ttf') format('truetype'),
url('~/assets/fonts/NouveauRegular.svg#NouveauRegular') format('svg');
font-weight: 100;
font-style: normal;
font-display: swap;
我的顺风配置：
import plugin from 'tailwindcss/plugin'
module.exports = {
purge: [
'./components/**/*.{vue,js}',
'./layouts/**/*.vue',
'./pages/**/*.vue',
'./plugins/**/*.{js,ts}',
'./nuxt.config.{js,ts}',
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
fontFamily: {
heading: ['Nouveau', 'sans-serif'],
body: ['Futura CondensedLight', 'sans-serif'],
incantation: ['Stranger back in the Night', 'sans-serif'],
},
colors: {
red: '#FF0000',
redAccent: '#ff1414',
red40: 'rgba(255,0,0,0.4)',
black: '#000000',
black92: 'rgba(0,0,0,0.92)',
white: '#ffffff',
white40: 'rgba(255,255,255,0.4)',
},
fontSize: {
xs: '.82rem',
sm: '.95rem',
tiny: '.875rem',
base: '1rem',
lg: '1.125rem',
xl: '1.25rem',
'2xl': '1.5rem',
'3xl': '2.2rem',
'4xl': '2.9rem',
'5xl': '3.3rem',
'6xl': '3.8rem',
'7xl': '6rem',
'8xl': '11rem',
},
},
},
variants: {
extend: {},
},
plugins: [
plugin(function ({ addUtilities }) {
const newUtilities = {
'.no-text-shadow': {
textShadow: 'none',
},
'.red-text-shadow': {
textShadow: '0px 0px 10px rgba(255,0,0,0.2)',
},
'.red-text-shadow-big': {
textShadow: '0px 0px 15px rgba(255,0,0,0.6)',
},
'.white-text-shadow': {
textShadow: '0px 0px 10px rgba(255,255,255,0.4)',
},
'.red-box-b-shadow': {
boxShadow: '0 18px 10px -10px rgba(255,0,0,0.2)',
},
'.white-box-b-shadow': {
boxShadow: '0 18px 10px -10px rgba(255,255,255,0.2)',
},
'.backdrop-blur': {
backdropFilter: 'blur(2px)',
},
}
addUtilities(newUtilities)
}),
],
}
我的package.json
{
"name": "shirime",
"author": {
"name": "Thery Jean-Baptiste",
"email": "jb.thery@flameapp.fr",
"url": "https://flameapp.fr"
},
"description": "Shirime Challenge - www.shirime.one digital ouija, make your friends believe that you speak with an all-knowing mind! Progressive Web App available for installation on Ios, Android, Windows, Mac Os and Linux.",
"version": "1.1.0",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt generate",
"start": "nuxt start",
"lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore .",
"lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
"lint:style": "stylelint **/*.{vue,css} --ignore-path .gitignore",
"lint": "npm run lint:js && npm run lint:style",
"test": "jest"
},
"lint-staged": {
"*.{js,vue}": "eslint",
"*.{css,vue}": "stylelint"
},
"husky": {
"hooks": {
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
"pre-commit": "lint-staged"
}
},
"dependencies": {
"@nuxtjs/amp": "^0.5.4",
"@nuxtjs/google-adsense": "^1.3.0",
"@nuxtjs/pwa": "^3.3.5",
"@nuxtjs/sitemap": "^2.4.0",
"cookie-universal-nuxt": "^2.1.4",
"core-js": "^3.9.1",
"nuxt": "^2.15.3",
"nuxt-i18n": "^6.21.1",
"nuxt-lazy-load": "^1.2.5",
"vue-social-sharing": "^3.0.5"
},
"devDependencies": {
"@commitlint/cli": "^12.0.1",
"@commitlint/config-conventional": "^12.0.1",
"@nuxt/types": "~2.15.3",
"@nuxtjs/eslint-config": "^6.0.0",
"@nuxtjs/eslint-module": "^3.0.2",
"@nuxtjs/stylelint-module": "^4.0.0",
"@nuxtjs/tailwindcss": "^4.0.1",
"@tailwindcss/postcss7-compat": "^2.0.3",
"autoprefixer": "^10.2.5",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "^10.1.0",
"babel-jest": "^26.6.3",
"eslint": "^7.22.0",
"eslint-config-prettier": "^7.2.0",
"eslint-plugin-nuxt": "^2.0.0",
"eslint-plugin-prettier": "^3.3.1",
"fibers": "^5.0.0",
"husky": "4.3.8",
"lint-staged": "^10.5.4",
"postcss": "^8.2.8",
"prettier": "^2.2.1",
"stylelint": "^13.12.0",
"stylelint-config-prettier": "^8.0.2",
"stylelint-config-standard": "^21.0.0",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.3"
}
}
我通过创建一个在新 pwa 版本发布时重新加载页面的插件解决了这个问题
插件文件夹
export default async () => {
const workbox = await window.$workbox
if (!workbox) {
console.debug("Workbox couldn't be loaded.")
return
}
workbox.addEventListener('installed', (event) => {
if (!event.isUpdate) {
console.debug('The PWA is on the latest version.')
return
}
console.debug('There is an update for the PWA, reloading...')
window.location.reload()
})
}
Nuxt 配置
plugins: [
{ src: '~/plugins/pwa-update.js', mode: 'client' },
],
祝你有愉快的一天
我创建了一个 nuxt pwa 应用程序，www.shirime.one，它运行良好， 但我的 Safari 移动版有问题，自定义字体未加载。
当 PWA 在 IOS 上安装了 safari 时，如果我将设备连接到我的 macbook，我看不到字体文件夹。如果我从 safari 检查器刷新 PWA 就可以了。当 PWA 在 IOS 上安装了 safari 时，Nuxt PWA 模块似乎无法加载字体文件夹。不知道为什么。
我的 nuxt pwa 配置：
pwa: {
icon: {
fileName: 'app-icon.png',
},
meta: {
name: 'Shirime Challenge',
mobileApp: true,
mobileAppIOS: true,
description: false,
lang: false,
theme_color: '#000000',
ogHost: 'https://shirime.one',
twitterCard: 'summary',
twitterSite: '@jbty_dev',
twitterCreator: '@jbty_dev',
},
},
我的字体：
@font-face {
font-family: 'Nouveau';
src: url('~/assets/fonts/NouveauRegular.eot');
font-weight: 100;
font-style: normal;
}
@font-face {
font-family: 'Nouveau';
src: local('Nouveau Regular'), local('NouveauRegular'),
url('~/assets/fonts/NouveauRegular.woff2') format('woff2'),
url('~/assets/fonts/NouveauRegular.woff') format('woff'),
url('~/assets/fonts/NouveauRegular.ttf') format('truetype'),
url('~/assets/fonts/NouveauRegular.svg#NouveauRegular') format('svg');
font-weight: 100;
font-style: normal;
font-display: swap;
我的顺风配置：
import plugin from 'tailwindcss/plugin'
module.exports = {
purge: [
'./components/**/*.{vue,js}',
'./layouts/**/*.vue',
'./pages/**/*.vue',
'./plugins/**/*.{js,ts}',
'./nuxt.config.{js,ts}',
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
fontFamily: {
heading: ['Nouveau', 'sans-serif'],
body: ['Futura CondensedLight', 'sans-serif'],
incantation: ['Stranger back in the Night', 'sans-serif'],
},
colors: {
red: '#FF0000',
redAccent: '#ff1414',
red40: 'rgba(255,0,0,0.4)',
black: '#000000',
black92: 'rgba(0,0,0,0.92)',
white: '#ffffff',
white40: 'rgba(255,255,255,0.4)',
},
fontSize: {
xs: '.82rem',
sm: '.95rem',
tiny: '.875rem',
base: '1rem',
lg: '1.125rem',
xl: '1.25rem',
'2xl': '1.5rem',
'3xl': '2.2rem',
'4xl': '2.9rem',
'5xl': '3.3rem',
'6xl': '3.8rem',
'7xl': '6rem',
'8xl': '11rem',
},
},
},
variants: {
extend: {},
},
plugins: [
plugin(function ({ addUtilities }) {
const newUtilities = {
'.no-text-shadow': {
textShadow: 'none',
},
'.red-text-shadow': {
textShadow: '0px 0px 10px rgba(255,0,0,0.2)',
},
'.red-text-shadow-big': {
textShadow: '0px 0px 15px rgba(255,0,0,0.6)',
},
'.white-text-shadow': {
textShadow: '0px 0px 10px rgba(255,255,255,0.4)',
},
'.red-box-b-shadow': {
boxShadow: '0 18px 10px -10px rgba(255,0,0,0.2)',
},
'.white-box-b-shadow': {
boxShadow: '0 18px 10px -10px rgba(255,255,255,0.2)',
},
'.backdrop-blur': {
backdropFilter: 'blur(2px)',
},
}
addUtilities(newUtilities)
}),
],
}
我的package.json
{
"name": "shirime",
"author": {
"name": "Thery Jean-Baptiste",
"email": "jb.thery@flameapp.fr",
"url": "https://flameapp.fr"
},
"description": "Shirime Challenge - www.shirime.one digital ouija, make your friends believe that you speak with an all-knowing mind! Progressive Web App available for installation on Ios, Android, Windows, Mac Os and Linux.",
"version": "1.1.0",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt generate",
"start": "nuxt start",
"lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore .",
"lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
"lint:style": "stylelint **/*.{vue,css} --ignore-path .gitignore",
"lint": "npm run lint:js && npm run lint:style",
"test": "jest"
},
"lint-staged": {
"*.{js,vue}": "eslint",
"*.{css,vue}": "stylelint"
},
"husky": {
"hooks": {
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
"pre-commit": "lint-staged"
}
},
"dependencies": {
"@nuxtjs/amp": "^0.5.4",
"@nuxtjs/google-adsense": "^1.3.0",
"@nuxtjs/pwa": "^3.3.5",
"@nuxtjs/sitemap": "^2.4.0",
"cookie-universal-nuxt": "^2.1.4",
"core-js": "^3.9.1",
"nuxt": "^2.15.3",
"nuxt-i18n": "^6.21.1",
"nuxt-lazy-load": "^1.2.5",
"vue-social-sharing": "^3.0.5"
},
"devDependencies": {
"@commitlint/cli": "^12.0.1",
"@commitlint/config-conventional": "^12.0.1",
"@nuxt/types": "~2.15.3",
"@nuxtjs/eslint-config": "^6.0.0",
"@nuxtjs/eslint-module": "^3.0.2",
"@nuxtjs/stylelint-module": "^4.0.0",
"@nuxtjs/tailwindcss": "^4.0.1",
"@tailwindcss/postcss7-compat": "^2.0.3",
"autoprefixer": "^10.2.5",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "^10.1.0",
"babel-jest": "^26.6.3",
"eslint": "^7.22.0",
"eslint-config-prettier": "^7.2.0",
"eslint-plugin-nuxt": "^2.0.0",
"eslint-plugin-prettier": "^3.3.1",
"fibers": "^5.0.0",
"husky": "4.3.8",
"lint-staged": "^10.5.4",
"postcss": "^8.2.8",
"prettier": "^2.2.1",
"stylelint": "^13.12.0",
"stylelint-config-prettier": "^8.0.2",
"stylelint-config-standard": "^21.0.0",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.3"
}
}
我通过创建一个在新 pwa 版本发布时重新加载页面的插件解决了这个问题
插件文件夹
export default async () => {
const workbox = await window.$workbox
if (!workbox) {
console.debug("Workbox couldn't be loaded.")
return
}
workbox.addEventListener('installed', (event) => {
if (!event.isUpdate) {
console.debug('The PWA is on the latest version.')
return
}
console.debug('There is an update for the PWA, reloading...')
window.location.reload()
})
}
Nuxt 配置
plugins: [
{ src: '~/plugins/pwa-update.js', mode: 'client' },
],
祝你有愉快的一天