App)についてその特徴や導入の利点などについて分かりやすくまとめてみた。PWAはAndroid・iOSのネイティブアプリに替わる新たな選択肢のひとつとして、特に開発コストの削減を狙う企業から注目を集めている。Angularにおける実装の例も紹介している。簡単にアプリをPWA化することが出来るので、開発者の人はぜひ実際に試してみてほしい。application」の略で、Webアプリケーションをまるでデスクトップアプリのように使用するための技術。インストールされたアプリはWindowsのアプリと同様にデスクトップのショートカットを作成しすぐに呼び出すことができる。制限はあるもののPWAのアプリはオフラインでも使用することができる。PWAアプリへのショートカットPWAの利点PWAを導入する一番のメリットはなんといっても開発コストの削減だろう。Webアプリケーションをほぼそのまま、デスクトップ・Android・iOSのアプリとして使用することができるのだから、開発の規模は大幅に縮小することができる。Webアプリをそのままデスクトップにすれば、使い心地という面ではネイティブアプリには遠く及ばないだろう。クロスプラットフォームのアプリでは、ライブラリを手軽に導入することも難しくなるので、機能が制限されることも多々あるだろう。PWAとネイティブアプリとの違い次にPWAとネイティブアプリの違いについて確認しよう。企業の視点から見た違いまずは企業の視点から見たPWAとネイティブアプリの違いについて。開発・メンテナンスのコストまず注目したいのは開発やメンテナンスに掛かる工数の違い。PWAではWebのフロントエンド技術を一通り習得した開発者が数名いれば開発を行えるのに対し、ネイティブアプリを開発した場合は、アプリごとにJavaやSwiftなどそれぞれに必要なプログラミング言語を習得した開発者を雇わなければいけない。開発したアプリをメンテナンスする際にも同じことが言える。Storeへの登録が必要だった。登録やアップデートする作業も開発チームへの負担となる。Optimization)と呼ばれるようなテクニックが不可欠だった。PWAは自分たちのウェブアプリに訪れてもらいそこでアプリをクリックひとつでインストールしてもらう形となるので、ネイティブアプリのような煩わしい作業は必要ない。サーチエンジンに登録可能PWAはインターネット上に存在するウェブサイトなので、Googleといったサーチエンジンに登録することも可能である。Webアプリケーションを訪れる人が多くなれば検索の上位に表示される可能性も高くなるし、上位に表示されるようになればアプリを利用するお客さんも増えるだろう。Webアプリはユーザビリティを第一に考えて画面構成を考えるべきなので、SEOで評価されるようような画面を構築するのは難しいかもしれない。ユーザの視点から見た違い次にユーザ側から見たPWAとネイティブアプリについて考えてみよう。一部のモバイル機能は利用できないパフォーマンスの面では劣るインストールが容易まず最初に挙げられる点はインストールが簡単であるという点だ。PWAアプリをインストールするためには、任意のブラウザで目的のサイトを訪れURL入力欄の次に表示されているインストールボタンをクリックすればいい。インストールの速度はネイティブアプリもよりも数倍速い。一部のモバイル機能は利用できないスマートフォンの進化に伴い、モバイルで出来る事も増えている。例を挙げるなら「携帯電話を使った支払い」や「ユーザ名をタップして直接電話をする」などが挙げられるだろう。これらの技術はネイティブアプリであれば簡単に実装できるが、PWAアプリで実装するのは現時点では難しい。PWAは発展途上にある技術であり、今後これらの弱点を補うような技術が開発される可能性もあるものの、機能重視のモバイルアプリを開発するならばネイティブアプリを開発したほうがいいだろう。パフォーマンスの面では劣るPWAはパフォーマンスの面ではネイティブアプリに劣る。application)はブラウザで動くことを前提としている、PWAアプリは疑似ブラウザ内でJavaScriptを動作させるためにネイティブアプリと比較するとパフォーマンスの面で劣ることがある。これが写真にエフェクトを掛けるなどといった負担が掛かる処理を必要とする場合の話であり、そういった高度な処理が必要ないならばPWAアプリは悪い選択肢ではないだろう。AngularでPWAを実装するここからはAngularをPWA化するための手順を確認しよう。Angularプロジェクトを作成するまずはPWAの元となるWebアプリを作成しよう。Webアプリの内容はどんなものでも構わない。ここでは例として、クリックする度に色が変わるボタンを配置したアプリを作成した。AngularアプリをPWA化するAngularでは、ライブラリを使用してPWAを簡単に実装することができる。以下のコマンドをターミナルで実行しよう。@angular/pwaこれにより以下のファイルが自動で作成される。Workerを起動する際に必要となる設定をまとめたJSONファイル。Workerについて知りたい人はこちらの記事を参考にしてほしい。manifest.webmanifestmanifest.webmanifestはPWAアプリを開く際に必要となる画像などのリソースファイルをまとめたマニフェストファイル。以下のファイルの内容がアップデートされる。angular.jsonpackage.jsonindex.htmlapp.module.tsアプリをローカルで動かすpwaコマンドを実行したら、アプリをローカルで動かしてみよう。serve」では動かすことが出来ないので他の方法でアプリを実行しよう。buildビルドされたアプリが「dist」フォルダ内に作成されたはずなので確認する。http-serverライブラリをインストールする。http-serverターミナルで「dist/アプリ名」のフォルダに移動し、http-serverコマンドを実行する。http-server生成されたURL(http://127.0.0.1:8080)をクリックして開き、アプリが正常に起動しているか確認する。Worker」をクリックする。Workerが登録されていることが確認できるだろう。Storage」をクリックする。アプリの再生に必要となるファイルがキャッシュされているのが確認できるだろう。PWAが正常に動作していれば、URLの入力バーの右端に以下のようなアイコンが表示されているだろう。アイコンをクリックして「」を選択すればPWAアプリがアプリケーションとして開かれる。アプリケーションとして開いたPWAアプリは、ショートカットを作成したりタスクバーにピン留めすることが可能となる。執筆者:久野嘉樹ドイツ・ベルリン在住のフロントエンド・エンジニア。ドイツにてプログラマのための職業訓練プログラム(インターン2社を含む)を終了したのち、医療関係のソフトウェア会社にてフルスタック・エンジニアとして、様々な開発現場に参加する。現在はドイツの大手SIerにてシニアデベロッパーとして有名企業を顧客とする大規模開発に従事する。Java・TypeScriptをメインに業務管理ソフト・ウェブアプリケーションやAndroidアプリなどの開発経験を持つ。現在はSPA(シングルページアプリケーション)のスペシャリストとしてAngularをメインにフロントエンドの開発に携わる。2009年よりドイツに在住。ドイツ語能力はC1レベル。関連する記事WebRTCとはどんな技術?仕組みやWebSocketとの違いを説明。2022.01.22この記事では、ウェブアプリケーションにビデオチャット機能を実装するために欠かせないWebRTCについてその仕組みとユースケースなどを説明したい。Token)とは?トークンのデータ構造と暗号化の仕組み。Token(以下JWT)について説明する。JWTは特にウェブの世界を中心[...]同一オリジンポリシーを理解する。2022.02.06この記事では、同一オリジンポリシーとCORSについて初心者向けに分かりやすく説明する。【2023年】TypeScriptのおすすめ書籍5冊!レベル別に入門書からプロ向けまで紹介。2023.05.14【2023年】JavaScriptのおすすめ本7選!入門者・初心者向けにセレクト。2023.03.04HTMLテーブルで表をデザインする!セルの結合・枠線を付ける・レスポンシブ対応など。2023.01.21CSSグリッドレイアウトを極める!基本的な使い方とプロパティの一覧。2023.01.07【2023年】人気のヘッドレスCMSを徹底比較!Contentful・Strapi・Hygraphなど。JSフレームワーク徹底比較!JavaScript実践VSCodeでReactの開発を行う!React開発者のためのオススメ拡張機能。同一オリジンポリシーを理解する。APIコラム海外エンジニアエンジニア論PC。