首次访问 Nuxt 2.15.3、Tailwind 和 Pwa 模块时不加载 Safari 本地字体

Posted 2023-03-06

【中文标题】首次访问 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

【发布时间】：2021-06-15 00:58:19

【问题描述】：

我创建了一个 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": "[e-mail]",
    "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"
  

【参考方案1】：

我通过创建一个在新 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' ,
  ],

祝你有美好的一天