Google Developers Japan: Shadow Reader の改善版

Local blog for Japanese speaking developers

Shadow Reader の改善版

2018年7月17日火曜日

この記事はデベロッパーアドボケート、Ben Morss による Accelerated Mobile Pages Project の記事 "The Shadow Reader, Improved" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。Shadow ReaderShadow Reader発表時の投稿The Guardian JS で生成されるコンテンツの SEOApp Shell多くの検索エンジンでは JavaScript は実行されないか、確実に実行されるという保証はありません AMP⇒PWA新規ユーザーに対しては :

新規ユーザーが記事ページにアクセスしたときに、AMP 版のページを返します。

AMP は、<amp-install-serviceworker> を使って Service Worker を読み込み、インストールします。

Service Worker は App Shell を読み込み、キャッシュします。

以降、画面遷移が発生する際には、Service Worker がすべてを制御することとなります。次ページ遷移時には App Shell を利用して PWA に移り変わるというわけです。

既存のユーザーに対しては : https://amp.cards/theguardian/us/amazing_article Workbox ライブラリworkboxSW.router.registerNavigationRoute('index.html')https://amp.cards/theguardian/us/another_article

新規ユーザーに対しては :

ブラウザが、サーバーに対して記事の URL をリクエストします。サーバーは、<amp-install-serviceworker> を含む AMP 版の記事を返します。

<amp-install-serviceworker> は、Service Worker JS をサーバーにリクエストします。サーバーは、ブラウザに Service Worker JS を返します。ブラウザは、Service Worker をインストールして起動します。

Service Worker は、インストール時に PWA App Shell をサーバーにリクエストします。サーバーは、リクエストされたリソースを Service Worker に返し、Service Worker はそれをキャッシュします。

既存ユーザーに対しては :

ブラウザが、記事の URL をリクエストします。このリクエストを、Service Worker がインターセプトします。Service Worker は、キャッシュされている PWA をブラウザに返します。

PWA が AMP 記事をリクエストします。サーバーは AMP 記事を PWA に返します。PWA が処理し、記事を表示します。

次のステップ

YQL ではなく、直接 Guardian の RSS フィードを利用する。

新規ユーザーに対して AMP ページを返す際に、トップナビゲーションリンクを Shadow Reader のリンクに変更する。

AMP Cache から配信されたことを考慮して、<amp-install-serviceworker data-iframe-src=”https://amp.cards/index.html“> と指定して Service Worker のインストールを実施しているが、今の実装だと Shadow Reader そのものをすべて読み込むようになっているので、もう少し軽量な Service Worker だけをインストールする HTML を指定するように変更する。

Backend.js は独自の実装でサーバーサイドでもフロントエンドでも動作するように作られているが、今後はリファクタリングも兼ねて ECMAScript モジュールで読み込ませるようにする。

Github のコードをチェックYusuke Utsunomiya - Mobile Solution Consultant, gTech

ラベル

ブログアーカイブ

2024
- 11月
- 10月
- 9月
- 8月
- 7月
- 6月
- 5月
- 4月
- 3月
- 2月
- 1月

2023
- 12月
- 11月
- 10月
- 9月
- 8月
- 7月
- 6月
- 5月
- 4月
- 3月
- 2月
- 1月

2022
- 12月
- 11月
- 10月
- 9月
- 8月
- 7月
- 6月
- 5月
- 4月
- 3月
- 2月
- 1月

2021
- 12月
- 11月
- 10月
- 9月
- 8月
- 7月
- 6月
- 5月
- 4月
- 3月
- 2月
- 1月

2020
- 12月
- 11月
- 10月
- 9月
- 8月
- 7月
- 6月
- 5月
- 4月
- 3月
- 2月
- 1月

2019
- 12月
- 11月
- 10月
- 9月
- 8月
- 7月
- 6月
- 5月
- 4月
- 3月
- 2月
- 1月

2018
- 12月
- 11月
- 10月
- 9月
- 8月
- 7月
- 6月
- 5月
- 4月
- 3月
- 2月
- 1月

2017
- 12月
- 11月
- 10月
- 9月
- 8月
- 7月
- 6月
- 5月
- 4月
- 3月
- 2月
- 1月

2016
- 12月
- 11月
- 10月
- 9月
- 8月
- 7月
- 6月
- 5月
- 4月
- 3月
- 2月
- 1月

2015
- 12月
- 11月
- 10月
- 9月
- 8月
- 7月
- 6月
- 5月
- 4月
- 3月
- 2月

2014
- 12月
- 11月
- 10月
- 9月
- 8月
- 7月
- 6月
- 5月
- 4月
- 3月
- 2月
- 1月

2013
- 12月
- 11月
- 10月
- 9月
- 8月
- 7月
- 6月
- 5月
- 4月
- 3月
- 2月
- 1月

2012
- 12月
- 11月
- 10月
- 9月
- 8月
- 7月
- 6月
- 5月
- 4月
- 3月
- 2月
- 1月

2011
- 12月
- 11月
- 10月
- 9月
- 8月
- 7月
- 6月
- 5月
- 4月
- 3月
- 2月
- 1月

2010
- 12月
- 11月

Feed

"プロダクトに関するご意見はプロダクトフォーラムにお願いします"

Google
Privacy
Terms