AMPの楽しみな新機能2つ――amp-next-page と One-line PWA

[レベル: 上級]

AMP の開発状況を示すロードマップの現状を紹介する記事を AMP プロジェクトの公式ブログが投稿しました。

正式リリースされた機能と開発中の機能、取り組みが始まったばかりの機能が数多く紹介されています。
個人的に気になった機能を2つ、この記事で取り上げます。

amp-next-page

amp-next-page は AMP ページで無限スクロールを実装するコンポーネントです。
ページの下までスクロールすると追加のコンテンツが自動で読み込まれます。
EC サイトの商品リストページや、ソーシャルメディアのタイムライン、長いブログ記事などでおなじみの UI ですね。

無限スクロールが AMP ページでも利用できるようになります。
一般的に、AMP ページでは、内部リンクをたどった場合は AMP ページではなく通常のモバイルページに移動します。
amp-next-page を構成すれば、一連のコンテンツをすべて高速な AMP で表示できるでしょう。

amp-next-page は Experimental(試験運用)の段階で、すでに実装可能です(実装するには、試験設定を有効にする必要あり)。

amp-next-page の詳細はドキュメントを参照してください。

One-line PWA

現在、PWA ではさまざまな機能を実装できます。
技術的にシンプルなものあれば、実装に高度なスキルが必要な複雑なものまでさまざまなです。

限られた機能になりますが、One-line PWA は1行のコードを追加するだけで、AMP ページで PWA を実装できます。

One-line PWA で有効にできる PWA として今のところは、次のようなものが提案されています。

  • キャッシュからオリジンサイト(元のサイト)にある Service Worker の取得
  • SPA の体験の提供(サイト内で共通のコンポーネントをページ移動した場合でも再読込みせずに高速表示)
  • AMP JS の Stale-while-revalidate モデル採用(更新されていた場合のみ取得)
  • 重要なパスのプリフェッチ

加えて、ホーム画面アイコン追加の機能も検討されています。

限られた機能とはいえ、どれも PWA を代表する機能です。
AMP で PWA がたった1行のコードで実装できたら嬉しいですね。

One-line PWA はまだ提案されたばかりのコンポーネントです。
2018 年の第3四半期に技術的な仕様を公開することを目標にしているとのことです。

この記事で紹介した amp-next-page と One-line PWA のほかにも、AMP のたくさんの新しい機能をロードマップで知ることができます。
AMP 頑張ってる人はチェックしてみてください。