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

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。

====== 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をもっと簡単に初めてみる














===== リンク =====

[[z_blog:2019:190716_map|190716 map]]

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

ユーザ用ツール

サイト用ツール

ページ用ツール