Skip to content

DNET_PWA

Jump to bottom
nishi_74322014 edited this page Sep 11, 2026 · 1 revision

PWA（Progressive Web Apps）

概要

  • ネイティブアプリとWebアプリの中間のようなアプリ

  • 今後、Web View に wrap したダケの
    SPA（(MV*) UIフレームワーク）はPWA化されてゆく可能性が高い。

特徴

特徴は大きく分けて四つ。

高速な表示

貧弱なネットワーク環境でも使用できる

インテグレーション

  • インストール
  • ホームに追加

信頼性

ネットワークに依存しない作り

エンゲージメント性

JS ライブラリが提供される。

  • ログイン（パスワード・マネージャと連動）
  • プッシュ通知（ネイティブのプッシュ通知とは異なる）
  • 支払い（Google Payなどストアの支払い機能による）

メリット

提供者側

基本的に、ネイティブより利用率が上がる。

  • 基本的にWebなので

    • コンテンツを検索エンジンで見つけることができ、
    • URLでアプリやコンテンツを共有できる。

  • ネイティブ・ハイブリッド的側面を持つが、

    • すべてのデバイスで使え、

      • 古いWebブラウザでも基本的な機能は使用でき、
      • 最新Webブラウザではフル機能が使用できる

    • 多くのユーザーに使ってもらえ、

    • 表示が速いので直帰率が下がり、

    • プッシュ通知が使え開封率も高い。

利用者側

  • ストアからのインストールと比べすぐに使えるようになる。
  • ホーム画面にインストールしてアプリのように使える
  • 表示が速いので閲覧時のストレスがない

問題

ストア登録

  • アプリストアへの登録は別途必要
  • ただし、アップデート・リリース審査は不要

プラットフォーム

  • iOSではPWAで実装できる機能の一部が未対応
  • Windowsは、Chromeでサポート
  • Androidでも、ブラウザによる。
    （主なブラウザだとSafariが未対応）

事例

SUUMO

https://suumo.jp/

Twitter(Light)

...。

日経電子版

https://r.nikkei.com/

詳細

技術面

アーキテクチャ or プラットフォーム

  • アーキテクチャではなくプラットフォーム。

  • Cordova（Cordova (PhoneGap)）の側（皮）ネイティブに似ている。

  • ただし、ネイティブ・アクセスはCordovaより限られる。
    （ブラウザ側に公開されているネイティブ・アクセスのみ利用可能）

    • CSS3 (GPUを使用)
    • WebAssembly
    • WebVR (VR デバイスのセンサーと連動)
    • Web Payments (独自決済を簡単に作れる)
    • Web Authentication (指紋認証や顔認証)

アーキテクチャ面

HTML5アプリをホストする。以下の両方に対応。

インストール

  • インストールできるが、必須ではない。
  • アプリストアにアクセスする必要がない。
    （Google、Apple、Microsoftの各Storeに乗るように勧められている）

ネイティブ・アクセス

ネイティブ・ハイブリッドより制限される。

コンポーネント

Web Application Manifest

  • ClickOnceにもあったManifest的なもの（ただし、XMLではなくJSON）。
  • Webサイトのヘッダに以下があれば、PWAを利用可能。
<link rel="manifest" href="/manifest.json">

Service Worker

  • オフライン機能を実現するキャッシュ機能を提供するコンポーネント

    • キャッシュリストのリクエストのレスポンスをキャッシュ
    • キャッシュリストのリクエストをハンドリングしキャッシュを返す。

  • プッシュ通知
    ページがアクティブでない場合（離脱しているユーザ）にも通知が可能。

  • バックグラウンド同期
    キューのようなもので、ネットワークが接続された後に、処理される。

  • Service Worker のサポート状況

    • メジャーなブラウザであれば全て使える。
    • 今年、iOS の Safari と Microsoft の Edge が PWA に対応

※ ネットワークの品質が低い環境では、Web ページの表示に
　　Service Worker を使うだけでも十分メリットがある。

参考

Microsoft Store

microsoft.com

移行メモ

  • 「ホーム画面インストールして」は「ホーム画面にインストールして」、 「各Storeに乗るように推められている」は「勧められている」に正した。

  • 「プラットフォーム」の「Androidでも、ブラウザによる。（主なブラウザだとSafariが未対応）」は、 Safari が Android のブラウザではないため記述として整合しないが、 著者の意図（当時 Safari が未対応だったこと）を測りかねるため原文のまま残した。

  • マイクロソフト系技術情報 Wiki（techinfoofmicrosofttech.osscons.jp）への リンクは、移行済みの MS_WebAuthenticationAPI / MS_ClickOnce に張り替えた。

Tags: 移行, PWA, Progressive Web Apps, Service Worker, ハイブリッドアプリ, SPA, オフライン

このWikiは「Open棟梁Project」,「OSSコンソーシアム 開発基盤部会」によって運営されています。

NetDevInfraWiki

マイクロソフト系技術情報 Wiki
Open 棟梁 Wiki

（未着手）

開発基盤部会 Wiki

移行管理: DONE ／ TODO

Clone this wiki locally