Skip to content

PWAの基礎知識(その5)「Web App Manifestの使い方」

PWA(Progressive Web App)という単語がトレンドになっています。PWAは特定の技術を指す言葉ではなく、様々な技術が組み合わさったスマートフォンにおけるWebアプリのベストプラクティスと言えます。

今回はそんなPWAの基礎になる、Web App Manifestについて紹介します。

利用できるブラウザについて

Web App Manifestはまだ仕様が確定しておらず、一部のWebブラウザでしか使えません。Google Chromeはデスクトップ(アイコンのみ)、スマートフォンともに利用できます。また、iOSのSafariでは11.3からサポートを開始しています。デスクトップで利用できるのはEdgeくらいのようです。

要件

技術的には以下が必須になります。

  • HTTPSサイトである
  • Service Workerを使っている
  • マニフェストファイルを配置している

Service Workerを使っている

Service Workerを使ってオンライン上のファイルをキャッシュします。まずWebブラウザ側のJavaScriptでService Worker用のJavaScriptを読み込みます。

Service Worker用のJavaScriptではキャッシュしたいファイルを読み込みます。

マニフェストファイルを設置している

マニフェストファイルは manifest.json という名前で作られることが多いようです。このファイルをHTMLのheadタグ内で読み込みます。

内容は次のようになります。縦向きで、アプリのようなUIで表示されます。また、テーマカラーであったり、スプラッシュスクリーンの背景色なども指定できます。

これをWebサイト上に配置します。

サイトを表示する

Google Chromeの場合は5分以上置いてアクセスするとインストールバナーが表示されるとあります。しかし体感としてはもっと空けるか、Webブラウザの設定を変更した方が良いのではないかと思います。

表示して少し経つとバナーが表示されます。

こういう小さいバナーの場合もあります。

バナーをタップすると、インストールの確認が出ます。

インストールするとホーム画面上にアイコンが表示されます。

アプリと同じなので、コンテクストメニューがブックマークとは異なります。

アイコンをタップするとアプリが表示されます。アプリのアイコンで192pxのものを用意しておくとスプラッシュスクリーンが表示されるようです。Service Workerを使っていますのでオフラインでも使えます。


Web App Manifestはまだブラックボックスな動作もあります(バナーが表示されるタイミングや再表示させる方法など)。アプリを一度アンインストールした後、再度インストールする方法も明文化されていません。

とは言え、Webアプリをネイティブアプリ化できるのは面白い技術で、通常のアプリストアを頼らない配布も便利です。業務アプリなどでも使えそうです。

PWAの基礎知識(その3)「オンライン、オフライン判定」

PWA(Progressive Web App)という単語がトレンドになっています。PWAは特定の技術を指す言葉ではなく、様々な技術が組み合わさったスマートフォンにおけるWebアプリのベストプラクティスと言えます。

今回はそんなPWAの基礎になる、Service Workerについて紹介します。

利用できるWebブラウザについて

Can I useによると、モダンなブラウザの中でService Workerが使えないのはIEとOpera miniだけになっています。スマートフォンであれば安心して利用できるようになっています。

オンライン/オフラインは navigator.onLine で判定する

オンラインかオフラインの判定として使えるのが navigator.onLine です。trueの場合はオンライン、falseはオフラインです。

オフラインの時だけ表示を変える

ではオンラインの時だけユーザがそれと分かるように表示してあげましょう。ただしService WorkerはDOMが使えませんので、文字を出すことはできません。そこで、SVG(または画像)を使います。

二つのSVGをキャッシュする

まずオンライン、オフライン用のSVGを二つ読み込みます。

HTMLの修正

HTML側はオンライン時の表示としておきます。

表示判定処理

そして、キャッシュを表示する fetch 処理にてオンライン、オフライン状態に応じてレスポンスを変えます。

こうするとオフライン時にはオフライン用のSVG画像を出せるようになります。


PWAではある程度のオフライン状態でも利用できますが、それでも最近のWebアプリとしてはネットワークがないと機能不足になってしまうでしょう。そうした時にJavaScript側でエラー処理を行うのはもちろんですが、ユーザの視覚にも反映してあげるとユーザビリティが高いと言えます。

PWAの基礎知識(その2)「Service Workerの開発法」

PWA(Progressive Web App)という単語がトレンドになっています。PWAは特定の技術を指す言葉ではなく、様々な技術が組み合わさったスマートフォンにおけるWebアプリのベストプラクティスと言えます。

今回はそんなPWAの基礎になる、Service Workerの開発方法について紹介します。

Google Chromeの場合

Google ChromeはWebブラウザ側、Service Worker側の両方のスクリプトについて一つの開発者ツール内で扱えます。

また、オフライン時の確認をする際には開発者ツールのアプリケーションタブ、Service Workersの中にOfflineというチェックを有効にすることで動作検証できます。

Firefoxの場合

Firefoxはツールメニューのウェブ開発、Service Workerという項目を選択します。

現在、デバッガーがマルチプロセスコンテンツに対応していないのでオプトアウトしないとデバッグできません。

