サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
●はてなブックマークって？
●アプリ・拡張の紹介
●ユーザー登録
●ログイン
●ログアウト
localnavi
id:localnavi
●
7,893
ブックマーク
●
-
お気に入り
●
-
お気に入られ
タグ
●すべて
●
ネタ
(13)
●
.htaccess
(9)
●
2ch
(1)
●
ADHD
(5)
●
AI(12)
●
Android
(4)
●
Apache
(1)
●
Bitcoin
(4)
●
ChatGPT
(28)
●
Dropbox
(1)
●
EC-CUBE
(1)
●
FFFTP
(1)
●
Flash
(1)
●
GTM
(2)
●
Googleマイビジネス
(28)
●
HTML
(3)
●
HTML5
(2)
●
LCC
(1)
●
LGBT
(10)
●
LINE@
(4)
●
LMS
(1)
●
LPO
(1)
●
MT5
(6)
●
MVNO
(1)
●
Moodle
(1)
●
Movable Type
(2)
●
MovableType
(12)
●
MySQL
(1)
●
NTR
(1)
●
PPC広告
(4)
●
PWA
(2)
●
QRコード
(1)
●
SDGs
(5)
●
SEO
(149)
●
SNS
(44)
●
SQL
(1)
●
SSL
(16)
●
Search Console
(2)
●
Webフォント
(2)
●
Web開発
(2)
●
Wi-Fi
(1)
●
Windows
(6)
●
Windows 10
(2)
●
Windows Update
(1)
●
Windows10
(4)
●
WordPress
(139)
●
WordPressプラグイン
(36)
●
Yahoo!
(4)
●
Zoom
(1)
●
ajax
(1)
●
amazon
(1)
●
amp
(7)
●
apple
(4)
●
biz
(224)
●
chrome
(11)
●
cms
(1)
●
coreserver
(1)
●
css
(82)
●
e-learning
(1)
●
facebook
(32)
●
font-awesome
(1)
●
google
(140)
●
google analytics
(7)
●
htaccess
(4)
●
huawei
(1)
●
iframe
(1)
●
instagram
(11)
●
iphone
(5)
●
jQuery
(40)
●
javascript
(35)
●
line
(12)
●
marketing
(1)
●
mobile
(10)
●
php
(8)
●
phpMyAdmin
(1)
●
reCAPTCHA
(2)
●
robots.txt
(1)
●
simulator
(1)
●
tips
(4)
●
twitter
(44)
●
webサービス
(93)
●
webツール
(8)
●
webデザイン
(77)
●
web制作
(101)
●
woocommerce
(2)
●
wordpressテーマ
(9)
●
wpテーマ
(2)
●
wp高速化
(17)
●
youtube
(6)
●
あとで読む
(19)
●
おそロシア
(1)
●
お菓子
(5)
●
これはすごい
(97)
●
これはひどい
(365)
●
こわインド
(1)
●
こんにゃく
(1)
●
さくらインターネット
(1)
●
さつまいも
(4)
●
しろ菜
(1)
●
そうめん
(2)
●
なす
(2)
●
ほんとに何かを見たら
(1)
●
また産経か
(8)
●
みつをジェネレーター
(1)
●
むせる
(1)
●
むね肉
(33)
●
もやし
(1)
●
れんこん
(1)
●
アクセス解析
(3)
●
アスペルガー症候群
(1)
●
アトピー
(1)
●
アトピー性皮膚炎
(1)
●
アニメ
(1)
●
アニメーションgif
(1)
●
アプリ
(4)
●
アレルギー
(1)
●
イスラム教
(1)
●
イチゴ
(1)
●
イラスト
(4)
●
インターネット
(1)
●
ウインナー
(1)
●
オウム真理教
(1)
●
オクラ
(1)
●
カスタマイズ
(2)
●
カブ
(1)
●
カボチャ
(2)
●
カレンダー
(1)
●
キャッシュ
(2)
●
キャベツ
(7)
●
キャリブレーション
(1)
●
キュウリ
(1)
●
クチコミ
(2)
●
クレーム対応
(5)
●
グルメ
(2)
●
コミュニケーション
(7)
●
コンテンツ
(1)
●
ゴボウ
(3)
●
ゴーヤ
(3)
●
サバ
(1)
●
サワラ
(1)
●
ジェンダー
(23)
●
ジャガイモ
(5)
●
ステマ
(2)
●
スパゲティ
(23)
●
スパム
(11)
●
スパムフィルター
(1)
●
スマートフォン
(47)
●
スライドショー
(1)
●
ズッキーニ
(5)
●
セキュリティ
(41)
●
ソーシャルゲーム
(1)
●
ソーシャルメディア
(20)
●
タイマー
(1)
●
タブレット
(2)
●
チンゲン菜
(1)
●
テンプレート
(2)
●
ディストピア
(2)
●
ディスプレイ
(1)
●
デザイン
(7)
●
デマ
(14)
●
トラブル
(1)
●
トランプ
(1)
●
トレンド
(3)
●
トレーニング
(1)
●
トンデモ
(27)
●
トースト
(2)
●
ドラえもん
(1)
●
ナス
(6)
●
ニンジャスレイヤー
(14)
●
ネタ
(123)
●
ネットリテラシー
(33)
●
ネット通販
(1)
●
バックアップ
(1)
●
パン
(2)
●
ビジネス
(16)
●
ビル・クリントン元大
(1)
●
フェイスブック
(2)
●
フェミニズム
(2)
●
フォント
(7)
●
フリーソフト
(2)
●
フリーフォント
(1)
●
ブラウザ
(3)
●
ブログ
(4)
●
ブロッコリー
(1)
●
プッシュ通知
(1)
●
プライバシー
(3)
●
プラグイン
(22)
●
プリキュア
(11)
●
プレゼン
(3)
●
プログラミング
(2)
●
ベーシックインカム
(1)
●
ペーパークラフト
(1)
●
ボルシチ
(1)
●
ポリコレ
(1)
●
マカロニ
(2)
●
マンガ
(4)
●
マーケティング
(21)
●
ミンチ
(9)
●
メルマガ
(2)
●
メンタルヘルス
(1)
●
モニター
(1)
●
モバイル
(14)
●
モモ肉
(1)
●
モロッコいんげん
(1)
●
ユニバーサルデザイン
(3)
●
ユーザビリティ
(5)
●
ライスペーパー
(1)
●
ライティング
(1)
●
ライフハック
(3)
●
ラーメン
(1)
●
リスティング広告
(4)
●
リテラシー
(46)
●
リファラースパム
(2)
●
リファレンス
(1)
●
リンク
(3)
●
リンクビルディング
(1)
●
レシピ
(229)
●
レタス
(1)
●
レンコン
(1)
●
ロイヤリティフリー
(1)
●
ローカルSEO
(4)
●
中央揃え
(1)
●
人工知能
(1)
●
人生
(14)
●
仕事
(14)
●
企画力
(5)
●
伊達政宗
(1)
●
会員制サイト
(6)
●
似顔絵
(1)
●
住宅
(1)
●
健康
(18)
●
写真
(7)
●
出版
(4)
●
効果音
(1)
●
動画
(2)
●
医療
(9)
●
医療機関
(3)
●
卵
(3)
●
収納
(1)
●
司法
(2)
●
合挽ミンチ
(1)
●
営業
(8)
●
国際
(1)
●
地図
(2)
●
塩サバ
(2)
●
増田
(18)
●
大学受験
(7)
●
大根
(2)
●
夫婦
(13)
●
子供
(12)
●
学習
(6)
●
宗教
(1)
●
家事
(3)
●
家庭
(48)
●
家族
(14)
●
小松菜
(3)
●
少額訴訟
(1)
●
就活
(2)
●
広告
(42)
●
後で読む
(7)
●
心理
(4)
●
性病
(1)
●
懸賞
(2)
●
拡張機能
(1)
●
接客
(13)
●
携帯エミュレーター
(1)
●
政治
(3)
●
教育
(60)
●
敷金
(3)
●
文化
(2)
●
文学
(2)
●
文章
(6)
●
料理
(11)
●
旅行
(4)
●
柿
(1)
●
楽天
(2)
●
楽天市場
(3)
●
歴史
(3)
●
死後
(1)
●
海外
(1)
●
漫画
(2)
●
炎上
(8)
●
牛こま
(1)
●
物理
(1)
●
犯罪
(1)
●
玉ねぎ
(2)
●
生活
(35)
●
画像処理
(1)
●
画像編集
(1)
●
留学
(2)
●
発達障害
(2)
●
白菜
(2)
●
睡眠
(7)
●
研究
(2)
●
社会
(17)
●
社会保障
(1)
●
秀丸
(3)
●
科学
(3)
●
管理画面
(2)
●
素麺
(1)
●
結婚
(5)
●
統合失調症
(1)
●
統計
(4)
●
絵文字
(2)
●
翻訳
(12)
●
育児
(140)
●
自殺
(3)
●
航空券
(1)
●
英語
(8)
●
著作権
(4)
●
虚構新聞
(2)
●
行動経済学
(1)
●
裁判
(1)
●
豆苗
(1)
●
豚コマ
(17)
●
豚ブロック
(4)
●
豚ミンチ
(5)
●
豚ロース
(4)
●
豚肉
(1)
●
貧困
(2)
●
起業
(23)
●
里芋
(1)
●
鉄道
(1)
●
開発
(1)
●
防災
(2)
●
集客
(12)
●
青空文庫
(1)
●
食
(3)
●
食パン
(1)
●
飲み物
(1)
●
餅
(2)
●
高速化
(9)
●
魚
(6)
●
鮎
(1)
●
鮭
(2)
●
鶏ミンチ
(1)
●
これはひどい
(365)
●
レシピ
(229)
●
biz
(224)
●
SEO
(149)
●
google
(140)
●
育児
(140)
●
WordPress
(139)
●
ネタ
(123)
●
web制作
(101)
●
これはすごい
(97)
関連タグで絞り込む (2)
●
css
●
Javascript
タグの絞り込みを解除
PWAに関するlocalnaviのブックマーク (2)
●
1 user
●
www.ykicchan.dev
●テクノロジー
JSから MediaQuery 使えるんだって MDN: window.matchMedia 指定された メディアクエリ文字列のパース結果を表す、新しい MediaQueryList オブジェクトを返します。 状況に応じてリッチな UIや振る舞いを表現するために使えそう。 自分はアプリケーションが PWA で動いているかどうかで動作を変えたいシチュエーションがあったのでそこで活かした。 使用例 PWA の判定 ※ manifest.json で "display": "standalone" の指定がされていること if (window.matchMedia('(display-mode: standalone)').matches) { // PWA のときの処理 } 画面の向きの判定 if (window.matchMedia( "(orientation: landscape)"
localnavi
2023/05/10
●Javascript
●PWA
●
5 users
●
qiita.com/ing_tachibana
●テクノロジー
はじめに ReactやAngular、Vue.jsなどの主要なフレームワークを使えばワンステップ＋αで簡単に実装できるようになっていることからSSLさえ導入していればおまけ的に導入できるイメージのPWA。 実装を進めていくと﹁web表示だけ︻ホーム画面に追加︼の誘導モーダルを出したい﹂﹁PWAの環境下でのみストレージにデータを保持させておきたい﹂といったときにPWA環境か通常のブラウザかを判定する場面が多かれ少なかれ出てきます。 しかし、あまりここに触れている記事を見かけなかったので備忘録も兼ねて掲載します。 本題 メディアクエリのパース結果を利用してJavaScript上で判定します。 以下はmanifest.jsonでディスプレイモード﹁standalone﹂を指定した場合を想定しています。 if(window.matchMedia('(display-mode: standalone
localnavi
2023/05/10
●css
●PWA
1
お知らせ
ランキング
今週のはてなブックマーク数ランキング︵2024年7月第3週︶
ランキング
今週のはてなブックマーク数ランキング︵2024年7月第2週︶
お知らせ
はてなブックマーク透明性レポート︵2024年2月-2024年4月︶
もっと読む
公式Twitter
●@HatenaBookmark
リリース、障害情報などのサービスのお知らせ
●@hatebu
最新の人気エントリーの配信
処理を実行中です
キーボードショートカット一覧
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
●総合
●一般
●世の中
●政治と経済
●暮らし
●学び
●テクノロジー
●エンタメ
●アニメとゲーム
●おもしろ
●アプリ・拡張機能
●開発ブログ
●ヘルプ
●お問い合わせ
●ガイドライン
●利用規約
●プライバシーポリシー
●利用者情報の外部送信について
●ガイドライン
●利用規約
●プライバシーポリシー
●利用者情報の外部送信について
●公式アカウント
●ホットエントリー
●はてなブログ
●はてなブログPro
●人力検索はてな
●はてなブログ タグ
●はてなニュース
●ソレドコ
Copyright © 2005-2024 Hatena. All Rights Reserved.
設定を変更しましたx
JSで端末の向きや PWA で動いてるかを判定する - yKicchan's blog
PWA環境下で実行されているかを判定する方法 - Qiita