Application)開発が一般的になりつつありますが、本記事ではPWA/Universal対応されたSPAがどう動くのかについて整理してみました。Googleから発表されたテクノロジーで、3つの特徴が挙げられています。Workerのバックグラウンド同期によってWebアプリをキャッシュし、オフラインでも利用可能にする早い(Fast):起動や挙動も速く、ユーザー体験を阻害しないつながり(Engaging):PWAはアプリストアを経由せずにインストールが可能で、ホーム画面上にアイコンとして配置できる。Workerのプッシュ通知機能で直接、ユーザーに通知することができます。ユースケースはこうです。「ブラウザを起動し、ググって、ウェブサイトにアクセスする」と、PWAで作られたサイトが出てきます。そこで表示される「ホーム画面に追加」を押すとアイコンがホーム画面に配置されます。これで次回からは「アイコンを起動」するだけでフルスクリーンでサイトが起動するようになります。アイコンになればプッシュ通知も可能なので、通知メールなどを介さずに直接やり取りをすることも可能です。左:Instagramにブラウザでアクセスすると「ホーム画面に追加」が表示される中:アイコンとして登録される。左隣はネイティブアプリのアイコン右:ネイティブアプリと似た画面。機能的には劣る部分もある従来、モバイルアプリを使ってもらうには「ウェブサイトでアプリストアへのリンクをクリック」「アプリストアでインストール」ということが必要です。PWAにすればアプリストアを介することなくWebサイトからスムーズにアイコン化することができ、ユーザー体験の向上が期待できます。SPAはネイティブアプリに比べて限界がありますが、ギャップが小さくなってきており、ある程度のサイトであればPWAだけで十分対応できそうです。Push通知などの一部の機能が動かないため「PWAだけ」という判断はしにくい状況です。これはAppleが「アプリストアを経由しない(ので、統制も効かず、手数料も取れない)」という特徴を嫌がっているからだ、と言われています。iOSが対応するか、というのが今後のPWAの運命を決めそうですが、一方で、世の中の流れはPWAになってきており、あとはAppleが対応するだけ、とも見れます。JavaScriptそんなSPAですが課題もあります。それはSEOが苦手、という点です。SPAではHTMLがブラウザ内部でしかレンダリングされません。サーチエンジンのクローラーはサーバにアクセスしてHTMLを解析します[1]。サーバ側にクローラーが読み込めんでインデクシングできるHTMLが存在しないのです。サーチエンジンに引っかからなければサイトにたどり着けませんから、PWAのメリットも意味が無くなります。そこで「クローラーに食わせるためのページをサーバーサイドで生成する」ことが必要です。いえ、SPAとは別にサーバサイドのアプリケーションを開発しては本末転倒です。JavaScript」です。JavaScript)。「SPAをサーバサイドでも動かして、ブラウザ内部でレンダリングが完了されたものと同じHTMLを出力」して、それをクローラーに食わせればいい。そのサーバサイドで出力されたHTMLをブラウザがロードすれば、ブラウザにSPAをロードすることなく初期表示が可能になります。UniversalにはPWA対応SPAの課題であったSEO対策に対応するとともに、Webアプリのロードを不要に初期表示を高速化させる効果があります。JavaScriptを組み合わせる場合の挙動について理解するために、単純なコンテンツ表示アプリを想定します。このWebアプリはBlogのように記事を表示するページを提供します。記事のページは、指定されたコンテンツIDを使ってコンテンツAPIから記事のタイトルや本文を取得し、テンプレートに埋め込んで記事が含まれたHTMLをレンダリングします。アプリケーションがデプロイされた状態から、1初回アクセスがあります。レンダリングサーバは、デプロイされたWebアプリコードをロードし、サーバ側で起動します。WebアプリはコンテンツAPIを叩いて記事を取得し、記事ページをレンダリングします。レンダリングサーバは、その結果を返却します。この際、アクセス元がクローラーであればサーチエンジンにインデクシングされることになります。Wokerが動き、Webアプリのコードを取得するリクエストを発行し、ブラウザ内でキャッシュします。この場合、レンダリングサーバは単純にリソースとしてのWebアプリコードを返却するだけです。Workerにキャッシュされたアプリコードを利用してWebアプリを起動します。WebアプリはコンテンツAPIを叩いて記事を取得し、記事ページをレンダリングします。した作りによるメリットは次の通りです。Workerが非同期にキャッシュしておいたWebアプリを起動するため、今回もロードコストをかけることなく初期表示が可能SEO対策ができたSPAが単一コードで実現Universalによるサーバサイドレンダリングと、PWAによるクライアントサイドキャッシュを有効に活用することで、単一コードでユーザー体験を向上させているのです。Universal対応するには制約もあります。当然ですが「クライアントとサーバで同じコードが動く」という点です。わかりやすいのはサーバ側で以下のようなコードは動きません。多くのSPAフレームワークでは上記に依存しないテンプレートエンジンが用意されているため問題は起きにくいはずです。jQueryなどを使うと制約にひっかかることになります。UniversalUniversalはアイデアとして素晴らしいですが、実現する仕組みは複雑になるため、専用ライブラリを使うことが推奨されます。Universalを活用しています。Woker対応ができます。Universalはサーバサイドとクライアントサイドの仕組みを提供しています。クライアントサイドは、サーバサイドでレンダリングされたHTMLからAngular本体への切り替えがスムーズに行うための仕組みが用意されています。Universalで作られています。次の記事では、その中身を紹介したいと思います。Googleは「クローラーはJavaScriptを解析する」としているが、レンダリング中に処理が完了しない場合、検索結果にネガティブな影響が出るとしているため、自サイト内でのサーバサイドレンダリングが必要になる。#pmconfjpブログ・お知らせINDEXSHARESHARERECRUIT一緒にチャレンジしませんか?CONTACTお気軽にお問い合わせください。application.。