PWA（Progressive Web Apps）
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]
開始行:
「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfras...
-[[戻る>ハイブリッドアプリ]]
*目次 [#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 (PhoneGa...
（ブラウザ側に公開されているネイティブ・アクセスのみ利用...
--CSS3 (GPUを使用)
--WebAssembly
--WebVR (VR デバイスのセンサーと連動)
--Web Payments (独自決済を簡単に作れる)
--[[Web Authentication>https://techinfoofmicrosofttech.os...
***アーキテクチャ面 [#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/i...
-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...
-Google I/O：プログレッシブウェブアプリ (PWA) の機能と成...
https://growthhackjournal.com/google-io-whats-going-on-wi...
-「改めまして、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）をアプリ...
http://www.itmedia.co.jp/news/articles/1802/08/news067.html
-Progressive Web Appの第一波がMicrosoft Storeに到着 | ソ...
https://www.softantenna.com/wp/windows/progressive-web-ap...
**microsoft.com [#l2d7f787]
-PWA と Windows 10~
https://developer.microsoft.com/ja-jp/windows/pwa
-Microsoft Docs
--Progressive Web Apps on Windows - Microsoft Edge Develo...
https://docs.microsoft.com/ja-jp/microsoft-edge/progressi...
終了行:
「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfras...
-[[戻る>ハイブリッドアプリ]]
*目次 [#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 (PhoneGa...
（ブラウザ側に公開されているネイティブ・アクセスのみ利用...
--CSS3 (GPUを使用)
--WebAssembly
--WebVR (VR デバイスのセンサーと連動)
--Web Payments (独自決済を簡単に作れる)
--[[Web Authentication>https://techinfoofmicrosofttech.os...
***アーキテクチャ面 [#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/i...
-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...
-Google I/O：プログレッシブウェブアプリ (PWA) の機能と成...
https://growthhackjournal.com/google-io-whats-going-on-wi...
-「改めまして、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）をアプリ...
http://www.itmedia.co.jp/news/articles/1802/08/news067.html
-Progressive Web Appの第一波がMicrosoft Storeに到着 | ソ...
https://www.softantenna.com/wp/windows/progressive-web-ap...
**microsoft.com [#l2d7f787]
-PWA と Windows 10~
https://developer.microsoft.com/ja-jp/windows/pwa
-Microsoft Docs
--Progressive Web Apps on Windows - Microsoft Edge Develo...
https://docs.microsoft.com/ja-jp/microsoft-edge/progressi...
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
