====== 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の内に、以下を記載

写経元サイト：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をもっと簡単に初めてみる ===== リンク ===== [[z_blog:2019:190716_map|190716 map]]