PWA デモ

このページは PWA として追加できます。iOS の場合、ホーム画面に追加すると、ステータスバーが透過されます。

Android ではアイコンをマスクして様々な形に変形できます。ランチャーがアダプティブアイコンに対応している必要があります。

ライトモード・ダークモードでそれぞれテーマカラーが変わります。

<head>
  <meta charset="UTF-8">
  <title>PWA デモ</title>
  <link rel="stylesheet" href="./style.css" />
  <link rel="manifest" href="./manifest.json" />
  <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover,user-scalable=no" />
  <meta name="theme-color" content="#E5E5E5" media="(prefers-color-scheme: light)" />
  <meta name="theme-color" content="#171717" media="(prefers-color-scheme: dark)" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
</head>

トップに戻る (sogo.dev)

Lorem ipsum odor amet, consectetuer adipiscing elit. Vulputate condimentum sem turpis ligula ultricies sodales phasellus ad. Integer pharetra fermentum ullamcorper inceptos posuere. Vehicula neque volutpat sit commodo praesent eget. Vitae vitae etiam a; vestibulum tristique elementum dis varius. In aenean venenatis libero pretium justo ut ornare auctor.

Mauris sodales sollicitudin nullam velit fusce malesuada. Nec aliquam eget cursus enim amet aliquam. Ante malesuada venenatis varius potenti metus dictum eleifend pretium. Integer dignissim vulputate ac aliquam fermentum litora tempus hendrerit. Aliquet elementum luctus duis neque commodo porttitor mi morbi tellus. Vivamus ultrices lorem curae accumsan dis facilisis. Adipiscing mauris litora vitae cursus dictumst ullamcorper inceptos aliquet lobortis. Magnis molestie duis sollicitudin, fermentum proin eros.

Ad mus ac fermentum justo auctor in facilisi vulputate. Interdum platea condimentum vulputate nisl odio nullam. Elementum at aptent elementum efficitur sapien. Ex facilisi eget nullam maecenas curae felis. Ad quis aliquam tristique nascetur ridiculus pharetra. Aliquam inceptos non justo sagittis; per inceptos. Posuere hendrerit tellus laoreet risus vestibulum varius scelerisque nisi. Posuere vulputate torquent sollicitudin mauris est tempor. Vel ac hendrerit praesent tortor pellentesque pellentesque tristique. Lorem placerat finibus cras risus enim id felis pretium.

🏠
🔍