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

差分

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

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

--- 21.pwa_progressivewebapps_の作成方法:index.html [2019/08/22]
adash333 作成
+++ 21.pwa_progressivewebapps_の作成方法:index.html [2019/08/22]
adash333 [一般的なPWAの作り方]
@@ 行 1: / 行 1: @@
 ====== PWA(ProgressiveWebApps)の作成方法 ======
+WebアプリをPWA化すると、AndroidスマホにAndroidアプリのようにホーム画面に追加することができ、オフラインでも動作することができるようになります。
+===== 一般的なPWAの作り方 =====
+https://qiita.com/umamichi/items/0e2b4b1c578e7335ba20
+@umamichi
+年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
+年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
+年05月13日に投稿
+PWAをもっと簡単に初めてみる

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