この出会いはこの10年ぐらいのテクノロジー基盤としては、かなりのインパクトがありそうなので、自分なりの知識で解説しておこうと思います。
クロスプラットフォームの問題
そもそも、アンドロイドとiPhone のスマホアプリ、それからウェブサイトとしてのスマホサイトの3つを開発しようと思うと、それぞれの開発言語が異なるので、開発者としては3つの言語とそれぞれのシステムの管理が必要です。
ネイティブアプリの開発の場合、iOSだと Swift で Androidだと Kotlinで ウェブサイトはHTMLとCSSですね。これだと開発者泣かせということで、iOSでもAndroidの共通開発言語としてクロスプラットフォームという考え方が次に広まりました。有名なクロスプラットフォームとしては XamarinやReact Native がありますが、これもまた独自の言語に近いのでゼロから学習しなければならないし、ネイティブアプリのような体現ができるかといえば、微妙です、、。
PWAの登場
そんな過程で2018年ごろに登場したのがPWAです。
PWAとは、「Progressive Web Apps」の略称で、モバイル向けWebサイトをGooglePlayストアなどで見かけるスマートフォン向けアプリのように使える仕組みです。
特別な技術は必要なく、既存のウェブサイトに数行のJavascriptコードを追加するだけでGoogleストアやアップルストアで見かけるネイティブアプリのようにユーザーは自分のスマホにインストールして使えるようにするものです。
PWAを既存のウェブサイトに実装すると以下のようなメリットがあります。
- ネイティブアプリと同じく全画面で閲覧できる
- プッシュ通知が行える
- オフラインで閲覧できる
- ファイルがスマホにキャッシュされるので読み込み速度が格段にアップする
- 検索エンジン経由でアプリをインストールさせることができる
- 管理者側としてはサイトの審査が不要
などなど、、非常にメリットが大きいのです。
Googleのケース事例として紹介されている、不動産検索サービスを提供するSUUMOの場合、
- 読み込み時間75%短縮
- プッシュ通知開封率31%
- 検索エンジンでのランク評価に好影響
そのほかにも、NIKKEIやTwitterやスターバックスなども事例として紹介されています。
ブラウザの対応
PWAという仕組みはスマホのブラウザで動作するため、AndroidとiOSにそれぞれインストールされているブラウザの対応状況によっては正しく動作しない場合があります。
2019年時点では、Google Chromeは完全にPWAに対応しています。Safariについてはまだプッシュ通知ができない、バックグランド同期ができないなど課題が残ります。近い将来、AppleがPWAを完全サポートすることを願うばかりです。
PWAの作り方
前提条件としては、以下の条件です。
- 最近のバージョン（74以降）のChrome。 PWAは単なるウェブアプリであり、すべてのブラウザで機能しますが、ブラウザレベルで何が起こっているのかをよりよく理解してインストール体験をテストするためにChrome DevToolsのいくつかの機能を使用します。
- HTML、CSS、JavaScript、そしてChrome DevTools に関する知識。
１、manifest.json ファイルの作成
manifest.json というファイルを作成し、以下の記述をします。
{ "name": "Weather", //ウェブサイトの名称 "short_name": "Weather", //ウェブサイトの名称（短文） "icons": [{ "src": "/images/icons/icon-128x128.png", //１２８pxアイコンの場所 "sizes": "128x128", //サイズ定義 "type": "image/png" }, { "src": "/images/icons/icon-144x144.png", "sizes": "144x144", "type": "image/png" }, { "src": "/images/icons/icon-152x152.png", "sizes": "152x152", "type": "image/png" }, { "src": "/images/icons/icon-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/images/icons/icon-256x256.png", "sizes": "256x256", "type": "image/png" }, { "src": "/images/icons/icon-512x512.png", "sizes": "512x512", "type": "image/png" }], "start_url": "/index.html", // アプリインストール後のURL転送先 "display": "standalone", // 変更なし "background_color": "#3E4EB8", // アプリ起動時のブラウザの色 "theme_color": "#2F3BA2" //テーマ色 }
Note: Chromeをインストールするには、少なくとも192 x 192 pxのアイコンと512 x 512 pxのアイコンを用意する必要があります。しかし他のサイズを提供することもできます。 Chromeは48dpに最も近いアイコンを使用します。たとえば、2xのデバイスでは96px、3xのデバイスでは144pxとなります。
２、ウェブアプリマニフェストへのリンクを追加する
アプリの各ページに<link rel="manifest"...を追加して、ブラウザにマニフェストについて通知する必要があります。 index.htmlファイルの<head>要素に次の行を追加します。
public/index.html
<!-- CODELAB: Add link rel manifest -->
<link rel="manifest" href="/manifest.json">３、iOSのmetaタグとアイコンを追加
iOSのSafariはウェブアプリマニフェストがまだサポートされていません。そのため
index.htmlファイルの<head>に伝統的なmetaタグを追加する必要があります。public/index.html
<!-- CODELAB: Add iOS meta tags and icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Weather PWA">
<link rel="apple-touch-icon" href="/images/icons/icon-152x152.png">４、アドレスバーのテーマカラーを設定する
metaタグをドキュメントの<head>に追加します。
metaタグをドキュメントの<head>に追加します。public/index.html
AppleはPWAフレンドリーに近づくか？
答えはおそらくYESです。いずれにせよ、AppleがPWAテクノロジーに近づき、それに近づいていることは大きな一歩ですね。iOS 12.2およびiOS 13ベータ版のPWA対応は多くの人が待ち望んでいたことですので。
PWAはモバイルアプリケーションの未来だと考えています。ネイティブアプリケーションは今後数年後、PWAを基本としたウェブアプリに置換えられ、ネイティブアプリはウェブサイトと完全な組み合わせになる可能性があると思われます。
結局のところ、Googleはこの点で先導的であり、常にProgressive Web Appsの開発を推進しています。PWAについては今後もウォッチを続けていこうと思います。最新記事についてはメルマガを購読していただけると助かります。
