Service Workerのカスタムロジックを使用して、Angular NGSWをポンピングします

Angularを使用してプログレッシブWebアプリケーション（PWA）を構築する

Angularは、PWAの開発に最適です。 PWAアプリケーションの開発を迅速に開始するために 、バージョン1.7.0以降、Angular CLIにはService Workerのサポートが含まれています 。 Service Workerは、多くのオプションと機能を提供するjson構成ファイルを使用して、Angularアプリケーションで構成できます。 これはすばらしいように聞こえますが、Angular Service Workerを使用することには大きな欠点が1つあります。そのロジックは標準的な方法で拡張できません。

NGSWの機能を拡張する必要があるのはなぜですか？

私の場合、プッシュ通知のクリックアクションを処理するカスタムクリック通知イベントリスナーを登録する必要がありました。 私は、Angular Service Workerがプッシュ通知の受信と表示で素晴らしい仕事をしていることを認めなければなりません-この部分は、開発者側の努力なしにngsw-worker.jsファイルによって処理されます。 そして、最初は、必要なロジックを提供する唯一の方法は、アプリケーションのビルド時に生成されたngsw-worker.jsファイルのコードを変更することであるように思われました。 しかし、私はこの方法が悪いことを理解しました-ngsw構成ファイルに変更を加えるたびにサポートされ、チェックされる必要があります。 幸いなことに、この問題は2つの追加ファイルを入力することで簡単に解決できることがわかりました。

解決策

/ srcフォルダーに2つの追加のjsファイルを作成することから始めましょう。



sw-custom.js-イベントリスナーを含むファイル：

(function () { 'use strict'; self.addEventListener('notificationclick', (event) => { event.notification.close(); console.log('notification details: ', event.notification); }); }());
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

sw-master.jsは、NGSWと独自のロジックを組み合わせたファイルです。

 importScripts('./ngsw-worker.js'); importScripts('./sw-custom.js');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

資産の登録

新しいスクリプトファイルを作成することで、Angularがビルド中にそれらを考慮するようにする必要があります。 技術的な観点から見ると、これらはプロジェクトの作成時にAngular CLIによって作成されたfavicon.icoファイルに類似したアセットです。 angular.jsonファイル（Angularの古いバージョンの場合は.angular-cli.json）に追加のリソースを登録できます。

 { ..., "assets": [ "src/favicon.ico", "src/assets", "src/manifest.json", "src/sw-master.js", "src/sw-reminders.js" ], ... }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Service Workerスクリプトの再登録

最後の手順は、アプリケーションの起動時に、Angularによって登録されたService Workerにエントリポイントを変更することです。 これを行うには、app.module.tsのServiceWorkerModule.registerエントリを次のように変更する必要があります。

 ServiceWorkerModule.register('/sw-master.js', { enabled: environment.production })
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

要約する

以上が、アプリケーションの実稼働アセンブリの後、新しいスクリプトファイルが/ distフォルダーにコピーされ、ServiceWorkerの登録時にアプリケーションによって使用されます。 詳細をご覧になりたい場合は、GitHubプロファイルをご覧ください。カスタムロジックで補完されたServiceWorkerを使用したAngularアプリケーションの例を投稿しました 。