（最近あまり聞かなくなりましたが）扱ったことがなかったので、PWA(Progressive Web Apps) を試してみようと思います。

WebページをPWAとして設定することで以下のことができます。

Webアプリなのに、ネイティブアプリのように、Android/Windowsにアプリとして登録することができる。
ブラウザのアドレスバーのようなブラウザっぽくなく、全画面でネイティブアプリのように起動することができる。

PWAのService Workerの機能を使った実装をすることで、以下のことができます。

Webコンテンツをキャッシュ化することができ、オフラインで動かすことができる。
サーバ側からPush通知ができる。

ということで、今回の投稿では、PWAの設定方法と、Push通知の実装をしてみます。

ただ作るだけではモチベーションが上がらないので、パスワード管理アプリ「パスワードマネージャ」を作成します。
世の中にいろいろなツールがありますが、やっぱり自分で管理したいので。。。

毎度ながら、ソースコード一式をGitHubに上げておきました。

poruruba/pwa_test
　https://github.com/poruruba/pwa_test

PWAの設定

以下を準備する必要があります。

manifest.jsonを作成し、配備します。
ServiceWorker起動のためのJavascriptを作成し、配備します。

※ただし、上記を配備するWebサーバは、HTTPSである必要があります。

manifest.json

こんな感じにします。

public/manifest.json

{"short_name":"パスワードマネージャ","name":"パスワードマネージャ","display":"standalone","start_url":"index.html","icons":[{"src":"img/192x192.png","sizes":"192x192","type":"image/png"}]}

上述の通り、最低限192x192のpngファイルが必要です。
あとは、このmanifest.jsonをルートに配置し、index.htmlから、以下のようにして読み出すようにします。

public/index.html

・・・
  <linkrel="manifest"href="manifest.json">・・・

Service WorkerのためのJavascript

こんな感じです。

public/sw.js

