1. SIS Lab
  2. >
  3. Blog
  4. >
  5. AMP Service WorkerでPrefetch Linksを実現する

AMP Service WorkerでPrefetch Linksを実現する

更新日:2022.06.29 作成日:2022.06.29

AMP Service Workerを使うと、簡単にServiceWorkerを導入できる。 このブログでも利用しているが、1つうまく動かないモジュールがあった。 それは、Prefetch Linksの機能だ。

ドキュメントどおりに設定してもうまく動かなかったが、「amp-install-serviceworkerにdata-prefetch属性を付ける」というのがポイントだったので、メモとして残しておく。

設定方法

  • amp-swの初期化時にlinkPrefetchOptionsを指定する
importScripts('https://cdn.ampproject.org/sw/amp-sw.js');
AMP_SW.init({
    linkPrefetchOptions: {} // config options here
})
  • aタグにdata-rel="prefetch"属性を付ける
<a href='/' data-rel='prefetch'>
  • amp-install-serviceworkerdata-prefetch属性を付ける
<amp-install-serviceworker
    src="{{ .Site.BaseURL }}sw.js"
    data-iframe-src="{{ .Site.BaseURL }}install-sw.html"
    data-prefetch
    layout="nodisplay">
</amp-install-serviceworker>

はじめは、ドキュメントに記載があるとおり次の2つを実施したが、prefetchは行われなかった。

  • amp-swの初期化時にlinkPrefetchOptionsを指定
  • amp-install-serviceworkerdata-prefetch属性を付加

amp-install-serviceworker.jsの動きを見ていると、<amp-install-serviceworker>Elementにdata-prefetch属性を持つかどうかの判定がある。 data-prefetch属性の有無で、<head>タグに<link rel='prefetch'>が追加されるかどうかが変わることを確認した。

参考

B! Pocket

Related contents

TECH

2020.11.01

HugoでTailwindCSSを利用しAMP Validなページを生成する

TECH

2020.02.02

HugoでAMP対応のブログカードを作る

TECH

2019.10.11

AMPページの最適化〜ぼくのAMPサイトがこんなに遅い訳がない〜

TECH

2019.10.06

AMP向けのミニマルCSSフレームワーク「1BX」をHugoに導入した

TECH

2022.01.15

はてなスターをAMPページで利用する

TECH

2021.02.11

Git pre-commitフックでFrontmatterの「更新日時」を自動更新する

TECH

2021.01.24

「Hugoで始める静的サイト構築入門 静的サイトジェネレーターで作る自作サイト」を出版しました

TECH

2021.01.09

GitHub Actionsのスケジューラ実行を利用して定期的にビルドする