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

フリーソフトのみでホームページ作成

ユーザ用ツール

サイト用ツール


21.pwa_progressivewebapps_の作成方法:index.html


差分

このページの2つのバージョン間の差分を表示します。

この比較画面にリンクする

次のリビジョン
前のリビジョン
21.pwa_progressivewebapps_の作成方法:index.html [2019/08/22]
adash333 作成
21.pwa_progressivewebapps_の作成方法:index.html [2019/08/23] (現在)
adash333 [一般的なPWAの作り方]
行 1: 行 1:
 ====== PWA(ProgressiveWebApps)の作成方法 ====== ====== 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の例
 +<code>
 +{
 +  "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"
 +}
 +</code>
 +
 +service-worker.jsの例
 +<code>
 +// 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) {});
 +</code>
 +
 +index.htmlの<head></head>内に、以下を記載
 +<code>
 +  <!-- 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>
 +</code>
 +  
 +写経元サイト: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をもっと簡単に初めてみる
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
  
  


21.pwa_progressivewebapps_の作成方法/index.html.1566467128.txt.gz · 最終更新: 2019/08/22 by adash333