AMP Service WorkerでPrefetch Linksを実現する
更新日:2022.09.04
作成日: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-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'>
が追加されるかどうかが変わることを確認した。
参考
Related contents
![Eyecatch](https://res.cloudinary.com/meganii/image/upload/f_auto,q_auto/v1594903789/sislab_hugo_j8ykf6.png)
TECH
2020.11.01
HugoでTailwindCSSを利用しAMP Validなページを生成する
![Eyecatch](https://res.cloudinary.com/meganii/image/upload/f_auto,q_auto/v1594903789/sislab_hugo_j8ykf6.png)
TECH
2020.02.02
HugoでAMP対応のブログカードを作る
![Eyecatch](https://res.cloudinary.com/meganii/image/upload/c_scale,f_auto,q_auto/v1594902885/tech_ben4sq.png)
TECH
2019.10.11
AMPページの最適化〜ぼくのAMPサイトがこんなに遅い訳がない〜
![Eyecatch](https://res.cloudinary.com/meganii/image/upload/c_scale,f_auto,q_auto/v1594902885/tech_ben4sq.png)
TECH
2019.10.06
AMP向けのミニマルCSSフレームワーク「1BX」をHugoに導入した
![Eyecatch](https://res.cloudinary.com/meganii/image/upload/f_auto,q_auto/v1594903789/sislab_hugo_j8ykf6.png)
TECH
2022.09.03
【Hugo】Render Hooks for Code Blocksを利用してコードブロックにファイル名を表示する
![Eyecatch](https://res.cloudinary.com/meganii/image/upload/f_auto,q_auto/v1594903789/sislab_hugo_j8ykf6.png)
TECH
2022.08.29
Hugoでブログカードを作成する(resources.GetRemote利用)
![Eyecatch](https://res.cloudinary.com/meganii/image/upload/c_scale,f_auto,q_auto/v1594902885/tech_ben4sq.png)
TECH
2022.08.14
GitHub PagesからCloudflare Pagesへの移行
![Eyecatch](https://res.cloudinary.com/meganii/image/upload/v1642307559/amp-hatenastar_fef0zp.png)
TECH
2022.01.15
はてなスターをAMPページで利用する