HAL_DATA_techBlogスマートフォン用の表示で見るHAL_DATA_techBlogハルデータ研究所の技術ブログです。CDP関連の開発をしてます。Application)という、新しいWebの技術があります。これは、Webページをネイティブアプリのように動作させ、新しいユーザ体験(UX)を届けるために生まれたものです。本稿ではPWAの概要やメリット、そして導入の流れについて前編・後編に分けて記載していきます。いったアプリストアを経由してインストールせずとも、ネイティブアプリのような利便性、機能を提供できるようにする技術です。Aplication)の略で、Googleが発信、推進している規格です。モバイルチャネルをターゲットとした技術でしたが、PCチャネルにおけるUXも着実にアップデートされてきています。OSと各ブラウザバージョンによって対応状況や実現機能に差異があります。OS、ブラウザ毎の対応状況は以下のサイトで確認できます。?PWAで実現できること独立したアプリケーションとして動作できるユーザがあなたのWebサイト、Webアプリケーションを訪問し「ホーム画面に追加」するだけで、ネイティブアプリと同等なフルスクリーンで起動させることができます。ブラウザのタブの1つではなく、独立したアプリケーションのように動作します。インストール作業がアプリストアを経由せずにできるため、ユーザのエンゲージメントを向上させることができます。オフラインキャッシュ、バックグラウンドデータ更新PWAではバックグランドデータ更新やオフラインキャッシュを実現することができます。これにより、デバイスがオンライン状態でないときや接続状態が良好でないときでもユーザへコンテンツを提供させられ、ユーザ体験を向上させることができます。Workerという仕組みによって実現されます。WorkerとはJavaScriptで記述されるものであり、煩雑なライブラリやプラグインは必要ありません。Workerの中でのライフサイクルに基づき、コンテンツの同期やキャッシュを行う仕組みです。PWAの導入さて、それではWebアプリケーションをPWAに対応させるための手順について紹介します。いっても全てWebの実装と同様、さらに言えばJavaScriptやjson形式のファイルを記述するだけであり専用ソフトウェアなどは必要ありません。導入までには大きく分けて3ステップあります。WebサイトのSSL/TLS化SSL/TLSを使用してコンテンツの表示における通信を暗号化する必要があります。その際、アクセスURLはhttps://のような形式になります。SSL化が必要な理由は、端的に言うと中間者攻撃を防ぐためです。Workerによってサーバ⇔クライアント間でバックグラウンドでの通信が行われます。この特性から、サーバアプリケーションがSSL化されている必要があります。このことはGoogleの開発ガイドでも触れられています。WorkerサイトのSSL化はアプリケーションの実装から主旨が外れるため、本記事では範囲外とします。manifest.jsonの実装/配置manifest.jsonはアプリケーション表示名やアイコン画像、アプリ起動時の挙動などアプリケーションの見映えに関するものが大きな役割です。その名の通りjson形式のファイルで、通常はアプリケーションのドキュメントルートに配置しクライアントに読み込ませます。Workerは、通常のアプリケーションで行われる1対1のサーバ⇔クライアント通信とは異なり、リクエストを仲介してユーザにコンテンツを提供します。これによりキャッシュやオフライン時のコンテンツ表示を実現します。Workerは、PWAにおけるアプリケーションの制御を担うものです。manifest.jsonの実装/配置それではmanifest.jsonの配置について記載します。本記事では、PWAの実装で必要なSSL化はNetlifyを使用します。静的サイトのホスティングが行え、標準でSSL化も行ってくれます。GithubやBitbucketと連携し、リポジトリへのコミットを契機に自動デプロイも可能です。サンプルアプリケーションは以下の状態であるとします。sass基本的なmanifest.jsonの記述manifest.jsonを以下のように実装します。これをWebサイトのドキュメントルート直下(例えば/var/www/html/manifest.json)に配置します。"standalone"の部分です。これにより、ブラウザ内のタブとは独立した1つのアプリケーションとして動作します。各項目の詳細解説はMozillaのページが最も詳しいかと思います。MDNhtmlファイルでの指定<head>タグでマニフェストを読み込ませるよう指定しています。マニフェスト内でアイコン指定がありますが、AppleデバイスやSafariでは上手く動作しないため追加でアイコンを指定する必要があります。sizes="512x512">したがって、htmlファイルは以下のような内容になります。</body></html>ブラウザでの確認Chromeのデベロッパツール(F12キーを押下)にて[Application]タブ>[Manifest]メニューで確認できます。よる画面キャプチャです。ページを開いて「ホーム画面に追加」を行います。ホーム画面に追加されたアイコンをタップすると・・・ブラウザのタブとして開かれていないのが分かるでしょうか。一覧画面でも以下のようにSafariとは別アプリケーションとなっています。まとめPWAの概要と、第1ステップとしてマニフェストの作成について解説します。Workerについては次回記事にて説明します。Personalizeを使ってみる月別アーカイブはてなブログをはじめよう!haldataさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。