1.PWA(Progressive Web Apps)とは

PWAとは、アプリのように高速でページ表示ができるWebサイトの事です。
通常オンランで利用するWebサイトをキャッシュ技術を用いてオフラインで利用できたり、あたかもUI(User Interface)をネイティブアプリのように利用することが可能な技術です。

2.PWA導入のメリット

  • キャッシュの利用による高速化およびオフライン対応
    service worker,jsを利用することでストレージにコンテンツがキャッシュされます。そのキャッシュを利用することで、キャッシュの利用により、ネイティブアプリのようにオフラインでのサイト閲覧・利用を可能にします。オフラインで動作するということは、ネット環境が不安定で回線が繋がり辛いような状況でもコンテンツの閲覧が可能になる、ということです。
  • インストールの概念が必要なし
    通常のWebブラウザでの表示と同じ動作となるため、アプリのインストールの必要がありません。
  • UIをブラウザ上でネイティブアプリのように動作可能
    UIをアプリのようにに設計・製作し、動作させることが可能です。

3.PWAの特徴

PWAは、Web技術における画期的なイノベーションです。Webアプリをモバイルデバイスでネイティブアプリのように動作させるための技術から成り立っているのがPWAです。開発者とユーザーにもたらす数々の恩恵のなかには、Webだけ、あるいはネイティブアプリだけといった、それぞれ特有の制約を解消してくれます。

下記にPWAの特徴を列挙します。

  • W3C標準のWeb技術を使って1つのアプリだけ開発すればよく、特別にネイティブアプリ用のコードを書く必要がありません。
  • ユーザーはインストール前にアプリを試すことができます。
  • AppStoreを通す必要はなく、複雑なルールにしたがったり、手数料を支払う必要がありません。
  • ユーザーの操作作とは無関係に自動でアプリのアップデートを行うことができます。
  • ユーザーに「インストール」を促してホーム画面にアイコンを置くことができます。
  • 起動時に魅力的なスプラッシュスクリーンを表示できます。
  • 全画面モードにしたい場合も、Chromeのオプション変更で実現できます。
  • 必要なファイルをローカル保存することで、PWAは通常のWebアプリよりも、ネイティブアプリ以上に高速に応答することが可能です。
  • ほんのわずかななインストール容量。たいていは数百キロバイトのキャッシュデータのみです。
  • すべてのデータ通信が、安全なHTTPS接続で実行できます。
  • PWAはオフラインでも動作し、接続が回復したときにデータを同期します。

4.TSOneでの導入事例

TSOneではとある製造ラインで点検システムにてPWAにて実装し導入を行いました。点検システムの要件は以下の通りです。

  • 点検端末は持ち歩きでタブレット、確認端末では業務PCを使用したい
  • ネットワークは社内採用された公衆閉域網を利用する
  • 製造ラインの点検箇所では公衆閉域網が届かない場所がある
  • なるべく導入作業の手間を省いて行いたい

上記要件を満たすために、複数回のブレストおよび提案・協議を行った結果、PWAを用いて導入することに決定しました。

要件から導出したソフトウェアスタック


実際にこの方式での導入が決定された時には、ナレッジも少ないうえに、PWA独特の手法に苦戦を強いられることもありました。
が、製作期間約半年を経て、現在既にに導入されており、順調に稼働しています。
今回この方式を採用して顧客の満足を得られている現状に我々も手応えを感じています。

5.終わりに

今後、PWAを使ったアプリケーション開発は、非常に大きな可能性があると考えています。
いままでプラットフォームに依存していた動作環境が、制限されることなく、ネットワークが接続されたときだけ接続を行う、という技術を導入することにより、いつでも・どこでも・どの環境でも動作可能となりました。
例えば、ネットワークが制限されるような工場や電波の入りが悪い地下など、いろいろなシーンでの活用が期待されます。

PWAの開発に興味がある、という方はぜひご一報いただければと思います。