FrontPage > Web > PWA

PWA(プログレッシブ・ウェブ・アプリ)

https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps

作り方

基本は、Webページですが、PWA化はルールがあります。
What makes a good Progressive Web App?

PWA Check (PWA度)

PWAは、1機能でも実装すれば、PWAアプリになります。
Chromeのアドオン「Lighthouse」を使用すると、実装度合いが分かります。

構成

manifest.json

※WebExtensionでも同様のファイルがあるため注意が必要。

short_nameアプリ名(略称)
name必須アプリ名
start_url開始 URL
descriptionアプリの説明
icons必須アイコン設定、src,sizes,type
background_color背景色
theme_color既定のテーマ色
display表示モード、fullscreen,standalone,minimal-ui,browser既定値:browser
orientation画面の表示向き、any,landscape,portraitなど
categoriesカテゴリ登録
dirauto:自動、ltr:左書き、rtl右書き
iarc_rating_idどの年齢に適切かの設定
lang主言語
prefer_related_applications推奨設定?、true,false
related_applications(※1)インストール設定
scopeスコープ
screenshotsスクリーンショット

※1:prefer_related_applications=true時必須となる

{
  "short_name": "[サイト略称]",
  "name": "[サイト名]",
  "start_url": "https://[url]/index.html",
  "description": "[サイトの説明]",
  "icons": [
    {
      "src": "/icon_192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/icon_512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "background_color": "#[バックカラー]",
  "theme_color": "#[テーマカラー]",
  "display": "standalone",
  "orientation": "portrait"
}

index.html

sw.js

アイコン

API & FW


トップ   編集 凍結 差分 履歴 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2021-07-20 (火) 14:32:33