varCACHE_NAME='pwa-sample-caches';varurlsToCache=[// キャッシュ化したいコンテンツ];self.addEventListener('install',function(event){console.log('sw event: install called');event.waitUntil(caches.open(CACHE_NAME).then(function(cache){returncache.addAll(urlsToCache);}));});self.addEventListener('fetch',function(event){console.log('sw event: fetch called');event.respondWith(caches.match(event.request).then(function(response){returnresponse?response:fetch(event.request);}));});self.addEventListener('push',function(event){console.log('sw event: push called');varnotificationDataObj=event.data.json();varcontent={body:notificationDataObj.body,};event.waitUntil(self.registration.showNotification(notificationDataObj.title,content));});

補足します。

self.addEventListener('install', function(event) {
self.addEventListener('fetch', function(event) {

は、Webコンテンツをキャッシュ化する場合に必要です。
ただし、Webコンテンツをキャッシュ化しなくとも、中身は無くてもよいですが、self.addEventListener('install', function(event){ は必要です。

self.addEventListener('push', function(event) {

は、Push通知を利用する場合に必要です。後述します。

あとは、Webページがロードされたときに、以下を実行すればServiceWorkerが登録されます。Javascriptのファイル名は、sw.jsの前提です。

public/start.js

・・・if('serviceWorker'innavigator){navigator.serviceWorker.register('sw.js').then(async(registration)=>{console.log('ServiceWorker registration successful with scope: ',registration.scope);}).catch((err)=>{console.log('ServiceWorker registration failed: ',err);});}・・・

ロードされたかどうかは、Chromeの開発ツールで確認することができます。
F12で開発ツールを開いたのち、Applicationタブを選択すると、左側に「Service Workers」があります。

ServiceWorkerのためのJavascriptはソースファイルを更新しても、Chrome内に登録されたものは更新されませんので、この開発ツールから、UpdeteやUnregisterをすることができます。

で、アドレスバーの右隅に、⊕ があるのがわかりますでしょうか。
これが、このWebページがPWAとして登録できることを示しています。
OSによってここらへんの表現は異なります。これをクリックすると、こんなのが表示されます。

「インストール」ボタンを押下すると、PWAアプリとして登録され、完了すると、以下のように単独のページとして表示されます。

これが、PWAのアプリです。アドレスバーがないのがわかります。Webアプリではなくネイティブアプリに見えますよね。
スタートメニューにも、Chromeアプリのところですが、「パスワードマネージャ」が登録されています。

いつでも、これをクリックすることで、アプリとして起動できるようになりました。

Push通知の実装

Node.jsのnpmモジュールのおかげで、サーバ側をすぐに立ち上げることができます。

web-push-libs/web-push
　https://github.com/web-push-libs/web-push

また、パスワードマネージャの機能のために、以下のnpm モジュールも使っています。

uuidjs/uuid
　https://github.com/uuidjs/uuid

まず最初にするのが、VapidKeyの生成です。

api/controllers/password/index.js

asyncfunctionreadPasswordFile(apikey){try{varpwd=awaitfs.readFile(FILE_BASE+apikey+'.json','utf8');if(!pwd){pwd={vapidkey:webpush.generateVAPIDKeys(),list:[],objects:{}};awaitwritePasswordFile(apikey,pwd);}else{pwd=JSON.parse(pwd);}returnpwd;}catch(error){throw"not found";}}

大事なのは以下の部分です。VAPIKEYという公開鍵ペアの作成です。

vapidkey : webpush.generateVAPIDKeys()

最初に生成した後は、同じ値を使うので、上記の関数の中でこの値をファイルに保存しています。ファイルの中身はこんな感じです。

data/password/test.json

{"vapidkey":{"publicKey":"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx","privateKey":"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"},list:[],objects:{}}

このVapidKeyのうちの公開鍵vapidkey.publicKeyをクライアントに渡します。以下の部分です。通知先クライアントを区別するために、client_idとしてuuidを生成しそれも一緒に渡しています。

api/controllers/password/index.js

if(event.path=='/pwd-get-pubkey'){varuuid=uuidv4();returnnewResponse({result:{vapidkey:pwd.vapidkey.publicKey,client_id:uuid}});}else

クライアント側では以下の処理をしています。

public/js/start.js

varjson=awaitdo_post_apikey(base_url+'/pwd-get-pubkey',{},this.apikey);varobject=awaitregistration.pushManager.subscribe({userVisibleOnly:true,applicationServerKey:json.result.vapidkey});awaitdo_post_apikey(base_url+'/pwd-put-object',{client_id:json.result.client_id,object:object},this.apikey);this.client_id=json.result.client_id;Cookies.set('client_id',this.client_id,{expires:EXPIRES});

サーバ側から取得した公開鍵をregistration.pushManager.subscribeに渡しています。
そうすることで、通知のSubscribeが完了し、Push Subscriptionオブジェクトを取得できますので、それをサーバに返してあげます。

Push Subscriptionオブジェクトの内容はこんな感じです。

{
　endpoint: "https://fcm.googleapis.com/fcm/send/XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
　expirationTime: null
　keys: {
　　auth: "XXXXXXXXXXXXXXXXX"
　　p256dh: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
　}
}

一緒に、さっきもらったclient_idも一緒にサーバに戻しておきます。client_idのやり取りはPush通知の実装では必須ではないので、適当な実装でもよいです。

サーバ側ではそのPush Subscriptionオブジェクトを受けとって、後でNotificationするときに必要なので、これもファイルに保存しておきます。

api/controllers/password/index.js

if(event.path=='/pwd-put-object'){pwd.objects[body.client_id]=body.object;awaitwritePasswordFile(apikey,pwd);awaitsendNotification(pwd.vapidkey,pwd.objects[body.client_id],{title:"パスワードマネージャ",body:"通知を登録しました。"});returnnewResponse({});}else

準備ができたので、後は任意のタイミングで、sendNotification関数を呼び出します。上記のタイミングでも呼び出しています。
中身は以下の感じです。

api/controllers/password/index.js

asyncfunctionsendNotification(vapidkey,object,content){varoptions={vapidDetails:{subject:NOTIFICATION_SUBJECT,publicKey:vapidkey.publicKey,privateKey:vapidkey.privateKey}};varresult=awaitwebpush.sendNotification(object,Buffer.from(JSON.stringify(content)),options);if(result.statusCode!=201)throw"status is not 201";}

webpush.sendNotification() に必要なパラメータを設定して呼び出しています。

通知したい内容は、contentのところで指定します。
例えばこんな感じです。

　{ title: "パスワードマネージャ", body: "通知を登録しました。"}

このフォーマットは、なんでもよいのですが、受信する側では把握している前提です。

クライアント側の方は、Push通知を受け付けられるように、コールバック関数を実装しておく必要があります。ServiceWorkerのためのJavascriptに実装します。

sw.js

self.addEventListener('push',function(event){console.log('sw event: push called');varnotificationDataObj=event.data.json();varcontent={body:notificationDataObj.body,};event.waitUntil(self.registration.showNotification(notificationDataObj.title,content));});