PWA（Progressive Web Apps）について（ウェブアプリマニフェスト、Webプッシュ通知、Service Worker）

PWA（Progressive Web Apps）とは

スマートフォンの普及に伴い、ウェブサイトへのアクセスのされ方や、ユーザーとの接触機会の獲得方法は日々変化しています。

Googleはウェブサイトの読み込みに3秒以上かかるとユーザーの53％が離脱すると発表しており、ユーザーの通信環境によらずウェブサイトをストレスなく閲覧できるよう考慮することが求められています。

また、近年ではさまざまな組織が提供するネイティブアプリケーションを目にするようになりました。ユーザーのホーム画面にアプリアイコンが位置どることによってユーザーとの接触機会の増加が期待できる他、プッシュ通知の送信によって興味関心の高いユーザーに向けたリアルタイムの情報発信が可能になります。

そのような背景のなか注目されるようになった技術が、ウェブサイトをネイティブアプリに近い感覚で利用できるようにするPWAです。

開発コストの掛かるネイティブアプリを別途準備することなく、アプリのような体験を提供できることに加えて、コンテンツの管理がサイトとアプリで分離することもありません。また主要リソースを事前にキャッシュすることで、ネットワークに依存しないアクセスを実現します。

MovableType.net はPWA対応をサポートする機能を提供しており、Webプッシュ通知やオフラインキャッシュのコントロール、ユーザーのホーム画面への登録が導入しやすくなっています。

Webプッシュ通知はスタンダードプラン以上で利用可能です。

スマートフォンにアプリをインストールすると、設定によって更新情報やセールの情報が通知で届くことがあります。この体験をアプリなしに実現するのがWebプッシュ通知です。

サイト閲覧者が通知を登録（購読）すると、PCやスマートフォンへ記事やウェブページの更新を通知可能です。

Webプッシュ通知の具体的な設定方法などについては、以下のマニュアルをご参照ください。

Webプッシュ通知の購読は現在以下の環境で利用可能です。

【2024年5月10日現在】

Webプッシュ通知は、通知数や購読数によっては一時的に制限させていただく場合があります。

ウェブアプリマニフェストはPWAに必須のシンプルな JSON 形式のファイルです。これを準備することによって、ユーザーはホーム画面にウェブサイトをブックマークしたり、そこからサイトにアクセスした際の外観を指定できるようになります。

ホーム画面にブックマークを登録することで、ウェブブラウザーのURL欄などが表示されず、スタンドアローンのアプリケーションのようにサイトを開くことが可能。閲覧者はスムーズにウェブサイトにアクセスすることができるため、アクセス機会の増加も期待できます。

MovableType.net の場合は、管理画面内にウェブアプリマニフェストの設定項目が用意されているため、ファイルを一から準備することなく簡単に設定可能となっています。

ウェブアプリマニフェストの設定方法に関しては以下の記事をご覧ください。

Service Worker を使ってコンテンツをキャッシュすると、ユーザーがオフラインでもページを閲覧できる環境を提供することができます。

MovableType.net は、[デザイン] - [テンプレート] - [システムテンプレート] よりService Worker テンプレートを作成できるようになっており、キャッシュの細かな設定を個別に行うことが可能です。詳細は以下の記事をご覧ください。