일본어 웹 글꼴 읽기 속도 향상 - 셋째

일본어 웹 글꼴 읽기 속도 향상 - 둘째의 계속.
지난번 모방Google Fonts의 구조는 임의의 일본어 글씨체font-ranger를 120개로 나누어 자집화했다.
이번에는 더욱 고속화를 추구하기 위해 서비스 워커를 사용하여 지난번 서브집합화된 웹 글꼴을 캐시해 보았다.
샘플 코드
https://github.com/megurock/webfont-optimization/tree/precache
Workbox
현금통제의 관건ServiceWorker이 되어 주위Workbox로 가볍게 끝냅니다.
sw-tmpl.js

importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.6.1/workbox-sw.js')

현금 전략
Workbox에서 현금 전략 모델총 5가지 방법이 준비되어 있습니다.으로 한다.워크박스의 홈페이지에Google Fonts 샘플가 있기 때문에@font-face를 정의한/css/fonts.css에서StaleWhileRevalidate를 글꼴 파일CacheFirst에 적용한다.
sw-tmpl.js

// Cache font stylesheet
workbox.routing.registerRoute(
  '/css/fonts.css',
  workbox.strategies.staleWhileRevalidate({
    cacheName: 'font-stylesheets',
  })
)

// Cache font files
workbox.routing.registerRoute(
  /.*\.woff2?$/,
  workbox.strategies.cacheFirst({
    cacheName: 'web-fonts',
  })
)

각자의 현금 전략 모델에 대해서는 이 페이지에 설명이 있다.
글꼴 파일 미리 캐시
120개의 글꼴 파일을 미리 캐시해 두었는지 잘 모르겠지만, 한번 해 보고 싶어서 했습니다. 다음 절차를 생략하더라도 글꼴 파일은 요청될 때 캐시에 들어가야 하지만 이번에는 브라우저 군이 더 주동적으로 미리 캐시를 하기로 했습니다.
워크박스-build 수정 관리 사용하기
미리 캐시할 파일은 각 파일의 개정판에서 업데이트 관리됩니다.수동으로 수정판 관리를 하는 것은 간단하지만 워크박스에는 자동화 도구가 있다.이번에 workbox-build라는 노드 모듈을 사용했다.
우선 적당한 서류에 이런 기술을 먼저 쓰세요.
sw-tmpl.js

/** 「キャッシュ戦略」からの続きです。**/

// Precache font files (.woff and woff2)
workbox.precaching.precacheAndRoute([]);

다음 절차를 수행합니다.
build-wb.js

const workboxBuild = require('workbox-build')

// NOTE: This should be run *AFTER* all your assets are built
const buildSW = () => {
  // This will return a Promise
  return workboxBuild.injectManifest({
    swSrc: './sw-tmpl.js',  // 元ファイルを指定
    swDest: './sw.js',      // ビルドファイルを指定
    globDirectory: './',    // プリキャッシュ対象ディレクトリを指定
    globPatterns: [         // プリキャッシュ対象ファイルを指定
      '**\/*.{woff,woff2}',
    ]
  }).then(({count, size, warnings}) => {
    // Optionally, log any warnings and details.
    warnings.forEach(console.warn)
    console.log(`${count} files will be precached, totaling ${size} bytes.`)
  });
}

buildSW()

그런 다음 미리 캐시된 객체의 파일을 개정과 함께 씁니다.(데이터가 변경되면 개정을 변경할 수 있음)
sw.js

/** 省略 **/

// Precache font files (.woff and woff2)
workbox.precaching.precacheAndRoute([
{
  "url": "fonts/shirokuma.0.custom-subset.woff2",
  "revision": "57ed11f4f7ecd4c36d1f4e424943cd8d"
},
{
  "url": "fonts/shirokuma.1.custom-subset.woff2",
  "revision": "57ed11f4f7ecd4c36d1f4e424943cd8d"
},
// 以下省略
])

Service Worker 등록
마지막으로 만들어진 sw.js를 HTML로 읽으면 완성됩니다!
index.html

<script>
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js');
  })
}
</script>