AMP Service WorkerでPrefetch Linksを実現する
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-serviceworkerにdata-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-serviceworkerにdata-prefetch属性を付加
amp-install-serviceworker.jsの動きを見ていると、<amp-install-serviceworker>Elementにdata-prefetch属性を持つかどうかの判定がある。
data-prefetch属性の有無で、<head>タグに<link rel='prefetch'>が追加されるかどうかが変わることを確認した。
