Chrome 73（3/14）にMacOSでのProgressive Web Apps（PWA）対応、ダークモード対応、Signed HTTP Exchangesへの対応などの新機能が追加があり、主要プラットフォームすべてでPWAの実行環境が整う形となりました。
Progressive Web Apps（PWA）とは？
一言でいうと「アプリのようなウェブサイト」のことで、アイコンがあったり、スプラッシュスクリーンがあったり、システム的にはプッシュ通知やオフライン機能が使える部分を併せ持つ「ウェブサイト」でネイティブアプリに近いWebアプリとなります。
App Shellモデルの特徴として、以下があります。
・高速：ロードが速い。Service Workerを使いスムーズに動く。
・プログレッシブ（進歩的）：どこでも、どんなデバイスにも対応できる。モダンブラウザーに対応している。
・接続状態に依存しない：オフラインでも、接続環境が悪くても動く。接続が弱かったり不安定だったりする場合でも、接続変更の影響が低減される。
・エンゲージメント：PWAはホーム画面に表示でき、プッシュ通知機能を使えるため、ユーザーの再エンゲージメントする可能性は通常のWebサイトより高い。
実際にPWAに対応したソースを見てみます。
公式サイトより引用
◆App Shell の HTML の例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>App Shellの例</title>
<link rel="manifest" href="/manifest.json">
<title>App Shell</title>
<link rel="stylesheet" type="text/css" href="styles/inline.css">
</head>
<body>
<header class="header">
<h1 class="header__title">App Shell</h1>
</header>
<nav class="nav">
...
</nav>
<main class="main">
...
</main>
<div class="dialog-container">
...
</div>
<div class="loader">
<!-- Show a spinner or placeholders for content -->
</div>
<script src="app.js" async></script>
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js').then(function(registration) {
// Registration was successful
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}).catch(function(err) {
// registration failed
console.log('ServiceWorker registration failed: ', err);
});
}
</script>
</body>
</html>
[/info]
◆静的リソースをキャッシュする例（sw.js）
var filesToCache = [
'/css/styles.css',
'/js/scripts.js',
'/images/logo.svg',
'/offline.html’,
'/’,
];
self.addEventListener('install', function(e) {
console.log('[ServiceWorker] Install');
e.waitUntil(
caches.open(cacheName).then(function(cache) {
console.log('[ServiceWorker] Caching app shell');
return cache.addAll(filesToCache);
})
);
});
[/info]
ポイントは、
・UIの「骨子」となる HTML と CSSがあり、HTMLにはナビゲーションとコンテンツのプレースホルダが備わっている。
→インフラストラクチャと UI をデータから切り離している。
・ウェブアプリが開かれたときに、すぐにページのレイアウトのみが表示されるよう、最初の読み込みはできる限りシンプルしている。
→App Shellに関連したCSSをインライン化することによりロードを高速化することもあるようです。
・ナビゲーションと UI のロジックを処理する外部 JavaScript ファイル（app.js）にIndexed DB などのストレージ メカニズムを使用して、サーバーから取得した情報を表示してローカルで保存するためのコードがある。
・オフライン機能を有効にするためのウェブアプリマニフェストとService Workerをロードしている。
→Service Worker を使用することで、すべての UI とインフラストラクチャはローカルにキャッシュしている。
ちなみに、ServiceWorkerとは、
Webページの裏側で働く独立したJavaScript環境で、Service Workerが一度Webページからインストールされると、Webページとは独立したライフサイクルの中で動作します。
たとえば、オフライン状態でも、Webページを表示していたタブが閉じていても、必要があればService Workerが作動します。
ServiceWorkerについて詳しく知りたい方は、下記を参照してください。
https://developer.mozilla.org/ja/docs/Web/API/ServiceWorker_API/Using_Service_Workers
Webアプリも年々進化していき、ユーザにとって利用しやすい環境となってきていますね！
