摘要：安裝事件綁定在文件中，當安裝成功后，事件就會被觸發。激活當安裝完成后并進入激活狀態，會觸發事件。這會導致更新得不到響應。由兩個構成用來顯示系統的通知用來處理下發的消息這兩個都是建立在在基礎上的，在后臺響應推送消息時間，并把他們傳遞給應用。

原文地址： https://blog.webkong.cn/2018/...

Progressive Web App, 簡稱 PWA，是提升 Web App 的體驗的一種新方法，能給用戶原生應用的體驗。

PWA 能做到原生應用的體驗不是靠特指某一項技術，而是經過應用一些新技術進行改進，在安全、性能和體驗三個方面都有很大提升，PWA 本質上是 Web App，借助一些新技術也具備了 Native App 的一些特性，兼具 Web App 和 Native App 的優點。

技術依賴:

Service Worker

Web storage（IndexedDB, Caches）

Fetch

Promises

PWA應用應該是：

discoverable 可發現, 可以被識別為應用程序，通過搜索引擎容易找到

installable 可安裝，可用于移動設備，添加到用戶主屏幕

linkable 可連接 通過URL共享，無需復雜安裝

network independent 網絡獨立 可工作在離線或者低速的網絡環境

progressive 漸進增強 適用于所有用戶，支持的瀏覽器可以體驗更好，不支持的瀏覽器訪問不會郵到影響

re-engageable 再參與 通過提醒，讓用戶容易進行參與

responsive 響應式 適合任何形式的設備

safe 安全 內容傳遞機制可以防止監聽，并保證內容不被篡改

Progressive web app advantages. To find out how to implement PWAs, consult the guides listed in the below section.

強調是漸進式的，改造過程中可以逐步進行，降低站點的改造成本，新技術支持程度不完整，跟著新技術逐步進化。
PWA 涉及到從安全、性能和體驗等方面的優化，可以考慮以下步驟：

第一步，應該是安全，將全站 HTTPS 化，因為這是 PWA 的基礎，沒有 HTTPS，就沒有 Service Worker

第二步，應該是 Service Worker 來提升基礎性能，離線提供靜態文件，把用戶首屏體驗提升上來

第三步，App Manifest，這一步可以和第二步同時進行

后續，再考慮其他的特性，離線消息推送等

Service Worker，是一個瀏覽器和network之間的代理，解決的是如何緩存頁面的資產和如果在脫機狀態下仍然正常工作的問題。獨立于當前網頁進程，有自己獨立的 worker context，沒有對于DOM的訪問權限，與傳統的API不同，它是非阻塞的，并基于promise方法在就緒時返回結果。它不但只是離線能力，還有消息通知、添加桌面圖標等功能。

HTTPS， 由于 Service Worker 要求 HTTPS 的環境，我們可以借助 github page 進行學習調試。一般瀏覽器允許調試 Service Worker 的時候 host 為 localhost。

Service Worker 的緩存機制是依賴 Cache API實現的

依賴 HTML5 fetch API

依賴 Promise 實現

A more detailed introduction to The Service Worker Lifecycle

A service worker goes through three steps in its lifecycle:

Registration 注冊

Installation 安裝

Activation 激活

在install Server Worker之前，要在主進程JavaScript代碼里面注冊它，注冊是為了告訴瀏覽器我們的Servic e Worker文件是哪個，然后在后臺，Service Worker就開始安裝激活。

注冊代碼可以放到html文件的標簽中，也可以多帶帶放到main.js文件在引入html文件中。

if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("/service-worker.js")
  .then(function(registration) {
    console.log("Registration successful, scope is:", registration.scope);
  })
  .catch(function(error) {
    console.log("Service worker registration failed, error:", error);
  });
}

代碼中，先檢測是瀏覽器是不是支持Service Worker，如果支持，就用navigator.serviceWorker.register注冊，如果成功，就會在promise的 .then 里面得到registration.

service-worker.js文件就是我們要編寫Service Worker功能的文件。

注冊時，還可以指定可選參數scope，scope是Service Worker 可以以訪問到的作用域，或者說是目錄。

navigator.serviceWorker.register("/service-worker.js", {
  scope: "/app/"
});

代碼中指定作用域是/app/,意思就是說，Service Workder 可以控制的path是類似于app /app/home/ /app/abbout/等內部目錄，而不能訪問 / "/images"等 /app更上一次層的path。

如果Service Worker 已經安裝了，再次注冊會返回當前活動的registration對象。

