【PWA】App Shell
前日の記事「PWAとは」の続きになります。
App Shellとは
App ShellはPWA(Progressive Web App)を構築する際に使われるモデルの一つです。
UI部品のみからなる「シェル」をコンテンツから分離してキャッシュすることで、アプリケーションをオフライン環境下でも快適に動作させることができます。
シェルはHTML、CSS、JavaScriptからなりますが、先述の通りテキストや画像などのデータに該当する部分を含みません。App Shell ではコンテンツのみをネットワーク経由で読み込み、シェルを積極的にキャッシュしていきます。
App Shellの活かしどころ
App Shellモデルが特に力を発揮するのは、SPA(Single Page Application)です。
SPAは一つの画面をサーバから取得したあとは、画面内コンテンツを中心にサーバから取得して画面更新を行うので
App Shell と相性が良く、既存のフレームワークで構築されたSPAやそれに基づくサイトはApp Shellモデルに基づいたアプリケーションやサイトに置き換え可能だと思われます。
現在多くのフロントエンドフレームワークがSPAを採用しているので、App Shellに置き換えられるアプリも多いと考えられます。
SPAを採用するFEフレームワーク
- Angular
- React
- Vue.js
- Ember.js
- Meteor.js
App Shellのメリット
パフォーマンス
初回のアクセスでシェルがキャッシュされるため、再アクセス時にページを即座に読み込めます。またコンテンツに関しても、キャッシュが効く可能性があるので読み込みはさらに高速になります。
ネイティブアプリライクな操作性
オフライン状態でも動作するWebアプリを構築可能なモデルなので、 ネイティブアプリのような操作性を得ることが可能です。
データ使用量の効率化
UIのキャッシュにより、ネットワーク間を行き来するデータ量を削減できます。
App Shellの要件
公式によると、App Shellには以下の要件が求められるそうです。
- 読み込みが瞬時に行われること
- データは最小限であること
- 静的アセットはローカルのキャッシュを用いること
- コンテンツとナビゲーションは分離されていること
- ページ固有のコンテンツの取得と表示が実装されていること
- 必要に応じ、動的コンテンツのキャッシュを行うこと
これらの項目を満たすことで、パフォーマンスの高いApp Shell、ひいてはPWAを提供することができるそうです。
パフォーマンスの測定には、Googleが提供するWebページパフォーマンステストツールLighthouseで検証できます。
Lighthouseを使う
Chromeで使うことを前提とします。
ChromeウェブストアからLighthouseをインストール。
検証したいサイトに移動し、バーに追加されたアイコンをクリック→「Create Report」を押す。
すると検証がスタートし、しばらくすると結果が表示されます。
世知辛い。
点数低いと凹みますが、App Shell準拠かどうかに限らず、
Webサイト作成に非常に役に立つツールなので積極的に使っていこうと思います。
次回あたりには実際にApp Shellのモデルに則ったアプリ作成をしてみたいと思います。
