NuxtにおけるPWAの追加js

ほとんどの人々はそれが本当にNuxtとPWAを追加する方法を簡単に実現しないでください.js進歩的なWebアプリ(PWA)は、単一のコードベースを持つ任意のデバイス上で、どこでも、誰にも到達しながら、ネイティブのような能力、信頼性、およびインストール可能性を提供します.あなたは、より良いオフラインサポートだけでなく、ルックアンドフィールのようなアプリの利点を与えるPWAにあなたのウェブサイトを有効にすることができます.ちょうどホーム画面に保存し、そこからそれを開いてどのように驚くべきことが表示されます.
NuxtJS PWAモジュールは、サービスの労働者をオフラインキャッシュに対処するために登録します.

マニフェストを自動的に生成します.JSONファイル

これは自動的にマニフェストの統合とSEOフレンドリーなメタデータを追加します

それは自動的に別のサイズでアプリのアイコンを生成する

そして、あなたも、One信号を使用して無料プッシュ通知を設定することができます

OKので自動的にたくさんのので、何をする必要がありますか?
NPMパッケージのインストール

yarn add @nuxtjs/pwa 
or
npm i @nuxtjs/pwa

2 )モジュールをNuxtに追加します.設定.jsファイル

{
    modules: [
        '@nuxtjs/pwa',
    ]
}

3 )アイコンを追加します.PNGファイルをstatic ディレクトリ.それは正方形でなければならなくて、少なくとも512 px x 512 pxでなければなりません.
4 )あなたの.Gitignoreファイルは、サービスワーカーファイルを無視します.

sw.*

そして、それはあなたが現在PWAを持っていて、走ることです.
また、例えば、タイトル、著者名または名前を変更することによって、PWAをカスタマイズすることができます.デフォルトではpackage.json 名前と著者ですが、pwa キーインユアnuxt.config.js ファイルと変更meta or manifest プロパティ.

pwa: {
  meta: {
    title: 'My PWA',
    author: 'Me',
  },
  manifest: {
    name: 'Nuxt.js PWAs are so easy',
    short_name: 'Nuxt.js PWA',
    lang: 'en',
  },
}

あなたのPWAのためのメタオプションの完全なリストのためにthe Nuxt PWA docs