chrome瀏覽器已經很好的支持了Service Worker的debug功能，可在瀏覽器輸入chrome://inspect/#service-workers查看是否注冊成功了。
或者在控制臺的application選項查看。

install事件綁定在Service Worker文件中，當安裝成功后，install事件就會被觸發。
一般我們會在install事件里面進行緩存的處理，用到之前提到的Cahce API,它是一個Service Worker上的全局對象^[5],可以緩存網絡相應的資源，并根據他們的請求生成key，這個API和瀏覽器標準的緩存工作原理相似，但是只是針對自己的scope域的，緩存會一直存在，知道手動清楚或者刷新。

var cacheName = "cachev1"
self.addEventListener("install", function(event) {
  event.waitUntil(
    caches.open(cacheName).then(function(cache) {
      return cache.addAll(
        [
          "/css/bootstrap.css",
          "/css/main.css",
          "/js/bootstrap.min.js",
          "/js/jquery.min.js",
          "/offline.html"
        ]
      );
    })
  );
});

新增install的監聽器，并用event.waitUntil()來確保，Service Worker不會在waitUntil()執行完成之前安裝完成。

使用caches.open()創建一個cachev1的新緩存，返回一個緩存的promise對象，當它resolved時候，我們在then方法里面用caches.addAll來添加想要緩存的列表，列表是一個數組，里面的URL是相對于origin的。

如果promise被rejected，安裝失敗，我們并沒有catch，所以并不會做任何事情，也可以修改代碼，加上重新注冊的代碼。

當安裝完成時，Service Worker就會激活成功。

當 Service Worker 安裝完成后并進入激活狀態，會觸發 activate 事件。通過監聽 activate 事件你可以做一些預處理，如對舊版本的更新、對無用緩存的清理等。

service-worker.js控制著頁面資源和請求的緩存，如果 js 內容有更新，當訪問網站頁面時瀏覽器獲取了新的文件，逐字節比對js 文件發現不同時它會認為有更新啟動 更新算法，于是會安裝新的文件并觸發 install 事件。但是此時已經處于激活狀態的舊的 Service Worker 還在運行，新的 Service Worker 完成安裝后會進入 waiting 狀態。直到所有已打開的頁面都關閉，舊的 Service Worker 自動停止，新的 Service Worker 才會在接下來重新打開的頁面里生效。

如果希望在有了新版本時，所有的頁面都得到及時自動更新怎么辦呢？可以在 install 事件中執行 self.skipWaiting() 方法跳過 waiting 狀態，然后會直接進入 activate 階段。接著在 activate 事件發生時，通過執行 self.clients.claim() 方法，更新所有客戶端上的 Service Worker。

// 安裝階段跳過等待，直接進入 active
self.addEventListener("install", function (event) {
    event.waitUntil(self.skipWaiting());
});

self.addEventListener("activate", function (event) {
    event.waitUntil(
        Promise.all([
            // 更新客戶端
            self.clients.claim(),

            // 清理舊版本
            caches.keys().then(function (cacheList) {
                return Promise.all(
                    cacheList.map(function (cacheName) {
                        if (cacheName !== "cachev1") {
                            return caches.delete(cacheName);
                        }
                    })
                );
            })
        ])
    );
});

當js 文件可能會因為瀏覽器緩存問題，當文件有了變化時，瀏覽器里還是舊的文件。這會導致更新得不到響應。如遇到該問題，可嘗試這么做：在 Web Server 上添加對該文件的過濾規則，不緩存或設置較短的有效期。

或者手動調用update()來更新

navigator.serviceWorker.register("/service-worker.js").then(reg => {
  // sometime later…
  reg.update();
});

可以結合localStorage來使用，不必每次加載更新

var version = "v1";

navigator.serviceWorker.register("/service-worker.js").then(function (reg) {
    if (localStorage.getItem("sw_version") !== version) {
        reg.update().then(function () {
            localStorage.setItem("sw_version", version)
        });
    }
});

示意圖

每個狀態都會有ing,進行態。

選擇正確的存儲機制對于本地設備存儲和基于云的服務器存儲都非常重要。 良好的存儲引擎可確保以可靠的方式保存信息，并減少帶寬和提升響應能力。正確的存儲緩存策略是實現離線移動網頁體驗的核心構建基塊。

存儲的類別，存儲的持久化，瀏覽器支持情況等原因，如何更高效的存儲是我們討論的重點。

Web Storage Overview

Using Cache API

Offine Storage for PWA

