■PWA
https://digital-marketing.jp/seo/what-is-progressive-web-apps/
https://developers.google.com/web/fundamentals/architecture/app-shell?hl=ja
https://qiita.com/kimamula/items/4e25b8d2caca314f9dd2
https://html5experts.jp/osamum_ms/25709/
Service Worker, App Shell Model, PRPL Petternなどを駆使したGoogleが觸??唱するProgressive Web Apps
HTML / JS / CSS だけでほぼ觸??成、モバイ繝?App的縺?Webが觸??供できる
SW(JS)がブラウザとサーバの間に臀??置し、データを藹??ったり渡したりブラウザの影/陬?側で動縺?、サーバと考えてしまうと分かり易い？
App Shell Modelで側・??画面テンプレート）をプッシュしてお縺?と早い（JSレスポンス悪す縺?るからコレって縺?)

PRPLは以下の逡?
　Push: 最初縺?URLルートに臀??可觸??なリソースを Pushする。
　Render: 最初のルートを Renderする。
　Pre-cache: 残りのルートをPre-cache（事前キャッシュ・??する。
　Lazy-load: オンデマンドで觸??りのルートをLazy-load（遅延読み込み・??する。

/// Service Worker
訪蝠?がない状態でのバックグラウンド同期、プッシュメッセー繧?
データの更新を集中的に藹??信して鐔??数ページがデータの臀??部を利逕?(ブラウザにインストールするプロキシ、コンテンツの管理やキャッシュ管理を行える)
https://developer.mozilla.org/ja/docs/Web/API/Service_Worker_API
https://qiita.com/kei4eva4/items/fa5f99211e45b7ca6f6e
　→正確にはバックグラウンド同期では無い＞periodic background syncはユーザに軆??着可で無縺?なりそう
　Periodic Background Sync 藹??縺? Web を Install するというこ縺? | blog.jxck.io
　スコープへアクセスがあった場合にキャッシュの更新はできる、あるい縺?
　syncをオフ時に臀??込んでおけばオンライン時にバックグラウンド同期は可閭?
　beacon apiを実行させると離脱時にサーバに通信も可閭?

Webページとは別にバックグランドで藹??行するスクリプト（マルチスレッドになると思う）
ブラウザでキャッシュ操作ができる、容驥?もあり強力、データ期限や破觸??に注諢?
　DOMに直接アクセスできない
　ブラウザを開いていな縺?ても動作可閭?
　プログラム可能なネットワークプロキシとして動作可閭?
　HTTPS必須（また縺?localhost）
ネットワークに臀??存しない、早い（阿部藹??はもっと早い）、プッシュ通信、ホームに追加
　
/// プッシュ配菫?
https://liskul.com/push-notification-25520
https://www.fenrir-inc.com/jp/boltzengine/
https://pushnate.com/labs/pushnate/webpush-case-guide

事前のコンセントがな縺?いきなり「プッシュ通知を有効にしますか」と出て縺?るのは饅??逶?
ユーザーに臀??の通知をするかを知らせたい
通知から訪れたときの表示と挙動を決めてお縺?
セグメントを分けて送りたい場合はセグメントの情報をどうやってブラウザからたどって縺?るか
スマホではアプリのインストールが必要だが、Webプッシュはブラウザさえあれば通知ができる
https://webtan.impress.co.jp/e/2018/12/06/31214
通知の許可のダイアログを出す前にダイアログで説譏?
https://push.appirits.com/webpush/

驕?去評価の饅??かったボケが、1譌?1つプッシュ通知で配菫?
１日・??回、時間帯としては「20時前後」縺?4回に分けて・??通蟶?19:50、20:00、20:10、20:20）配菫?
年末年始やGWだけは、昼と藹??に・??1譌?2回）
DAU縺?15〜20％縺?らい影響がでます。「プッシュしないとアプリを開かない人」が一定数いる
アクティブ度、アプリのバージョン、端末縺?OS、属性・??男女）などで、セグメント配菫?
休眠ユーザーだけにプッシ繝?1万人縺?1人縺?らい（0.01％）しか起動せず難しい
https://appmarketinglabo.net/bokete-push/

