PWA(ProgressiveWebApps)の作成方法

WebアプリをPWA化すると、AndroidスマホにAndroidアプリのようにホーム画面に追加することができ、オフラインでも動作することができるようになります。

一般的なPWAの作り方

https://qiita.com/umamichi/items/0e2b4b1c578e7335ba20
@umamichi
2019年06月27日に更新
PWA 入門〜iOS SafariでPWAを体験するまで〜 2019年7月更新

HTTPS対応
manifest.jsonの設置
Service Workerを有効にする

具体的には、

NetlifyなどのHTTPS対応サイトにデプロイする
manifest.jsonを設置
icon-256.pngの設置
icon-192.pngの設置
service-worker.jsを設置
index.htmlの編集

manifest.jsonの例

{
  "name": "PWA Sample",
  "short_name": "PWA",
  "background_color": "#fc980c",
  "icons": [{
      "src": "./icon-256.png",
      "sizes": "256x256",
      "type": "image/png"
    },{
      "src": "./icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    }],
  "start_url": "./?utm_source=homescreen",
  "display": "standalone"
}

service-worker.jsの例

// service-worker.js
self.addEventListener('install', function(e) {
  console.log('[ServiceWorker] Install');
});

self.addEventListener('activate', function(e) {
  console.log('[ServiceWorker] Activate');
});

// 現状では、この処理を書かないとService Workerが有効と判定されないようです
self.addEventListener('fetch', function(event) {});

index.htmlの<head></head>内に、以下を記載

  <!-- manifest.jsonを呼び出しています -->
  <link rel="manifest" href="./manifest.json">
  <script>
    // service workerが有効なら、service-worker.js を登録します
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('./service-worker.js').then(function() { console.log('Service Worker Registered'); });
   }
  </script>

写経元サイト：https://qiita.com/umamichi/items/0e2b4b1c578e7335ba20
@umamichi
2019年06月27日に更新
PWA 入門〜iOS SafariでPWAを体験するまで〜 2019年7月更新

WebサイトをPWA化する方法のリンク

https://paiza.hatenablog.com/entry/2018/08/29/PWA入門！JavaScriptで簡単に高速化＆オフライン対応のWebサ

https://qiita.com/poster-keisuke/items/6651140fa20c7aa18474
@poster-keisuke
2018年05月13日に投稿
PWAをもっと簡単に初めてみる

リンク

190716 map

サルでもわかるWEBプログラミング

目次

PWA(ProgressiveWebApps)の作成方法

一般的なPWAの作り方

WebサイトをPWA化する方法のリンク

リンク