Best Practices for Using IndexedDB

Inspect and Manage Storage, Databases, and Caches

針對于離線存儲數據,建議可以有:

對于網址可尋址的資源，使用[Cache API]() (Service Worker 的一部分)

對于所有其他數據，使用[IndexedDB}(https://developer.mozilla.org... (就有一個promise包裝器)

基本原理

上面的兩個API都是異步的（IndexedDB是基于事件的，而Cache API是基于Promise的）。他們可以與web Workers windows service workers一起使用。IndexedDB基本可以在所有瀏覽器環境使用（參看上面的CanIUse），Service Wokers和Cahce API的支持情況，可以通過上面的圖看到，已經支持Chrome，Firefox，Opera。IndexedDB的Promise包裝器隱藏了IndexedDB庫自帶的一些強大但同時非常復雜的machinery（例如：事務處理 transactions，架構版本schema versioning）。IndexedDB將支持observers，這個特性可以輕松實現標簽之間的同步。

對于PWA，我們可以緩存靜態資源，從而使用 Cache API 編寫的應用 Application Shell（JS/CSS/HTML 文件），并從 IndexedDB 填充離線頁面數據。

對于Web Storage（LocalStorage/SessionStorage）是同步的，不支持 Web worker線程，并且有大小和類型（僅限字符串）的限制。

允許將站點添加至主屏幕，是 PWA 提供的一項重要功能。雖然目前部分瀏覽器已經支持向主屏幕添加網頁快捷方式以方便用戶快速打開站點，但是 PWA 添加到主屏幕的不僅僅是一個網頁快捷方式，它將提供更多的功能，讓 PWA 具有更加原生的體驗。

PWA 添加至桌面的功能實現依賴于 manifest.json。

為了實現 PWA 應用添加至桌面的功能，除了要求站點支持 HTTPS 之外，還需要準備 manifest.json 文件去配置應用的圖標、名稱等信息。舉個例子，一個基本的 manifest.json 應包含如下信息：

{
    "name": "Easyify Docs",
    "short_name": "Easyify Docs",
    "start_url": "/",
    "theme_color": "#FFDF00",
    "background_color": "#FFDF00",
    "display":"standalone",
    "description": "A compilation tools for FE, built with webpack4.x, compile faster and smart, make work easier.",
    "icons": [
      {
        "src": "./_assets/icons/32.png",
        "sizes": "32x32",
        "type": "image/png"
      }
    ],
    ...
  }

使用 link 標簽將 manifest.json 部署到 PWA 站點 HTML 頁面的頭部，如下所示：

參數解釋：

name: {string} 應用名稱，用于安裝橫幅、啟動畫面顯示
short_name: {string} 應用短名稱，用于主屏幕顯示
icons: {Array.} 應用圖標列表
    src: {string} 圖標 url
    type {string=} 圖標的 mime 類型，非必填項，該字段可讓瀏覽器快速忽略掉不支持的圖標類型
    sizes {string} 圖標尺寸，格式為widthxheight，寬高數值以 css 的 px 為單位。如果需要填寫多個尺寸，則使用空格進行間隔，如"48x48 96x96 128x128"
start_url: {string=} 應用啟動地址
scope: {string} 作用域
    // scope 應遵循如下規則：

    //如果沒有在 manifest 中設置 scope，則默認的作用域為 manifest.json 所在文件夾；
    //scope 可以設置為 ../ 或者更高層級的路徑來擴大PWA的作用域；
    //start_url 必須在作用域范圍內；
    //如果 start_url 為相對地址，其根路徑受 scope 所影響；
    //如果 start_url 為絕對地址（以 / 開頭），則該地址將永遠以 / 作為根地址；
background_color: {Color} css色值 可以指定啟動畫面的背景顏色。
display: {string} 顯示類型
    //fullscreen    應用的顯示界面將占滿整個屏幕    
    //standalone    瀏覽器相關UI（如導航欄、工具欄等）將會被隱藏
    //minimal-ui    顯示形式與standalone類似，瀏覽器相關UI會最小化為一個按鈕，不同瀏覽器在實現上略有不同
    //browser    瀏覽器模式，與普通網頁在瀏覽器中打開的顯示一致
orientation: string 應用顯示方向
    //orientation屬性的值有以下幾種：
    //landscape-primary
    //landscape-secondary
    //landscape
    //portrait-primary
    //portrait-secondary
    //portrait
    //natural
    //any
theme_color: {Color} // css色值theme_color 屬性可以指定 PWA 的主題顏色。可以通過該屬性來控制瀏覽器 UI 的顏色。比如 PWA 啟動畫面上狀態欄、內容頁中狀態欄、地址欄的顏色，會被 theme_color 所影響。
related_applications: Array. 關聯應用列表 可以引導用戶下載原生應用
    platform: {string} 應用平臺
    id: {string} 應用id

我們都是通知就是在我們設備上彈出的消息。通知可以是本地觸發的，也可以是服務器推送的，而且我們的應用當時并沒有運行。消息推送可以使App的更新提醒，也可能是我們感興趣的內容。

當我們的web可以實現push的時候，web的體驗就里Native APP更近一步了。

Push Notifications 由兩個API構成：

Notifications API 用來顯示系統的通知

Push API 用來處理Server下發的push消息

這兩個API都是建立在在Service Worker API基礎上的，Service Worker 在后臺響應推送消息時間，并把他們傳遞給應用。

Notification

在創建通知之前，應該先獲取用戶的許可：

// main.js
Notification.requestPermission(function(status) {
    console.log("Notification permission status:", status);
    //status 會有三個取值default granted denied 分別代表： 默認值（每次訪問頁面都詢問）、 允許、拒絕
});

獲取到用戶的許可之后，就可以通過 showNotification()方法來限制主應用程序的通知。

// main.js
function displayNotification() {
  if (Notification.permission == "granted") {
    navigator.serviceWorker.getRegistration().then(function(reg) {
      reg.showNotification("Hello world!");
    });
  }
}

要注意showNotification，在Service Woker注冊對象上調用該方法。將在活動Service Worker上創建通知，以便監聽與通知交互觸發的事件。

showNotification方法有可選項參數options，用于配置通知。

// main.js
function displayNotification() {
  if (Notification.permission == "granted") {
    navigator.serviceWorker.getRegistration().then(function(reg) {
      var options = {
        body: "Here is a notification body!", // 對通知添加描述
        icon: "images/example.png", // 添加一個icon圖像
        vibrate: [100, 50, 100], // 指定通知的電話振動模式，手機將振動100ms，暫停50ms，再次振動100ms
        data: {
          dateOfArrival: Date.now(),
          primaryKey: 1
        }, // 給通知添加自定義數據，當監聽到通知的時候，可以捕獲到這些數據，方便使用。
        actions: [
          {action: "explore", title: "Explore this new world",
            icon: "images/checkmark.png"},
          {action: "close", title: "Close notification",
            icon: "images/xmark.png"},
        ] // 自定義的操作
     };
      reg.showNotification("Hello world!", options);
    });
  }
}

用戶收到通知之后，通過對通知的操作，就會觸發監聽的Notifications的相關事件，比如在關閉通知的時候就會有notificationclose事件。

// service-worker.js
self.addEventListener("notificationclick", function(e) {
  var notification = e.notification;
  var primaryKey = notification.data.primaryKey;
  var action = e.action;

  if (action === "close") {
    notification.close();
  } else {
    clients.openWindow("http://www.example.com");
    notification.close();
  }
});

Push

通知操作要結合push，才能實現與用戶的交互，主動通知、提醒用戶

每個瀏覽器都有一個push service(推送服務),當用戶授權當前網站的push權限的時候，就可以將當前網站訂閱到瀏覽器的push service。這就會創建一個訂約對象，其中包含推送服務的endpoint和公鑰（keys）。當下發push消息的時候，就會發送到endpoint這個URL，并用公鑰進行加密，push service就會發送到正確的客戶端。

推送服務如何知道將消息發送到哪個客戶端？端點URL包含唯一標識符。此標識符用于路由您發送到正確設備的消息，并在瀏覽器處理時標識應處理請求的Service Worker。

推送通知和Service Worker是匹配工作的，所以要求推送通知也必須是HTTPS，這就確保了服務器和push service之間通信是安全的，并且從push service到用戶也是安全的。

但是，HTTPS不能確保push service本身是安全的。我們必須確保從服務器發送到客戶端的數據不會被任何第三方篡改或直接檢查。所以必須加密服務器上的消息。

整個發送接收展示的過程
在客戶端:
1.訂閱推送服務
2.將訂閱對象發送到服務器
在服務器:
1.生成給用戶下發的數據
2.使用用戶的公鑰加密數據
3.使用加密數據的有效負載將數據發送的endpoint URL
消息將路由到用戶的設備。喚醒瀏覽器，找到正確的Service Worker并調用推送事件。
1.在推送事件中接收消息數據(如果有)
2.在推送事件中執行自定義邏輯
3.顯示通知

當支持推送消息的瀏覽器收到消息時，它會向Service Worker發送一個push事件。我們可以在Service Worker中創建一個 push事件監聽器來處理消息：

// service-worker.js

self.addEventListener("push", function(e) {
  var options = {
    body: "This notification was generated from a push!",
    icon: "images/example.png",
    vibrate: [100, 50, 100],
    data: {
      dateOfArrival: Date.now(),
      primaryKey: "2"
    },
    actions: [
      {action: "explore", title: "Explore this new world",
        icon: "images/checkmark.png"},
      {action: "close", title: "Close",
        icon: "images/xmark.png"},
    ]
  };
  e.waitUntil(
    self.registration.showNotification("Hello world!", options)
  );
});

與之前不同的地方就是，這里監聽的是push事件，之前是notification事件，并且，這里用了event.waitUntil方法來延長push事件的生命周期，到showNotification異步操作執行完成。

在發送推送消息之前，我們必須首先訂閱推送服務。訂閱返回訂閱對象或者是一個subscription。它是整個過程中很關鍵一個部分，我們才能知道push發送到哪里。

// main.js
//檢查是否訂閱了
    if ("serviceWorker" in navigator) {
        navigator.serviceWorker.register("sw.js").then(function (reg) {
                console.log("Service Worker Registered!", reg);

                reg.pushManager.getSubscription().then(function (sub) {
                    if (sub === null) {
                        // Update UI to ask user to register for Push
                        console.log("Not subscribed to push service!");
                    } else {
                        // We have a subscription, update the database
                        console.log("Subscription object: ", sub);
                    }
                });
            })
            .catch(function (err) {
                console.log("Service Worker registration failed: ", err);
            });
    }

    function subscribeUser() {
        if ("serviceWorker" in navigator) {
            navigator.serviceWorker.ready.then(function (reg) {

                reg.pushManager.subscribe({
                    userVisibleOnly: true
                }).then(function (sub) {
                    console.log("Endpoint URL: ", sub.endpoint);
                }).catch(function (e) {
                    if (Notification.permission === "denied") {
                        console.warn("Permission for notifications was denied");
                    } else {
                        console.error("Unable to subscribe to push", e);
                    }
                });
            })
        }
    }

Web Push協議是發送發往瀏覽器的推送消息的正式標準。它描述了如何創建推送消息，加密推送消息并將其發送到推送消息傳遞平臺的結構和流程。該協議抽象出用戶具有哪個消息傳遞平臺和瀏覽器的細節。

Web Push協議很復雜，但我們不需要了解所有細節。瀏覽器自動負責使用推送服務訂閱用戶。作為開發人員，我們的工作是獲取訂閱令牌，提取URL并向那里發送消息。

{"endpoint":"https://fcm.googleapis.com/fcm/send/dpH5lCsTSSM:APA91bHqjZxM0VImWWqDRN7U0a3AycjUf4O-byuxb_wJsKRaKvV_iKw56s16ekq6FUqoCF7k2nICUpd8fHPxVTgqLunFeVeB9lLCQZyohyAztTH8ZQL9WCxKpA6dvTG_TUIhQUFq_n",
"keys": {
    "p256dh":"BLQELIDm-6b9Bl07YrEuXJ4BL_YBVQ0dvt9NQGGJxIQidJWHPNa9YrouvcQ9d7_MqzvGS9Alz60SZNCG3qfpk=",
    "auth":"4vQK-SvRAN5eo-8ASlrwA=="
    }
}

通常用VSPID身份驗證來識別身份。
直接上一個例子，客戶端生成

//main.js
    var endpoint;
    var key;
    var authSecret;

    // We need to convert the VAPID key to a base64 string when we subscribe
    function urlBase64ToUint8Array(base64String) {
      const padding = "=".repeat((4 - base64String.length % 4) % 4);
      const base64 = (base64String + padding)
        .replace(/-/g, "+")
        .replace(/_/g, "/");

      const rawData = window.atob(base64);
      const outputArray = new Uint8Array(rawData.length);

      for (let i = 0; i < rawData.length; ++i) {
        outputArray[i] = rawData.charCodeAt(i);
      }
      return outputArray;
    }

    function determineAppServerKey() {
      var vapidPublicKey = "BAyb_WgaR0L0pODaR7wWkxJi__tWbM1MPBymyRDFEGjtDCWeRYS9EF7yGoCHLdHJi6hikYdg4MuYaK0XoD0qnoY";
      return urlBase64ToUint8Array(vapidPublicKey);
    }

    if ("serviceWorker" in navigator) {
      navigator.serviceWorker.register("sw.js").then(function (registration) {

        return registration.pushManager.getSubscription()
          .then(function (subscription) {

            if (subscription) {
              // We already have a subscription, let"s not add them again
              return;
            }

            return registration.pushManager.subscribe({
                userVisibleOnly: true,
                applicationServerKey: determineAppServerKey()
              })
              .then(function (subscription) {

                var rawKey = subscription.getKey ? subscription.getKey("p256dh") : "";
                key = rawKey ? btoa(String.fromCharCode.apply(null, new Uint8Array(rawKey))) : "";
                var rawAuthSecret = subscription.getKey ? subscription.getKey("auth") : "";
                authSecret = rawAuthSecret ?
                  btoa(String.fromCharCode.apply(null, new Uint8Array(rawAuthSecret))) : "";

                endpoint = subscription.endpoint;

                return fetch("http://localhost:3111/register", {
                  method: "post",
                  headers: new Headers({
                    "content-type": "application/json"
                  }),
                  body: JSON.stringify({
                    endpoint: subscription.endpoint,
                    key: key,
                    authSecret: authSecret,
                  }),
                })

              });
          });
      }).catch(function (err) {
        // registration failed :(
        console.log("ServiceWorker registration failed: ", err);
      });
    }
  

// server.js

const webpush = require("web-push");
const express = require("express");
var bodyParser = require("body-parser");
var path = require("path");
const app = express();

// Express setup
app.use(express.static("public"));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({     // to support URL-encoded bodies
  extended: true
}));

