##前置き
今学期私のプロジェクトは「Miniトシ」
という小さい図書館や容易なブックシェアの所などでアプリを作りたいです。
このアプリでアカウントに基づいて、本の管理や貸し借りなどができる。
プロジェクトの目的は奥多摩日本語学校の本の管理は自動的で便利になること。
「Miniトシ」のシステムのツールは「Progressive Web App」
というスマホとPCで使えるアプリです。
開発のために、「Google Developers」と
「Udemy : Progressive Web Apps (PWA) - The Complete Guide」で勉強しています。
この記事で学んだことを説明したいと思います。よろしくお願いします。
##PWAとは
「Progressive Web Apps」はネイティブスマホアプリみたいになるウェブページです。
ウェブアプリは機能を追加したウェブページです。
この機能でユーザーがウェブアプリを使った場合、
PCでブラウザの依存がいらないです。
しかし、ウェブアプリの機能は限界があります。
例えば、スマホのネイティブアプリの基本的な機能に比べて、
質素なウェブアプリはカメラを使ったり、
「GeoLocation」というGPSを使ったり、
オフラインモードを使ったりプッシュ通知を送ったりすることができません。
さらに、たくさんなできることと便利だから、
ネイティブアプリはウェブページより使う人が多いいです。
でも、ビジネスのために別なネイティブアプリを作ることは時間とお金がかかります。
存在したウエブアプリにネイティブのアプリの利点を入れた方がいいですね。
これは「PWA」を作った理由です。
つまり、「Progressive Web App」はネイティブスマホアプリみたいウエブアプリです。
##PWAのインストールの条件
まず、ネイティブアプリみたいのユーザー体験になれるように
「PWA」をインストールできるべきです。
一つの便利な方法は__ウェブのアプリのバナー__です。
この部分は私にとって、
「PWA」をインストールできるのために
どんな要素をチェックした方がいいですかの４つポイントの説明です。
大事なことはいつでもこの項目が変わることに可能性があります。
最新な方法を確認する場合、
「Google Developers Progressive Web App Checklist」に
調べてください。
###1. ブラウザサポート
ウェブページで「PWA」をインストールできるけど、
全部のブラウザはサポートがないことを知ったほうがいいです。
下のCan I Useのサポート調査で「Internet Explorer」と「Opera Mini」は
サービスワーカー、という「PWA」の大必要な構成部品をサポートしないです。
とにかく、開発の時に「Chrome」を使った方がいいと思います。
理由はグーグルの「Developer Tools」とサポートがあることです。
###2. アプリはまだインストールではない
ウェブアプリとネイティブアプリがあったら、ウェブバナーは表示することができない。
###3. 「Web App Manifest」の設定
ウェブアプリマニフェストはアプリのファイルです。
ファイルの内容はインストールした時にアプリの動き方を書きます。
ソフトウエアの「index.html」に「link」を書かなければならないです。
<link rel="manifest" href="/manifest.json">
もう一つポイントは「manifest.json」というファイルと
「index.html」は同じフォルダーレベルに入れるべきです。
マニフェストにインストールできるになるために４つ設定が必要です。
- short_nameやname
「name」はスプラッシュスクリーンというアプリの最初画面に表示する名前です。
「short_name」はアプリのアイコンの名前です。
- 192pxと512pxのアイコン
スマホのスクリンの型ごとに、
アイコンをアプロードすることができますが、
インストールの最小的な条件は「192pxと512px」のアイコンです。
アイコンはインストールして出てきたイメージです。
- start_url
「start_url」はアプリをスタートアップした最初のページです。
- 「display」という属性は「fullscreen」か「standalone」か「minimal-ui」になるべき
「fullscreen」という設定はアプリの画面は全体のスクリンを使うことです。
ブラウザのUIがないです。
「standalone」という設定はネイティブアプリのように表示することです。
アプリは自分のウィンドウに表示して、ブラウザのUIは見られません。
「minimal-ui」という設定は「fullscreen」みたいですが、
ブラウザのナビゲートのボタンを使うことができることです。
###4. HTTPSでザーブすること
HTTPSでアプリのデータを送ってもらってが必要です。
サーバーの設定は「Google Developers」に見られる。
サービスワーカーを動くため、HTTPSが必要です。
なぜなら、サービスワーカーのできることの影響は深いです。
システムやユーザーのデータなどを取ったりアプリと
ザーバーのコミュニケションを盗聴したりすることができます。
それだから、データの安全のために、HTTPSでデータの暗号化で、
正したサーバーに連絡することを確認しなければなりません。
##まとめ
最後に伝えたいことは、複雑なアプリの機能を作ってできるから
「PWA」は面白いな技術です。
この記事に基本的な設定を説明するですが、
アプリを動くように様々な設定やファイルなどが必要です。
それから、だんだん、頑張りましょう！
##参照