質問編集履歴

追記

2019/07/05 15:48

投稿

makoto-n

スコア436

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -324,184 +324,234 @@
 ![画像](660a3eacb12fa10d18d1f0ad1cce86ee.png)
+詳しい方、ご助力お願いします。
+---
+7/6追記
+navigator.jsとservice-worker.jsをESLintにしたがい修正してみましたが、
+ホーム画面通知が表示されません。
+記述します。おかしい点を教えてください。
+周りの人にはPWAに詳しい方がいないので学習に苦戦しています。
+navigator.js
 ```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
+```js
-const CACHE_NAME = 'cache-v1';
+const CACHE_NAME = 'cache-v1'
 const urlsToCache = [
-    '/',
+  '/',
-    '/index.html',
+  '/index.html',
-    '/about.html',
+  '/about.html',
-    '/contact.html',
+  '/contact.html',
-    '/css/style.css',
+  '/css/style.css',
-    '//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css',
+  '//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css',
-    '/img/cafe--coffe01.jpg',
+  '/img/cafe--coffe01.jpg',
-    '/img/cafe--coffe02.jpg',
+  '/img/cafe--coffe02.jpg',
-    '/img/cafe--coffe03.jpg',
+  '/img/cafe--coffe03.jpg',
-    '/img/cafe--coffe04.jpg',
+  '/img/cafe--coffe04.jpg',
-    '/img/cafe--farmer01.jpg',
+  '/img/cafe--farmer01.jpg',
-    '//code.jquery.com/jquery-3.3.1.slim.min.js',
+  '//code.jquery.com/jquery-3.3.1.slim.min.js',
-    '//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.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',
+  '//stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js',
-    '/js/index.js'
+  '/js/index.js'
-];
+]
 // install-event
-self.addEventListener('install', function(event) {
+self.addEventListener('install', (event) => {
-    event.waitUntil(
+  event.waitUntil(
-        caches.open(CACHE_NAME)
+    caches.open(CACHE_NAME)
-            .then(function(cache) {
+      .then((cache) => {
-                console.log('Opened cache');
+        console.log('Opened cache')
-                  // 指定されたリソースをキャッシュに追加する
+        // 指定されたリソースをキャッシュに追加する
-                return cache.addAll(urlsToCache);
+        return cache.addAll(urlsToCache)
-            })
+      })
-    );
+  )
-});
+})
 // activate-event
-self.addEventListener('activate', function(event) {
+self.addEventListener('activate', (event) => {
-    var cacheWhitelist = [CACHE_NAME];
+  var cacheWhitelist = [CACHE_NAME]
-    event.waitUntil(
+  event.waitUntil(
-        caches.keys().then(function(cacheNames) {
+    caches.keys().then((cacheNames) => {
-            return Promise.all(
+      return Promise.all(
-                cacheNames.map(function(cacheName) {
+        cacheNames.map((cacheName) => {
-                    // ホワイトリストにないキャッシュ(古いキャッシュ)は削除する
+        // ホワイトリストにないキャッシュ(古いキャッシュ)は削除する
-                    if (cacheWhitelist.indexOf(cacheName) === -1) {
+          if (cacheWhitelist.indexOf(cacheName) === -1) {
-                        return caches.delete(cacheName);
+            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) {});
+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', () => {})
 ```
-詳しい方、ご助力お願いします。

追記

2019/07/05 15:48

投稿

makoto-n

スコア436

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -303,3 +303,205 @@
 self.addEventListener('fetch', function(event) {});
 ```
+---
+6/25追記
+おかげで機内モードでの表示は可能になりました。
+キャッシュで表示可能になったと思います。
+が、プッシュ通知がなんど試しても表示されません。
+service-workerでは2つエラーが出ているようですが、箇所が特定できません。
+![画像](660a3eacb12fa10d18d1f0ad1cce86ee.png)
+```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', 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) {});
+```
+詳しい方、ご助力お願いします。