![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
#author("2021-03-31T02:04:56+00:00","default:admin","admin") #author("2021-06-28T11:29:24+00:00","default:admin","admin") -[[PWA（Progressive Web Apps）とは？PWAの機能と導入するメリットについて:https://www.seohacks.net/basic/terms/pwa/]] -[[PWAの6つの成功事例と、事例から見えた導入すべきサイトの特徴:https://liskul.com/pwa-casestudy-63173]] -[[スマートフォンアプリの代わりになる！？グーグルが進めるPWA(Progressive Web Apps)とは:https://digitalidentity.co.jp/blog/creative/progressive-web-apps.html]] -[[【PWA導入成功事例9選】PWAとネイティブアプリは何が違う？:https://yapp.li/magazine/3175/]] -[[PWAの作り方をサクッと学ぶ - 「ホーム画面に追加」「キャッシュ操作」「プッシュ通知」の実装:https://employment.en-japan.com/engineerhub/entry/2019/10/24/103000]] -[[PWAを試してみよう:https://qiita.com/poruruba/items/77cbb6448d804e6e996b]] -[[Nuxt.js で PWA(Progressive Web Apps) のベースアプリを作る:https://riotz.works/articles/lulzneko/2019/05/09/develop-base-app-for-pwa-with-nuxtjs/]] -[[通知とプッシュを利用して PWA を再エンゲージ可能にするには:https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps/Re-engageable_Notifications_Push]] -[[【PWA】webプッシュを使って、更新通知を行えるようにする:https://usomitainikagayakumachi.tokyo/2019-03-07_pwa_web_push/]] -[[プログレッシブ Web アプリケーションの継続的デプロイメント:https://circleci.com/ja/blog/cd-for-pwa/]] *概要 [#xa52538c] -WebページをPWAとして設定することで以下のことができる --Webアプリなのに、ネイティブアプリのように Android/Windows にアプリとして登録することができる --アドレスバーのようなブラウザっぽさはなく、全画面でネイティブアプリのように起動することができる -PWAのService Workerの機能を使った実装をすることで、以下のことができる --Webコンテンツをキャッシュ化することができ、オフラインで動かすことができる --サーバ側からPush通知ができる(iPhoneを除く) **オフライン対応 [#p69d7db6] ***オフライン対応必須 [#vdc85f49] -[[Improving Progressive Web App offline support detection:https://developer.chrome.com/blog/improved-pwa-offline-detection/]] -[[ChromeのPWAインストール要件が変更に、オフライン対応必須。Chrome 89で警告:https://www.suzukikenichi.com/blog/pwa-installability-criteria-changes/]] -Chrome は次をチェックする --Service Worker がそのページにインストールされていること --Service Worker が fetch イベントを設定していること --インストールした Service Worker の fetch イベントが、シミュレーションしたオフラインモードで 200 の HTTP ステータスコードを返すこと -上記を満たしていないと、Chrome 89 以降は警告が出る -Chrome 89 以降のデベロッパーツールで検証可能 -Chrome 93 以降ではインストールができなくなる **Service Worker [#o8a2134d] -[[Service Worker の紹介:https://developers.google.com/web/fundamentals/primers/service-workers/?hl=ja]] **iOS [#z1fb5ae4] -[[モバイルPWAのステータス in 2020:https://superhahnah.com/pwa-status-2020/]] -[[iOSにも対応してる？PWAの最新事情を徹底解説:https://schecon.com/article/?p=1342]] -[[iOS Safari Push Notifications 2021: Are We There Yet?:https://www.izooto.com/blog/ios-safari-push-notifications-in-2021]] ***iOSのPWAの対応状況 [#e6258df3] -iOS 12.2 で以下の機能が実装された --スワイプで戻ることができるようになった（いわゆるナビゲーションジェスチャ） --OAuth 認証ができるように（SNS ログインの不具合が解消された） -iOS 13 からは以下の機能も追加されている --URLのツールバーを隠せるようになった（ネイティブアプリ風のユーザーインターフェース） --共有ボタンが更新され「ホーム画面に追加」するボタンがわかりやすくなった --Apple Pay が利用可能になった ***PWA を iOSで使う注意点 [#gc0992f0] -PWAはもともとはApple発のサービスではない（Google発？） -AppleはSafariへの機能追加にかなり慎重 -2020年7月には、フィンガープリンティングの懸念から、いくつかのWebAPIの実装を拒否するというアナウンスがされている -BluetoothやNFC、バックグラウンドでの位置情報取得なども拒否する方向 -例えば、Appleのブラウザのセキュリティ機能（ITP）が強化されて、7日間アクセスのないデータは削除されるようになった -Google が PWA で実現したい「二回目以降はオフラインでも起動できる」という仕様に反している *開発 [#lee2f1ef] **JavaScript [#qfcbaa53] -[[はじめてのプログレッシブウェブアプリ:https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp?hl=ja]] -[[PWAをもっと簡単に初めてみる:https://qiita.com/poster-keisuke/items/6651140fa20c7aa18474]] -[[Nuxt PWA - Nuxt.js:https://pwa.nuxtjs.org/]] -[[Nuxt.js で PWA(Progressive Web Apps) のベースアプリを作る:https://riotz.works/articles/lulzneko/2019/05/09/develop-base-app-for-pwa-with-nuxtjs/]] -[[作ったら始まるNuxtでPWAものがたり:https://qiita.com/Shino3/items/480b2c182a92baa8a117]] -[[Nuxt.jsとFirebaseで爆速でPWA対応Webアプリを開発した話:https://qiita.com/_takeshi_24/items/0b0155e01d5b6973c201]] -[[Next.js で作成した Web アプリを PWA 対応する:https://dev.classmethod.jp/articles/next-js-pwa/]] **C# [#ae9ec771] -[[ASP.NET Core Blazor WebAssembly を使用してプログレッシブ Web アプリケーションをビルドする:https://docs.microsoft.com/ja-jp/aspnet/core/blazor/progressive-web-app?view=aspnetcore-5.0&tabs=visual-studio]] -[[C# PWA対応のBlazor WebAssemblyをVSCodeでデバッグするには:https://wonwon-eater.com/blazor-debug-vscode/]] -[[BlazorのPWAを使ってみた / Tried using PWA - Speaker Deck:https://speakerdeck.com/takahiro901/tried-using-pwa]] -[[［速報」Blazor WebAssemblyが正式リリース。C#/.NETでWebアプリケーションを開発可能に。Microsoft Build 2020:https://www.publickey1.jp/blog/20/blazor_webassemblycnetwebmicrosoft_build_2020.html]] *事例 [#kba53049] -[[「サルでもわかるGit入門」がPWAに対応しました:https://nulab.com/ja/blog/backlog/sarugit-for-pwa/]]