function saveRegistrationDetails(endpoint, key, authSecret) {
  // Save the users details in a DB
}

webpush.setVapidDetails(
  "mailto:contact@deanhume.com",
  "BAyb_WgaR0L0pODaR7wWkxJi__tWbM1MPBymyRDFEGjtDCWeRYS9EF7yGoCHLdHJi6hikYdg4MuYaK0XoD0qnoY",
  "p6YVD7t8HkABoez1CvVJ5bl7BnEdKUu5bSyVjyxMBh0"
);

// Send a message
app.post("/sendMessage", function (req, res) {

  var endpoint = req.body.endpoint;
  var authSecret = req.body.authSecret;
  var key = req.body.key;

  const pushSubscription = {
    endpoint: req.body.endpoint,
    keys: {
      auth: authSecret,
      p256dh: key
    }
  };

  var body = "Breaking News: Nose picking ban for Manila police";
  var iconUrl = "https://raw.githubusercontent.com/deanhume/progressive-web-apps-book/master/chapter-6/push-notifications/public/images/homescreen.png";

  webpush.sendNotification(pushSubscription,
    JSON.stringify({
      msg: body,
      url: "http://localhost:3111/article?id=1",
      icon: iconUrl,
      type: "actionMessage"
    }))
    .then(result => {
      console.log(result);
      res.sendStatus(201);
    })
    .catch(err => {
      console.log(err);
    });
});

