PWA

FrontPage > Web > PWA

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

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

• プッシュ通知機能
  
• アイコンのホーム画面への追加(インストール不要)
  
• ネイティブアプリのような使用感(フルスクリーン表示)
  　ブラウザのURL部分の表示を消せる。
  
• 表示スピードの高速化(プリキャッシュ機能)
  
• オフライン閲覧可能
  

作り方†

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

PWA Check (PWA度)†

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

構成†

• manifest.json
  
• index.html
  
• sw.js
  
• icon_192.png - 192x192 px
  
• icon_512.png - 512x512 px
  
  
• .htaccess - 「http:// -> https://」へ変換等に使用。(Apache環境の場合)
  

manifest.json†

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

※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†

• navigator.serviceWorker.registerで「sw.js」を追加
  　(ワンクッション[register.js]を作成して、navigatorに、'serviceWorker'があるかチェックするサンプルもある)

sw.js†

• キャッシュの設定
• self.addEventListenerで「install」
• self.addEventListenerで「activate」
• self.addEventListenerで「fetch」

アイコン†

• 192x192[px]のアイコンだけでも可。
  　(512x512[px]は、LighthouseからiOS用と指示があったため追加)

API & FW†

• Workbox - キャッシュなど
• OneSignal - プッシュ通知

最新の20件