質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.00%

PWAとして設定したいのですが、ホーム画面に追加の通知ができません。

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 174

makoto-n

score 382

PWAの練習中です。(htmlの不要だと考慮した箇所は消しています)
すべて同じディレクトリにおいています。
index.htmlからmanifest.jsonとnavigator.jsをよび、
navigator.jsからservice-worker.jsを呼ぶようにしています。

が、navigator.jsもservice-worker.jsもネットに掲載されていた記事を参考にしたもので、
仕組みがわかっていません。

一度だけホーム画面に追加・機内モードで閲覧可能にできたのですが、
いろいろ触っているうちにホームに追加・機内モードができなくなってしまいました。

ここがおかしいとわかる方、よければ教えてください。
よろしくおねがいします。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
||
||
<link rel="manifest" href="manifest.json">
<meta name="application-name" content="ポートフォリオ">
<meta name="theme-color" content="#fe9211">
</head>
<body>
<div id="content">
||
||
||
<script src="navigator.js"></script>
</div>
</body>
</html>


manifest.json

{
  "manifest_version": 2,
  "name": "ポートフォリオ3",
  "short_name": "ポートフォリオ3",
  "version": "1.0.2",
  "background_color": "#fc980c",
  "icons": [{
    "src": "\/\/placehold.jp\/ff0000\/ffffff\/256x256.png?text=TK",
    "sizes": "256x256",
    "type": "image\/png"
  },{
    "src": "\/\/placehold.jp\/ff0000\/ffffff\/192x192.png?text=TK",
    "sizes": "192x192",
    "type": "image\/png"
  }],
  "theme_color": "#00f",
  "start_url": "./?utm_source=homescreen",
  "display": "standalone",
  "gcm_sender_id": "pwa-test-937e4"
}


navigator.js

// service workerが有効なら、service-worker.js を登録します
if ('serviceWorker' in navigator) {
  navigator.serviceWorker
    .register('./service-worker.js')
    .then(function(registration) {
      // 登録成功
    console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }).catch(function(err) {
    // 登録失敗 :(
    console.log('ServiceWorker registration failed: ', err);
  });
}


service-worker.js

const CACHE_NAME = 'cache-v2';
const urlsToCache = [
    '/',
    '/index.html',
    '/css/index.css',
    '/img/bg_01.jpg',
    '//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css'
];

// install-event
self.addEventListener('install', function(event) {
    event.waitUntil(
        caches.open(CACHE_NAME)
            .then(function(cache) {
                console.log('Opened cache');

                  // 指定されたリソースをキャッシュに追加する
                return cache.addAll(urlsToCache);
            })
    );
});

// activate-event
self.addEventListener('activate', function(event) {
    var cacheWhitelist = [CACHE_NAME];
    event.waitUntil(
        caches.keys().then(function(cacheNames) {
            return Promise.all(
                cacheNames.map(function(cacheName) {
                    // ホワイトリストにないキャッシュ(古いキャッシュ)は削除する
                    if (cacheWhitelist.indexOf(cacheName) === -1) {
                        return caches.delete(cacheName);
                    }
                })
            );
        })
    );
});

// fetch-event
self.addEventListener('fetch', function(event) {
    event.respondWith(
        caches.match(event.request)
            .then(function(response) {
                if (response) {
                    return response;
                }

                  // 重要:リクエストを clone する。リクエストは Stream なので
                  // 一度しか処理できない。ここではキャッシュ用、fetch 用と2回
                  // 必要なので、リクエストは clone しないといけない
                let fetchRequest = event.request.clone();

                return fetch(fetchRequest)
                    .then(function(response) {
                        if (!response || response.status !== 200 || response.type !== 'basic') {
                            return response;
                        }

                          // 重要:レスポンスを clone する。レスポンスは Stream で
                          // ブラウザ用とキャッシュ用の2回必要。なので clone して
                          // 2つの Stream があるようにする
                        let responseToCache = response.clone();

                        caches.open(CACHE_NAME)
                                .then(function(cache) {
                                    cache.put(event.request, responseToCache);
                                });

                        return response;
                    });
            })
    );
});