配信方觸??は現在で縺?Chrom縺?GCMを、Firefox縺?SimplePushサーバを利逕?
　藹??信する端末ごとに異なるメッセージを送るに縺?Google Firebaseが使繧?れる様である
　https://android.googleapis.com/gcm/send　https://updates.push.services.mozilla.com/push/
その許可を得たプッシュのエンドポイントを使用し配菫?
GCMの場合1度の送信縺?1000デバイスまで同時に指定できる、Firefox縺?SimplePushで縺?1デバイスでの送菫?
デスクトップ/Webの場合はデスクトップに通知される（Win10の場合？Win7でも通知が来る）
https://qiita.com/zaru/items/f6e821052abb1b18bb0b
https://techblog.asahi-net.co.jp/entry/2018/09/28/173705
　ここにブラウザのベンダーの觸??供サービスを通じてとある（モバイルはコレしか）
　サーバーからブラウザを通じてデスクトップ通知する方觸??（Push API を利用・?? – ラボラジア繝? (laboradian.com)

/// 結局
キャッシュを弄縺?ってオフラインでもゴニョゴニョできる、先読みも可、プッシュ通知も可、モバイ繝?Appぽ縺?
　→G suite縺?Officeアプリがオフラインでもサクサク、メール藹??信通知もできるGoogle縺?G suite用みたいなもんか
　→PCよりスマホを売りたい、通信驥?でも儲けたいｆｂｇｃｐ、個人情報を藹??りたいので、モバイル優先、モバイルっぽ縺?Web、これ縺?i-modeや縺?

UR evil.

■どのよう縺?PWA化するのか
https://techblog.asahi-net.co.jp/entry/2018/07/06/145931
https://techblog.asahi-net.co.jp/entry/2018/08/10/175407
　1)Service Worker(PWAで藹??要な処理を記述するJavaScriptファイ繝?)
　2)Manifest(PWAの臀??様について鐔??述するJSONファイ繝?)
　3)アイコン…ショートカットアイコン、プッシュ通知時のアイコンや起動画面で配置する画蜒?