// Register the user
app.post("/register", function (req, res) {

  var endpoint = req.body.endpoint;
  var authSecret = req.body.authSecret;
  var key = req.body.key;

  // Store the users registration details
  saveRegistrationDetails(endpoint, key, authSecret);

  const pushSubscription = {
    endpoint: req.body.endpoint,
    keys: {
      auth: authSecret,
      p256dh: key
    }
  };

  var body = "Thank you for registering";
  var iconUrl = "/images/homescreen.png";

  webpush.sendNotification(pushSubscription,
    JSON.stringify({
      msg: body,
      url: "https://localhost:3111",
      icon: iconUrl,
      type: "register"
    }))
    .then(result => {
      console.log(result);
      res.sendStatus(201);
    })
    .catch(err => {
      console.log(err);
    });

});

// The server
app.listen(3111, function () {
  console.log("Example app listening on port 3111!")
});

后面再多帶帶寫一篇文章詳細說整個push過程。

也可以看先Google給出的教程描述https://developers.google.com/web/ilt/pwa/introduction-to-push-notifications#push_api

Progressive Web Apps Training

App Shell

Service Workers: an Introduction

MDN Progressive web apps

MDN WorkerGlobalScope ^[1]

The Service Worker Lifecycle

W3C IndexedDB API 3.0

Introduction to Push Notifications