PWA(Progressive Web Apps)

PWA(Progressive Web Apps)

PWA(Progressive Web Apps)とはWebページがアプリのようにインストールできてオフラインでも動作する機能です。
Androidはかなり対応している機能が多いですが、iPhone(iOS)は対応している機能が少ないです。

必要なファイル

メインとなるHTMLファイル

<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">

  <!-- マニフェストファイルを指定する -->
  <link rel="manifest" href="manifest.json">

  <!-- アドレスバー等のブラウザのUIを非表示 -->
  <meta name="apple-mobile-web-app-capable" content="yes">

  <!-- ホーム画面に表示されるアプリアイコン -->
  <link rel="apple-touch-icon" href="icon144x144.png">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">

  <script>
    //サービスワーカーの登録
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service-worker.js',{scope: '/javascript/pwa/'})
      .then(function(reg){
        console.log('ServiceWorkerの登録成功 スコープ: ', reg.scope);
      }).catch(function(err){
        console.log('ServiceWorkerの登録失敗: ', err);
      });
    }
  </script>

</head>
<body>
  PWAアプリのコンテンツ
</body>
</html>

manifest.json ファイルについて

{
  "lang":"ja",
  "name"            : "Webアプリケーションの名前を入れる",
  "short_name"      : "Webアプリ名",
  "display"         : "standalone",
  "start_url"       : "https://mam-mam.net/javascript/pwa/",
  "background_color": "#FFFFFF",
  "theme_color"     : "#FFFFFF",
  "icons": [
    {
      "src"  : "icon192x192.png",
      "sizes": "192x192",
      "type" : "image/png"
    },
    {
      "src"  : "icon144x144.png",
      "sizes": "144x144",
      "type" : "image/png"
    }
  ]
}

service-worker.js ファイル

//キャッシュの名前
var CACHE_NAME='pwa-cache-name';
//キャッシュ対象URL一覧配列
var cacheURLs = [
  '/javascript/pwa/',
];

//インストール処理
self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(CACHE_NAME).then(function(cache) {
        return cache.addAll(cacheURLs);
    })
  );
});

//リソースフェッチ時のキャッシュロード
self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function(response){
      return response || fetch(event.request);
    })
  );
});

サンプル

サンプルURLへ



Mam's WebSite