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

AMP Service WorkerでPrefetch Linksを実現する

更新日:2022.09.04 作成日:2022.06.29

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

ドキュメントどおりに設定してもうまく動かなかったが、「amp-install-serviceworkerdata-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'>が追加されるかどうかが変わることを確認した。

https://github.com/ampproject/amphtml/blob/0937333cb3f4d1b09bd41f86db565c2dcda7ed3a/extensions/amp-install-serviceworker/0.1/amp-install-serviceworker.js#L349

参考

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.09.03

【Hugo】Render Hooks for Code Blocksを利用してコードブロックにファイル名を表示する

TECH

2022.08.29

Hugoでブログカードを作成する(resources.GetRemote利用)

TECH

2022.08.14

GitHub PagesからCloudflare Pagesへの移行

TECH

2022.01.15

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