あなたのWEBサイトを、スマホアプリのような体験に変えるPWA

あなたのWEBサイトを、スマホアプリのような体験に変えるPWA

iPhone用のスマホアプリ、Android用のスマホアプリ、それぞれを別個で作ると多額のお金が必要になります。そんな中、構築したWEBサイトをベースにして、スマホアプリのようなユーザー体験を実現できるPWA。

スマホ画面内にアイコンを表示したり、ブラウザのデフォルトの「進む」「戻る」ボタンを表示しなくしたり、プッシュ通知をできるようにしたりと、さまざまな機能が用意されています。

PWA構築に必要なのは、おもに「Service Worker」「Manifest」等を利用したJS・JSONファイルの構築方法を理解すること。

でも、PWAを利用すればすべてが解決するという形ではないこと。とくにPUSH通知などは対応するブラウザやOSが限られていること。くわえて、ネイティブのスマホアプリで利用できるカメラ機能など、多様な機能をすべてPWAで利用できるわけではないことなど、知っておくべきことやリスクもたくさんあります。

ありがとうございました!

本のまとめ

▼読んだ本は?

■プログレッシブウェブアプリ PWA開発入門
■柴田 文彦 (著)

▼PWAってなに?

■プログレッシブ・ウェブ・アプリのこと
■Googleが提唱している、ウェブアプリのアーキテクチャのひとつ
■ChromeやFirefoxをはじめとする、ウェブブラウザを通じてプログラムが動作する
■通常のWEBサイトをインストールし、スマホアプリのようにアイコンをタップして利用できるようにする

▼PWA利用の流れは?

【1】PWAを供給するURLに、ユーザーがアクセスする
【2】訪問したサイトで、ユーザーがPWAを「インストール」する
【3】WEBアプリを構成するHTML・CSS・JS・画像ファイルを、ウェブブラウザの管理領域にキャッシュする
【4】その後ネットワークに接続せず、スマホ内のアイコンタップにより、オフラインでも利用できるようになる
【5】アプリがアップデートされると、バックグラウンドでネットワーク通信・情報更新し、最新化する

▼PWAのメリットは?

■キャッシュを保持するため、表示速度がはやい
■スマホのホーム画面にアプリアイコンを表示できる
■プッシュ通知の機能が利用できる
■WEBアプリがサーバーから最新情報を取得するなど、バックエンドでのネットワーク通信が可能

▼PWA利用の注意点は?

■PWAの機能を完全にサポートするブラウザは「Firefox」「Chrome」のみ
■ローカルのファイルを読み込む機能などを保持しているため、https通信にすることが必要
■プッシュ通知に関しては、ブラウザやOSのバージョンにより、利用可否が異なる

▼ブラウザ上で使えるデータの記憶領域は?

■Local Storage
■Session Storage
■IndexedDB
■Web SQL

▼PWA実現のために必要なファイルは?

【1】Service Worker(サービスワーカー)
└ローカルへのインストールやキャッシュ読み込みなど、PWA機能を実現するためのJSファイル
└サーバーからインストールされ、自動的にブラウザ環境に保存されるファイル
└一種の、ブラウザ内部の常駐プログラムとして作動する
└オフライン状態でも、このService Workerはブラウザ上で動作する

【2】Manifest(マニフェスト)
└WEBアプリが、スマホアプリのように動作するための、アイコンなどデザイン外観を定義するjsonファイル
└アプリ名・アプリアイコン・アプリの背景色等を記述しておく

▼Service Workerに記述すべき内容は?

■cache
└キャッシュ名の指定とキャッシュするファイルの指定

■install
└Service Worker自体をブラウザ側にインストールする時に利用されるJS

■actiivate
└Service Workerが起動する時に利用され、ブラウザ側のキャッシュ保持状況を確認するJS

■fetch
└PWAがウェブ上のリソース(HTML・JS・CSS・データ)をリクエストするJS

▼Manifestに記述すべき内容は??

■アプリの名前・アイコン・読み込むURL・表示モード・色などを記述

関連する記事