![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfrastructure.osscons.jp]]」は、「[[Open棟梁Project>https://github.com/OpenTouryoProject/]]」,「[[OSSコンソーシアム .NET開発基盤部会>https://www.osscons.jp/dotNetDevelopmentInfrastructure/]]」によって運営されています。 -[[戻る>ハイブリッドアプリ]] *目次 [#vf8df34f] #contents *概要 [#y5662024] -ネイティブアプリとWebアプリの中間のようなアプリ --オフラインで使えて、 --位置情報、プッシュ通知が利用可能。~ （ネイティブの[[プッシュ通知]]とは異なる） -今後、Web View に wrap したダケの~ [[SPA>(MV*) UIフレームワーク]]はPWA化されてゆく可能性が高い。 **特徴 [#b97d41f4] 特徴は大きく分けて四つ。 ***高速な表示 [#bcf48623] 貧弱なネットワーク環境でも使用できる -WebAPI -[[Service Worker>#y94100b1]]によるキャッシュ機能 ***インテグレーション [#xbcbdcab] -インストール -ホームに追加 ***信頼性 [#u2ac8eb8] ネットワークに依存しない作り -[[Service Worker>#y94100b1]]によるオフライン機能 ***エンゲージメント性 [#d6a7f173] JS ライブラリが提供される。 -ログイン（パスワード・マネージャと連動） -プッシュ通知（ネイティブの[[プッシュ通知]]とは異なる） -支払い（Google Payなどストアの支払い機能による） **メリット [#s1768f27] ***提供者側 [#bd97f1b2] 基本的に、ネイティブより利用率が上がる。 -基本的にWebなので --コンテンツを検索エンジンで見つけることができ、 --URLでアプリやコンテンツを共有できる。 -[[ネイティブ>スマホネイティブ]]・[[ハイブリッド>ハイブリッドアプリ]]的側面を持つが、 --すべてのデバイスで使え、 ---古いWebブラウザでも基本的な機能は使用でき、 ---最新Webブラウザではフル機能が使用できる --多くのユーザーに使ってもらえ、 --表示が速いので直帰率が下がり、 --プッシュ通知が使え開封率も高い。 ***利用者側 [#hbe27f9b] -ストアからのインストールと比べすぐに使えるようになる。 -ホーム画面インストールしてアプリのように使える -表示が速いので閲覧時のストレスがない **問題 [#r634e0b2] ***ストア登録 [#k400fd9c] -アプリストアへの登録は別途必要 -ただし、アップデート・リリース審査は不要 ***プラットフォーム [#j49a91c2] -iOSではPWAで実装できる機能の一部が未対応 -Windowsは、Chromeでサポート -Androidでも、ブラウザによる。~ （主なブラウザだとSafariが未対応） **事例 [#fef0a59b] ***SUUMO [#d90697bb] https://suumo.jp/ ***Twitter(Light) [#i8bdcb8f] ...。 ***日経電子版 [#sd9c9fc0] https://r.nikkei.com/ *詳細 [#t36eb718] **技術面 [#s7718d09] ***アーキテクチャ or プラットフォーム [#ccbcd278] -アーキテクチャではなくプラットフォーム。 -[[Cordova>Cordova (PhoneGap)]]の側（皮）ネイティブに似ている。 -ただし、ネイティブ・アクセスは[[Cordova>Cordova (PhoneGap)]]より限られる。~ （ブラウザ側に公開されているネイティブ・アクセスのみ利用可能） --CSS3 (GPUを使用) --WebAssembly --WebVR (VR デバイスのセンサーと連動) --Web Payments (独自決済を簡単に作れる) --Web Authentication (指紋認証や顔認証) --[[Web Authentication>https://techinfoofmicrosofttech.osscons.jp/index.php?Web%20Authentication%20API]] (指紋認証や顔認証) ***アーキテクチャ面 [#w5c68b00] HTML5アプリをホストする。以下の両方に対応。 -[[SPA>(MV*) UIフレームワーク]] (Single Page Application) -MPA (Multiple Page Application) ***インストール [#f56350bd] -インストールできるが、必須ではない。 -アプリストアにアクセスする必要がない。~ （Google、Apple、Microsoftの各Storeに乗るように推められている） ***ネイティブ・アクセス [#h2511d7f] [[ネイティブ>スマホネイティブ]]・[[ハイブリッド>ハイブリッドアプリ]]より制限される。 -キャッシュ利用 -位置情報 -プッシュ通知（ネイティブの[[プッシュ通知]]とは異なる） **コンポーネント [#gc8dfe82] ***Web Application Manifest [#wd7731b6] -[[ClickOnce>https://techinfoofmicrosofttech.osscons.jp/index.php?ClickOnce]]にもあったManifest的なもの（ただし、XMLではなくJSON）。 -Webサイトのヘッダに以下があれば、PWAを利用可能。 <link rel="manifest" href="/manifest.json"> ***Service Worker [#y94100b1] -オフライン機能を実現するキャッシュ機能を提供するコンポーネント --キャッシュリストのリクエストのレスポンスをキャッシュ --キャッシュリストのリクエストをハンドリングしキャッシュを返す。 -プッシュ通知~ ページがアクティブでない場合（離脱しているユーザ）にも通知が可能。 -バックグラウンド同期~ キューのようなもので、ネットワークが接続された後に、処理される。 -Service Worker のサポート状況 --メジャーなブラウザであれば全て使える。 --今年、iOS の Safari と Microsoft の Edge が PWA に対応 ※ ネットワークの品質が低い環境では、Web ページの表示に~ Service Worker を使うだけでも十分メリットがある。 *参考 [#j16ac525] -プログレッシブウェブアプリ | MDN~ https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps -Google I/O：プログレッシブウェブアプリ (PWA) の機能と成果 | Growth Hack Journal~ https://growthhackjournal.com/google-io-whats-going-on-with-progressive-web-apps/ -「改めまして、Progressive Web Appsと申します」~ ── Web UXの新たな基準を考える | HTML5Experts.jp~ https://html5experts.jp/uskay/25391/ -徹底解説！~ なぜ今PWA（プログレッシブウェブアプリ）~ が注目されているのか？ | モナカプレス~ https://press.monaca.io/bryan/1912 -【PWA導入成功事例9選】PWAとネイティブアプリは何が違う？~ MMU | アプリ開発・アプリ制作メディア~ https://yapp.li/magazine/3175/ **Microsoft Store [#nab49ef9] -Microsoft、年内に「Progressive Web Apps」（PWA）をアプリストアに追加へ - ITmedia NEWS~ http://www.itmedia.co.jp/news/articles/1802/08/news067.html -Progressive Web Appの第一波がMicrosoft Storeに到着 | ソフトアンテナブログ~ https://www.softantenna.com/wp/windows/progressive-web-app-microsoft-store/ **microsoft.com [#l2d7f787] -PWA と Windows 10~ https://developer.microsoft.com/ja-jp/windows/pwa -Microsoft Docs --Progressive Web Apps on Windows - Microsoft Edge Development~ https://docs.microsoft.com/ja-jp/microsoft-edge/progressive-web-apps