// 現状では、この処理を書かないとService Workerが有効と判定されないようです
self.addEventListener('fetch', function(event) {});

6/25追記

おかげで機内モードでの表示は可能になりました。
キャッシュで表示可能になったと思います。
が、プッシュ通知がなんど試しても表示されません。
service-workerでは2つエラーが出ているようですが、箇所が特定できません。
画像

詳しい方、ご助力お願いします。


7/6追記
navigator.jsとservice-worker.jsをESLintにしたがい修正してみましたが、
ホーム画面通知が表示されません。
記述します。おかしい点を教えてください。
周りの人にはPWAに詳しい方がいないので学習に苦戦しています。

navigator.js

// service workerが有効なら、service-worker.js を登録します
if ('serviceWorker' in navigator) {
  navigator.serviceWorker
    .register('./service-worker.js', { scope: '/sample/02/' })
    .then((registration) => {
      // 登録成功
      console.log('ServiceWorker registration successful with scope: ', registration.scope)
    }).catch((err) => {
    // 登録失敗 :(
      console.log('ServiceWorker registration failed: ', err)
    })
}

service-worker.js

const CACHE_NAME = 'cache-v1'
const urlsToCache = [
  '/',
  '/index.html',
  '/about.html',
  '/contact.html',
  '/css/style.css',
  '//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css',
  '/img/cafe--coffe01.jpg',
  '/img/cafe--coffe02.jpg',
  '/img/cafe--coffe03.jpg',
  '/img/cafe--coffe04.jpg',
  '/img/cafe--farmer01.jpg',
  '//code.jquery.com/jquery-3.3.1.slim.min.js',
  '//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js',
  '//stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js',
  '/js/index.js'
]

// install-event
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then((cache) => {
        console.log('Opened cache')

        // 指定されたリソースをキャッシュに追加する
        return cache.addAll(urlsToCache)
      })
  )
})

// activate-event
self.addEventListener('activate', (event) => {
  var cacheWhitelist = [CACHE_NAME]
  event.waitUntil(
    caches.keys().then((cacheNames) => {
      return Promise.all(
        cacheNames.map((cacheName) => {
        // ホワイトリストにないキャッシュ(古いキャッシュ)は削除する
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName)
          }
        })
      )
    })
  )
})

// fetch-event
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
      .then((response) => {
        if (response) {
          return response
        }

        // 重要:リクエストを clone する。リクエストは Stream なので
        // 一度しか処理できない。ここではキャッシュ用、fetch 用と2回
        // 必要なので、リクエストは clone しないといけない
        let fetchRequest = event.request.clone()

        return fetch(fetchRequest)
          .then((response) => {
            if (!response || response.status !== 200 || response.type !== 'basic') {
              return response
            }

            // 重要:レスポンスを clone する。レスポンスは Stream で
            // ブラウザ用とキャッシュ用の2回必要。なので clone して
            // 2つの Stream があるようにする
            let responseToCache = response.clone()

            caches.open(CACHE_NAME)
              .then((cache) => {
                cache.put(event.request, responseToCache)
              })

            return response
          })
      })
  )
})

self.addEventListener('fetch', () => {})
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

0

ホーム画面への追加は、ある一定の時間に複数回サイトを訪問すると出てきます。(いつでも表示されるものではありません)
ホーム画面への追加はChromeのdevtoolsでデバッグすることができます。

下記を参考にして試してみてください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/06/21 10:52

    すみません、参考にとはどのことでしょうか?

    キャンセル

  • 2019/06/21 11:42

    すみません、貼り付けできてませんでした
    https://developers.google.com/web/tools/chrome-devtools/progressive-web-apps?hl=ja

    こちらです

    キャンセル

  • 2019/06/21 13:24

    ありがとうございます。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.00%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る