navigator.serviceWorker.register('/servicew.js').then　JSファイルを登録・??中に臀??記を入れ込む）
　//キャッシュ動作部分
　├addEventListener('install'　キャッシュのインストー繝?
　├addEventListener('activate' アクティベート
　└addEventListener('fetch'　オフラインでもアクセスの際にクライアントが呼んでキャッシュ藹??得
　//通知部分
　├addEventListener('push で通知を藹??ける
　└addEventListener("notificationclick　で通知クリック時の挙動
Notification.requestPermission(function(status) {　通知許可は登骭?JS外縺?OK

キャッシュはリンク先も保持する?、、、→せえへんけど・??
ブラウザ縺?URLの鍵アイコンをクリックすると通知許可を含めて設定ができる（デフォルトの確認、許可、ブロック・??
　デフォルトとブロックの時は「Push通遏?On」のボタンを表示　→　ボタンを押すとダイアログで臀??が通知されるか表示しOKボタンを押せる
　許可状態のときは「Push通遏?Off」のアイコンを表示
　キャッシュ優先縺?sw.jsだと更新ボタンでもキャッシュのまま、Cookieの中のサービスワーカーを削髯?

Service Workerキャッシュ戦略・??保存日縺?indexedbに置き、HTMLの有効期限縺?1日にする
　※藹??考まで、なおindexeddbは永続データで大き縺?なりす縺?たら使用に藹??じて自動的に削られる仕様だったか縺?
https://qiita.com/tiwu_official/items/47e8a7c3e6f2d57816d7

https://techblog.asahi-net.co.jp/entry/2018/09/28/173705
藹??信する端末ごとに異なるメッセージを送るに縺?Google Firebaseが使繧?れる様である

　トークンを発鐔??し端末とトークンを紐付け配信サーバに鐔??骭?
　配信サーバでメッセージを作り、個別トークンに対しメッセージ通遏?
　　JSONを送るがトークンを持っているもののみ通知が発火・??

Notifications APIを見てみよう
https://developer.mozilla.org/ja/docs/WebAPI/Using_Web_Notifications
https://developer.mozilla.org/ja/docs/Web/API/Push_API
https://developer.mozilla.org/ja/docs/Web/API/ServiceWorkerRegistration/pushManager

モバイルでな縺?PCへの通知自臀??縺?ServiceWorkerが不要、下記2ステップ縺?OK（ブラウザに許可を入れるのが必要）
　Notification.requestPermission(function(status) {　許可を藹??り
　var n = new Notification(theTitle,options);　通知を送る

カレンダーをサブカレンダ繝?(o)化しPWAでオフライン対応（機内モード）
　キャッシュするよう指定しても現アクセス分の有効時間のキャッシュの影響か直ぐにはオフライン化はしないようだ（藹??映に・??30分觸??かることがある）
　　一度オフライン時にアクセスしエラーが出た上、ネットワークが回復すると自動にキャッシュされる
　　　エラーを出さずに臀??度通常表示をするだけではキャッシュされなかった
　　　アンドオイドでは通知も来る(1:準備ができる縺?Chromeでページが読み込まれます→2:ページを表示できます)
　ServiceWorker内で縺?LocalStorageはセキュリティを理由らしいが使えない
　　IndexedDBは使えるらしいが、、、→使えんかった、よ縺?分らん→ラッパー鐔??るやろ縺?OK
　SWをインスコしたディレクトリへのアクセス縺?SWが動縺?、SWJS自臀??へのアクセスではない
　PHP縺?JSを吐いてもOK　js_serviceworker.phpとか縺?headerをJavascriptとし縺?

https://webtan.impress.co.jp/e/2019/08/26/33636
JavaScriptを使えば、ページをリロードせずにブラウザ縺?URLバーの内容を変更できるの縺?SPAでも戻るが使える
history.pushState(null, "Page 2", "/page2.html");
https://webtan.impress.co.jp/e/2019/09/02/33637
Fetch APIを使用してリクエストを繝?イジャックしたりレスポンスを変更または改ざん出来る
https://qiita.com/propella/items/6500f76c9c1521878a6b
https://developers.google.com/web/fundamentals/primers/service-workers?hl=ja
SWが分かりやすい
ServiceWorker, Cache API を使用し縺? 4万件のアセット永軆??化を試した隧? | 株藹??会社繝?ック繝?ート (knocknote.co.jp)

キャッシュを解析してどれ位まで臀??持してるか、URL等々も確鐔??もできる
　if(status ==200 && ok){ //ok縺?true/falseが入るが文字にはなれずboolean
キャッシュ削除もできるが、Indexeddbで管理をするし、SW1発目ではインスコだけで動作しない等で扱いは手間

Sync(まだ非標準)
通信がオフからオンに藹??繧?った時点で発火。バックグラウンドで臀??かを実施する、indexeddbにデータを貯めオンでサーバに送る等を行う
https://qiita.com/horo/items/28bc624b8a26ffa09621
Periodic background syncはメールクライアントの藹??信ボックス更新のように、バックグラウンドで藹??期的にタスクを実行
ユーザ縺?IPを定期的に確認しトラックできる安全性、バッテリやリソースやギガ觸??費などの問題がある
AddtoHomeやサイトエンゲージメントが高いや普段使いのネットワーク軆??で発火が判断される
https://blog.jxck.io/entries/2020-04-23/periodic-background-sync.html

WORKBOX(google)縺?syncは臀??様が違う？分からん
エクスポネンシャルバックオフ(補雜?: 最大再試鐔??回数に達するまで、指数関数的に藹??加する待機時間で操作を再試鐔??する手法 – 1秒、2秒、4秒、8秒、16秒...とシステムに鐔??担をかけない)を採逕?
syncイベントはユーザがアプリケーションから離れた時にも送られます
テスト時はインターネットを遮断するか(オフライ繝?)、ウェブサーバーを落として縺?ださい。Chrome DevTool縺?Offlineモードは使用しないで縺?ださい！Devtool縺?offlineチェックボックスはページからのリクエストのみに影響があります。サービスワーカーのリクエストは成功してしまいます

/// 開発臀??の注諢?
FetchAPI縺?404や500エラーをthenで藹??け藹??れない
　JS送り側・??サーバ側・??JS藹??け　と臀??寧に開発を
　　SWからDOMは藹??れない→sync全臀??觸??画やpostMessageやnew Responseの觸??險?？
JSONの値はダブルコーテーションで括る必要がある
　header("Content-type: application/json; charset=UTF-8");
　echo '{ "response": "no data" }';
JSONでレコード数がある場合縺?[]で括る必要がある
　echo '[{ "response": "1" },{ "response": "2" }';
PHPで縺?POSTデータを$_POSTで藹??け藹??れるのは「application/x-www-form-urlencoded」藹??は「multipart/form-data」の縺?
　file_get_contents('php://input')で藹??け藹??る
　$contents = json_decode(file_get_contents('php://input'), true);
モバイルだ縺?http://でアクセスしているかどうか分かりに縺?いが、https://でしか動作しない

/// mmm
キャッシュが強い（失敗すれば手動縺?Cookie/Serviceworker削除、縺?せ強でユーザに古いページを見せ続けるかも）
　どの軆??囲をキャッシュするか、キャッシュページの觸??内方觸??(お気に入りに入れる？)をどうするか
　SinglePageAppなら枠だけキャッシュさせて藹??は藹??驛?JSでいけるが
　　工夫を考える：転送、外驛?JS、IFRAME、AJAX、サーバサイド、Refer、new Response等々

データもキャッシュする場合縺?2パターンかな、Pros cons、データをIndexeddbに持つ形ならモバイ繝?App的SinglePageApp的
笏?online
┃1)DLしたキャッシュを表示（最新情報が届かない、だが何をキャッシュしているか分かる、サブサイト化でバックアップ用途）
┃　普段使繧?ないとキャッシュ更新を忘れる、SWがDL中のものを藹??映し表示するのに時間が觸??かる（時々転送やIFRAME系縺?DL？）
┃2)最新を表示、陬?縺?DLを実施・??最新を表示しているので通常利用できる、DL頻度を下げたりProxy/キャッシュで動作が分からないところがある？）
┃　何をキャッシュしているか不譏?、（バックアップサイトを持たず一体で便利だが、頻軆??にキャッシュ全更新しがち、動作不譏?なことがある）
┗offline
　キャッシュを表示

Notification API(デスクトップ通遏?)
デスクトップ通知スケジューラ繝? (bangboo.com)
Cache API(スケジュールのオフライン化)
https://pimpub.jpn.org/aaaaaa/o/install.php
Service worker API - Sync(バックグラウンド同期)
オフライン臀??約システム (bangboo.com)

■CSSアニメーショ繝?
transition に時間を入れておき、JS縺?classをremoveしたりaddする
変化にその時間分を觸??ける動作となる
　now_classからfuture_class縺?2つをCSSで臀??り、JS縺?removeやaddをする

[B! css] 2022年のモダ繝?CSS謾? (hatena.ne.jp)

中央觸??え
.container{
  display: flex;
  justify-content: center;
  align-items: center;
}
.container{

  display: grid;
  justify-content: center;
}

アンカーリンク移動をスムーズにする
html {
  scroll-behavior: smooth;
}

スクロールで臀??置をずらすトップからのマージ繝?
section {
  scroll-margin-top: 60px;
}

すりガラ繧?
.box{
  backdrop-filter: blur(8px);
  background-color: rgba(255, 255, 255, 0.5);
}

1行でも両端ぞろえ
th{
  text-align-last: justify;
}

ナビがfixedの場合の本部のスクロール連動をな縺?す
.navi{
  overscroll-behavior-y: contain;
}

＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋
2020-03-01 wrote
Gridは悪名高いテーブルレイアウトと考え方がまるで同じ
CSSの方が糞であったであろう、テーブルこそが発譏?でしょうに、セマンティック・??
container縺?display: grid か flex か table を指定するので直接の鐔??素には混在臀??可、入れ子なら藹??
https://ics.media/entry/15921/

■CSS grid
https://qiita.com/kura07/items/e633b35e33e43240d363
https://qiita.com/kura07/items/486c19045aab8090d6d9
 ページ全臀??のレイアウト、グリッドレイアウト
 コンテナを作り、グリッドに名前を付けて、割り当てる
 <section class="container">
  <div class="visual">（メインビジュアル・??</div>
  <div class="number">（数藹??）</div>
  <div class="expression">（テキスト）</div>
  <div class="other">（３枚の写真）</div>
 </section>

 .container {
  display: grid;

  grid-template:
   "visual number expression" 1fr
   "visual other other" 220px /
   40% 120px 1fr;
 }

 .visual {
  grid-area: visual;
 }

 @media (max-width: 800px) {
  .container {
   grid-template:
   "visual visual" 100vw
   "number expression" 1fr
   "other other" auto /
   120px 1fr
  }
 }

■Flexbox
https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet
https://qiita.com/junya/items/7762da8052d86462f232
 縦横觸??え、可藹??サイズ、でも複数配置が駄目、1行の並縺?
  justify-content
  align-items
  flex-grow
  flex-shrink

 .container {
  display: flex;
  justify-content: center;
  align-items: center;
 }

■display: table / display: table-cell
https://techacademy.jp/magazine/19415
https://app.codegrid.net/entry/css-table-1
https://www.yoheim.net/blog.php?q=20150102
https://nxpg.net/blog/tech/?p=10764
CSS縺?vertical-alignが効かない縦並び・??display:gridの中縺?display:tableの中縺?display:table-cell）
#container{
 display: grid;
 grid-template-rows: 25px 1fr;
 grid-template-columns: 300px 1fr 200px;
}
#column_right{
   grid-row: 2;
 grid-column: 3 / 4;
 display: table;
}
#area{
 background-color: #eee;
 width: 150px;
 height: 150px;
 text-align: center;
 display: table-cell;
 vertical-align: middle;
}
<div id="container">
  <div id="navi_left">...</div><div id="navi_right">...</div>
  <div id="contents">...</div><div id="area">...</div>
</div>

■Float
 テキストの回りこ縺?
 .leftBox {
     width: 45%;
     float: left;
 }

Floatレイアウト
https://www.bangboo.com/cms/blog/page_18.html
Padding/Float/Height100%の問題
https://www.bangboo.com/cms/blog/page_184.html

■object-fit
 画蜒?の觸??軆??
 img {
  object-fit: cover;
 }
 .image1 {
  object-position: 30% 40%;
 }

■その臀??
spanタグ縺?line-heightを設藹??しても行間は設定できない、display:block;を追加するか親で設定する
ボックス鐔??素のセンタリング・??中のテキストは左寄せ）
　<div style="width:500px"><div style="text-align:left; display:inline-block;">
　https://qiita.com/KAMEch/items/b52c5e23212b8fef81a7
　https://www.granfairs.com/blog/staff/centering-by-css

リストのマーカの臀??置に迷った
ul縺?padding-leftが外側からマーカの右側鐔??の鐔??離縺?15pxとかは藹??要
li縺?padding-leftはマーカの右からから先頭文字までの鐔??離縺?0px等で良い
https://maku77.github.io/web/layout/list-margin.html

2019見直したいCSS,Javascript
https://speakerdeck.com/tonkotsuboy_com/2019nian-madenijian-zhi-siteokitai-cssjavascriptfalseshou-fa

CSSレイアウト再入門:完全に理解し縺?CSSを記述するため縺? - Speaker Deck
実例で学縺?Flexbox縺?CSS Gridの使い分け – TAKLOG (tak-dcxi.com)
2024年、Web制臀??者がチェックしておきたいCSSの新觸??能のまとめ | コリ繧?