オプトアウト後、Service Workerが組み込まれているページを表示するとデバッグボタンが押せるようになります。これを押すと別ウィンドウでデバッガーが立ち上がります。

もちろんブレークポイントを入れることもできます。

オフライン時の検証はファイルメニューのオフライン作業を選んで有効にできます。

Safariの場合

Safariは開発メニューのService Workerを選んでデバッグします。

Firefoxと同レベルのデバッグができます。ただしオフライン作業にはできませんでした。

Edgeの場合

Edgeは開発者ツールのデバッガーの中にService Workersという項目があり、スクリプトを選んで検査というリンクをクリックすると専用のデバッガーが立ち上がります。

EdgeはService Workerが読み込まれていることを通知してくれます。これは他のブラウザにはない機能です。

なお、オフラインにする機能はないようです。


Google Chromeだけが通常のJavaScriptとService Workerを同じ開発者ツールの中でデバッグできます。他のブラウザは別ウィンドウでデバッグとなります。また、Google ChromeとFirefoxはオフライン時の挙動を素早く確認できます。

通常のJavaScriptと異なるので、デバッグ方法も異なります。各ブラウザでのやり方を覚えておくと開発がスムーズになるでしょう。

PWAの基礎知識(その1)「Service Workerの使い方」

PWA(Progressive Web App)という単語がトレンドになっています。PWAは特定の技術を指す言葉ではなく、様々な技術が組み合わさったスマートフォンにおけるWebアプリのベストプラクティスと言えます。

今回はそんなPWAの基礎になる、Service Workerについて紹介します。

利用できるWebブラウザについて

Can I useによると、モダンなブラウザの中でService Workerが使えないのはIEとOpera miniだけになっています。スマートフォンであれば安心して利用できるようになっています。

使うための基本形

Service WorkerはフロントエンドのJavaScriptとは別プロセスで実行されます。まずWebブラウザ側のJavaScriptにてService Workerを登録します(今回は sw.js としています)。

これで登録できます。

Service Workerの内容

Service Workerではselfというオブジェクトが存在します。これはdocumentが使えないService Worker内で全体のイベントハンドリングを行う存在です。イベントハンドリングが基本機能になります。

インストール時の内容

インストール(install)イベントではキャッシュの設定をします。以下のコードではルートのHTMLだけキャッシュします。

各リソースへのリクエスト

画像に限らず、リソースへのアクセスがあるとこのfetchイベントが発生します。

ここではキャッシュの存在を確認し、キャッシュがなければfetchで改めてリクエストします。

例えばこの状態で一度Webページを表示し、オフラインして表示するとオフライン化はされますが、HTMLだけしか表示されません。

そこでキャッシュするリソースを追加します。

この状態で一度オンライン状態で読み込み、再度オフラインにして読み込み直すとスタイルシートもキャッシュされているのが確認できます。


Service Workerを使ったリソースのキャッシングの仕組みはとてもシンプルです。PWA化の第一歩として試してみてください。

PWAの基礎知識(その4)「Web App Manifest」

PWA(Progressive Web App)という単語がトレンドになっています。PWAは特定の技術を指す言葉ではなく、様々な技術が組み合わさったスマートフォンにおけるWebアプリのベストプラクティスと言えます。

今回はそんなPWAの基礎になる、Web App Manifestについて紹介します。

利用できるブラウザについて

Web App Manifestはまだ仕様が確定しておらず、一部のWebブラウザでしか使えません。Google Chromeはデスクトップ(アイコンのみ)、スマートフォンともに利用できます。また、iOSのSafariでは11.3からサポートを開始しています。デスクトップで利用できるのはEdgeくらいのようです。

機能について

Web App ManifestはWebアプリケーションをデスクトップまたはスマートフォンアプリのようにインストールできる機能になります。HTML5、JavaScriptが高機能化することによって、ローカルアプリケーションと変わらないレベルで動作するようになっています。そこで生み出されたのがWeb App Manifestになります。

同様の技術としてはCordovaやElectronが知られています。ただしWeb App ManifestはあくまでもWebアプリケーションなので、ローカルファイルにアクセスしたり、OS独自の機能は利用できません。

ブックマークとの違い

これまでもスマートフォンではホーム画面に追加する機能としてブックマークが用意されていました。しかし、Web App Manifestの場合はより能動的にユーザへインストールを呼びかけられるのが特徴です。

バナーは2回目以降の訪問者に対して表示が可能です(表示は自動で行われます)。このバナーからWebアプリケーションをインストールできます。

インストールされたアプリケーションは他のスマートフォンアプリと同じように扱われます。Androidの場合はAPKファイルとして提供されるようです。

技術要件

Web App Manifestの提供法としてはマニュフェスト用のJSONファイルをWebサイトに置くところからはじめます。これはmanifest.jsonというファイルのことが多いようです。また、アプリとしてインストールされた際のアイコンを用意します。manifest.jsonは次のような内容になります。

そして、Web App ManifestはWebブラウザがService Workerに対応していなければなりません。アプリと同様に動くので、オフラインでも問題なく利用できる必要があるためです。そして最後にサイトがHTTPSになっている必要があります。これらの条件が整ってはじめてインストール用のバナーが表示されるようになります。

