Web制作のノウハウ

PWAでは出来ないは嘘。ユーザー毎の個別ページをホーム画面に追加する方法

MDNでは、start_url にユーザーIDなどの一意な情報を含めないことが推奨されています。start_url に相対パスを指定すれば、現在表示しているページをそのままホーム画面へ追加でき、ECサイトやブログ、プロフィールページなどにも応用できます。

存在しないURLを指定したら分かった、iPhoneホーム画面アイコンの隠れ仕様

PWA LABで存在しないURLを指定してホーム画面追加を検証したところ、iPhoneではtheme_colorとサイト名から自動生成アイコンが作られる挙動を確認しました。

iOSとAndroidではPWAのゴールが違う｜対応・非対応だけでは語れない本当の違い

AndroidとiPhoneのPWAは何が違うのか。AndroidはWebをアプリ化し、iPhoneはWebページをホーム画面に置く体験を重視しているという視点で整理します。

【PWA事件簿】iPhoneのミニUIを消したくて、Androidを巻き込んだら、上下から謎のAI?に挟み撃ちにされた話

【PWA事件簿】iPhoneのミニUIを消したくて、Androidを巻き込んだら、上下から謎のAI?に挟み撃ちにされた話 こんにちは、OJappです。 今回は、ここ数日間で私が体験した、「PWA（Progressive Web Apps）の仕様の深淵に触れて脳汁が出た後に、ブラウザの過保護なAI?にキレ散らかした」という、実録デバッグドキュメンタリーをお届けします。 もしあなたが「iOSとAndr […]

PWAに必要なmanifest.jsonの基本｜iPhoneとAndroidで効く項目を実験ベースで解説

PWAに必要なmanifest.jsonの基本を初心者向けに解説。iPhoneで効く項目、Android Chromeでインストール候補にするための設定、アイコンやscopeの注意点をまとめます。

AIOとは？SEOとの違いとAIに引用されやすい記事の作り方

AIOとは何か、SEOとの違い、AIに好まれる情報の特徴、今できる対策を初心者向けに解説。PWA LABのような実験記事がなぜ強いのかも紹介します。

PWAアイコンは any maskable だけでは足りない？AndroidとiPhoneで崩れる理由

PWAのアイコン指定でany maskableだけを使うと、AndroidとiPhoneで見え方がズレることがあります。manifest.jsonに通常アイコンとmaskableアイコンを分けて書く理由を解説します。

PWAのmaskableアイコンで数時間溶かした話｜purpose: any maskable と apple-touch-icon の罠

PWAのmaskableアイコンをiPhone・Android・PC Chromeで検証。purpose: maskableだけで起きた不具合と、any maskable、apple-touch-iconの注意点を解説します。

display: fullscreen は実用的なのか？iPhoneとAndroidでPWA表示を比較してみた

PWAのmanifest.jsonで指定できるdisplay: fullscreenを、iPhoneとAndroidで実際に比較。standaloneとの違いや実用性を解説します。

manifest.json の id の罠！複数PWAで起きる重複禁止問題をハックする

Android Chromeで同じPWAを複数・連続インストールできない仕様にお悩みですか？マニフェストから id を消し、start_url: "." にするだけで、Service Workerのオフライン機能を残したままアプリを無限に量産できる、実機検証から生まれた最強のPWAハックを解説します！