プログレッシブウェブアプリ (PWA) を作成する前に知っておきたいこと

No Internet Connection

もうこの表示をみることはなくなるかもしれないです。

これまで Apple 製品でのサポートがされていなかったために、あまり日の目を見ない生活を送っていた PWA 技術。

ですが、iOS 11.3 でやっとサポートされ、今後ますます注目をあびるであろう技術となっています。

ただ、調べていくうちに「ネイティブアプリを作成する意味がなる！」というわけにはいかないことが分かりました。

結論

やはり PWA は良い仕組みである。

ただ、アプリによっては相性の合わないケースもあるので、細かく調査が必要。

PWA 化するには、既に公開されているサイトように PWA に必要なファイル作成すれば、すぐに実装できる。

「Generate your Progressive Web App」を使えば、その必要なファイルをちゃちゃっと作成してくれて、ひとまずの PWA 化はできる。

PWA = Progressive Web App (プログレッシブウェブアプリ) の略です。

https://pwa.rocks/ (今はもうリンク切れしてます.. orz) から実際のアプリを見ることができます。 (iOS の方は、「ブックマーク追加」をせずに「ホームスクリーンを追加」を選択してください。)

そして、こちらがよく言われている、メリット・デメリットがこちら。

インストール不要
- アプリを探して、認証して、インストールして。。。というステップが不要
- 「ブックマークを登録する」代わりに「アプリを登録する」だけなので、ユーザーにとって気軽に利用できる
- それなのに、ホームスクリーンにアイコンと置いて、起動できるようになる
オフラインでも動作する
コンテンツに変更が少ない場合は、ネット接続不要 or 最小限に行い爆速表示する
- 読み込み時間の長さが、ビジネスにダイレクトに影響するこの時代。早い表示はマストですよね。
スマホ・タブレットからは、ネイティブアプリと同じように使える
- 言い方を変えれば、見た目や操作感はネイティブアプリと PWA との違いがわからない
- プッシュ通知もできる

あまりないように思いますが、あえて言うならこれでしょうか？

利用者的には、アプリがオフラインでも動作するので、いま見ているのが「最新の情報」と思ってしまい、勘違いをする可能性があります。

また、開発者的には、開発時に意識していないとキャッシュデータを見ているのか、コード変更後のデータを見ているのか、をこんがらがって、間違った判断をする可能性があります。

とはいっても、いくらでも対応できるので「デメリットになりうる」が正確な表現かもしれないですね。

ほかにも

というのもありますが、iOS でのサポートがされた今、あまり意識しなくて良いかもしれないですね。

Supported Browser

(参照: https://caniuse.com/#feat=serviceworkers)

ま、徐々に全てのブラウザでサポートされるでしょ。。(楽観的。笑)

それでは、PWA に必要なものを確認していきましょ！

HTTPS 接続 (開発時は localhost が使える)
Manifesto ファイル
- いわゆる設定ファイル。JSON形式で定義。
- 例: アプリ名、説明、背景色、アイコンなどが定義可
- 参考: 「Web App Manifest」
Service Worker
- 動作を定義するファイルで、Javascript で記述
- 「プロキシ」という表現もされ、ネットワークリクエストをインターセプトして、応答をする

基本的には上記の 3 つだけです。

細かい部分は Google から「PWA Checklist」から確認できます。

ネイティブアプリの「ように」動作するだけで、ネイティブアプリではありません。

特に iOS では、「Progressive Web Apps on iOS are here 」にあるように何かと制限があるようです。

以下抜粋。

アプリの性質によっては、PWA 化できる・できないがありそうですね。