PWA ~ネイティブアプリのようなウェブアプリ~

PWAとは

プログレッシブウェブアプリ(Progressive web apps)は
ネイティブアプリのように振る舞うウェブアプリの事を指しています。

これはGoogleが始めたもので、
FIREとよばれる4つのユーザー体験を提供する事を目的としています。

※FIREとは
  • ・Fast: パフォーマンスの良い、軽快な動作
  • ・Integrated: OS と統合されたユーザー体験
  • ・Reliable: オフラインでも動作する利便性と信頼性
  • ・Engaging: Web サイトの価値向上 高速で信頼性の高いエンゲージメント

    最も印象的な機能はインストール機能です。
    PWAはアプリストアを通さずにアプリをインストールでき、
    ネイティブアプリと同様にホーム画面にアイコンを表示できます。

    ユーザーはお気に入りのウェブアプリをホーム画面のアイコンから起動する事ができます。

    導入しているサイトとしてはTwitter, Qiita, アメーバブログなどがあります。

メリット

前述したインストール機能を含めて、メリットとしては以下が挙げられます。
  • ・アプリストアを通さずにインストールができる
  • ・オフラインでも機能させる事ができる
  • ・プッシュ通知が行える
  • ・表示速度を向上させられる

デメリット

デメリットとしては以下が挙げられます。
  • ・iOS(safari)ではバグやPush通知不可などの致命的な欠点がある
  • ・インストール数の管理が出来ない
  • ・Push通知に許諾が必要となり、ユーザーにストレスのかかるUXになりやすい
  • ・PWAに対応した広告商材が少ない


\ ログインしなくても検討機能が使える♪ /
新着のエンジニア案件を見てみる

PWAの構成

主な構成要素は3つあります。

SSL対応済のウェブアプリ

HTTPSに対応していないウェブアプリの場合、PWAではエラーが発生し有効になりません。

Service Worker

アプリの振る舞いを制御するJavaScriptを指します。
これはアプリ内で実行されているJavaScriptとは別スレッドで動作する為、
Service Workerでアプリ内のDOMにアクセスする事はできません。

Manifest

PWAの設定(アプリのスコープや
概要、言語、サムネイル、表示方式など)を行うJSONファイルです。
この3つを揃えるとPWAを開始できます。

開発に便利なツール

Workbox

利用する事でService Workerのコードを生成してくれるGoogle製のライブラリです。
ドキュメントが充実しているので、導入しやすくなっています。
https://developers.google.com/web/tools/workbox

PWA Builder

マイクロソフトが提供している開発ツールです。
SSL化されているWEBサイトであればこのツールを利用してPWA化する事ができます。
https://www.pwabuilder.com/
いかがでしたか?

まとめ

いかがでしたか? 今回は、WEBアプリとネイティブアプリの中間的な位置にあるPWAをご紹介しました。 ネイティブアプリを作りたいけどコストを抑えたい/お試しでやってみたい。
そんな方はまずはPWAで開発してみてはいかがでしょうか。
WEBアプリ → PWA → WebViewネイティブアプリ → ネイティブアプリという具合に段階を踏むのもオススメです。 【お知らせ】 現在、エンジニアルートではフリーエンジニアを中心とした、フリーランスの お仕事紹介、お悩み相談を承っております。


一対一のカウンセリングに基づき、スキルやキャリアプランなどのご要望をお伺いしピッタリの案件をご提案します。ご参画中のご相談・節税対策、適正な給与なのか知りたい、マージンを下げたいなど何でもサポートをいたします。

案件獲得までには早ければ1〜3日、平均的に2週間以内には複数案件から選べる状況になっています。将来的な独立の相談のみでも承っております。お気軽な気持ちでご登録ください。 ↓お仕事をご要望の方は、下記バナーより新規登録をお待ちしております。非公開求人多数です。

よく読まれている記事

「技術者の視点」でよく読まれている記事