インストール後の動作について

インストールされたWebアプリケーションは他のスマートフォンアプリと同じようにタップで開きます。

最初に表示するURLは指定可能です。さらにインテントにも対応しているので、特定のリソースを直接開くこともできます。

メリット

Web App Manifestを使うことで、これまでのようにGoogle PlayやApp Storeを使わなくともアプリの配布ができるようになります。Webアプリはネイティブアプリに比べて軽量であり、すぐにインストールできます。そしてオフラインでもある程度利用し続けられるのがメリットです。

アプリによってはアプリ内課金での30%の手数料であったり、配布できるアプリの種類や自由度のなさに不満を感じていることもあるかと思います。Web App Manifestによって、そういった制限がなくなるメリットは大きいでしょう。

デメリット

ネイティブアプリに比べると利用できる機能に制限があるのは否めません。また、DOMによる表示速度はネイティブに比べると遅く感じますが、グラフィックスを徹底的に活用するものでもなければ十分でしょう。JavaScriptのAPIに依存しますので、例えばiOSではgetUserMediaを使えないなど、作れるアプリ、作れないアプリの差があると言えます。


Web App ManifestはWebアプリケーションが広まっていく大きなきっかけになると考えられます。企業においてもスマートフォンアプリを社内向けに開発していたケースにおいて、その配布の管理をWeb App Manifest化することによって、より素早く手軽にできるようになる可能性があります。

IndexedDB1系と2系の違いについて

IndexedDBはまだ普及していると言える段階にはありませんが、それでも開発者のフィードバックを受けてバージョンアップが行われています。最新のブラウザで実装されているのは IndexedDB2系になります。

今回は1系と2系で何が変わったのかを紹介します。

オブジェクトストアとインデックス名を変更できるようになった

db.objectStore であったり、 objectStore.index で作成済みのオブジェクトを取得し、nameメソッドで名前を変えられるようになりました。これは構造変更を伴うので、 onupgradeneeded の中で行う必要があります。

 

 

 

 

クローズ時のイベントが追加

IndexedDBを閉じた時にoncloseイベントが発火するようになりました。が、筆者環境で試す限りコールされませんでした。

 

 

 

バイナリインデックス対応

インデックスは文字列や数字だけでしたが、ArrayBufferやDataViewなどもインデックスに指定できるようになりました。

トランザクションに objectStoreNames メソッドが追加

トランザクションに、対象となっているオブジェクトストアを一覧する objectStoreNames が追加されました。通常のトランザクションであれば指定したオブジェクトストアの一覧、IndexedDBのバージョンが変わった場合には全オブジェクトストアの一覧が返ってきます。

 

 

getAll/getAllKeysの追加

対象になっているオブジェクトストアで全データを取得するgetAllと、全データのキーを取得するgetAllKeysが追加されました。

IDBKeyRange.includes の追加

IndexedDBでデータを絞り込む際に使う IDBKeyRange で、ある値が対象範囲にあるかどうかを判定する IDBKeyRange.includes が追加されました。

 

これは数値に限らず利用できます。

 

 

 

 

 

まとめ

IndexeDB 1系はEdge/IE11でも利用できます(IE11ではサポート対象外であったり、EdgetではWeb Workersの中では動かないという制限もあります)。IndexedDB 2 についてはIE/Edgeともに利用できません。実際に利用する際には、こういった点にも注意して使う必要があるでしょう。

Can I use… Support tables for HTML5, CSS3, etc

IndexedDBでデータをまとめて取得するには?

IndexedDBはWebブラウザ上で使えるJSONをサポートしたKVSです。KVSなのでデータの取得はキー単位なのですが、それだとキーを知らないとデータにアクセスできなくなりますので若干不便です。

そこで使えるのがカーソルとインデックスになります。

カーソルの使い方

カーソルはオブジェクトストアに対して openCursor メソッドで実行します。まず IndexedDB を開きます。

次にトランザクションを開き、オブジェクトストアに対して openCursor メソッドを実行します。 データはイテレーションになっており、 continue メソッドで次のデータを取得します。

すべてのデータを取得する getAll

IndexedDB2 からは全データをまとめて取得する getAll メソッドが追加されました。こちらはイテレーションではなく、すべてのデータが配列になって取得できます。大量のデータではない時にはこちらのが簡単でしょう。同じようにキーだけを取得できる getAllKeys メソッドも用意されています。

インデックスを使う

データに対してインデックスを設けている場合には、それを使ってデータを指定できます。データがnameをキーにして昇順で取得できます(0が最初)。

こちらもまた、getAllや getAllKeysが使えます。

まとめ

IndexedDBはあくまでもWebブラウザ内で使う軽量なデータベースになりますので、大量のデータを保存していることはほとんどないでしょう。そのため、openCursorを使って全データを取得したとしても遅くなるようなことはないかと思います。

なお、getAll や getAllKeysはIndexedDB2 からになり、執筆時点ではEdgeは未対応になります。

IndexedDB を使用する – Web API インターフェイス | MDN

Can I use… Support tables for HTML5, CSS3, etc