✨ 次の作り方.JSアプリオフラインサポートとPWA

16172 ワード
pwa react javascript nextjs テキストリンク

皆さんこんにちは👋


今日の記事では、我々はどのように我々は次のPWAを作ることができます表示されます.JSアプリ!そして、最大の機能が非常に少しの構成でオフラインサポートであるので、それは非常に刺激的であるつもりです!

📃 インデックス

  • Project code
  • next-pwa package
  • Getting assets
  • Web manifest file
  • PWA Configuration
  • Offline fallback page
    • 私たちが移動する前に、私はあなたがビデオと一緒に次の快適されている場合、これについてのYouTubeで私のビデオをチェックすることをお勧めしたいと思います.任意の提案、またはあなたが持っている疑問についてのコメントを残してください🙂.

    1プロジェクトコード


    このデモについては、すでに起動またはテストするために使用できる簡単なプロジェクトのセットアップがあります.
    ソースをダウンロードするか、repoをクローンします.GitHub Link

    This repository has 2 branches, the main one contains the starter code and the pwa branch contains the complete code.


    次のPWAパッケージ


    次のステップはNPMパッケージをインストールすることです.それはあなたのためのすべてを自動的に行う偉大なパッケージです.
    npm i next-pwa
# or yarn add next-pwa

    資産の取得


    あなたはPWAを作ることに精通している場合は、我々はすでにさまざまなデバイス上で適切に機能するために我々のアプリのロゴの異なるサイズを必要と知っている.私は、異なるサイズでこれらのイメージを生成するために、非常に良いウェブサイトを見つけました.
    あなたは簡単に行くことができますIcongen を選択します.このチュートリアルのために、私はこれらのイメージを生成しています.アップロードvercel.svg またはあなたの既存のロゴ.

    すべての画像を取得した後、新しいフォルダにicons プロジェクトの中でpublic フォルダ.
    ファイル名をすべて変更するicon-{size}x{size}.png . 例えば、icon-192x192.png
    また、maskable.png このチュートリアルでは、オンラインで作成することもできます192x192 マスカブルアイコンのサイズのアイコン.

    4 . Webマニフェストファイル


    今、我々はアプリケーションについてのメタデータのファイルを作成する必要があります.ファイル名manifest.json にpublic フォルダからファイルの内容をコピーしますhere .
    プロジェクトに従ってコンテンツを入力することができます
    {
  "short_name": "Next PWA",
  "name": "Next PWA Tutorial",
  "description": "...",
  "icons": [
    {
      "src": "/icons/icon-36x36.png",
      "type": "image/png",
      "sizes": "36x36"
    },
    {
      "src": "/icons/icon-48x48.png",
      "type": "image/png",
      "sizes": "48x48"
    },
    {
      "src": "/icons/icon-72x72.png",
      "type": "image/png",
      "sizes": "72x72"
    },
    {
      "src": "/icons/icon-96x96.png",
      "type": "image/png",
      "sizes": "96x96"
    },
    {
      "src": "/icons/icon-144x144.png",
      "type": "image/png",
      "sizes": "144x144"
    },
    {
      "src": "/icons/icon-192x192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/icons/icon-512x512.png",
      "type": "image/png",
      "sizes": "512x512"
    },
    {
      "src": "/icons/maskable.png",
      "type": "image/png",
      "sizes": "192x192",
      "purpose": "maskable"
    }
  ],
  "start_url": "/",
  "background_color": "#FFFFFF",
  "display": "standalone",
  "scope": "/",
  "theme_color": "#000000"
}
    今、あなたはリンクする必要がありますmanifest.json ファイルを次の.js<Head> すべてのページのコンポーネント.
    <Head>
  <link rel='manifest' href='/manifest.json' />
</Head>

    PWAの設定


    最初のステップでは、next-pwa 今すぐ利用するNPMパッケージ.プロジェクトのルートでnext.config.js または既に存在する場合に編集します.
    我々は、インポートwithPWA パッケージから機能し、その関数でエクスポートをラップするpwa このように設定するオブジェクト👇
    The dest プロパティは宛先フォルダで、disable 開発中にサービスワーカーを作成できないプロパティ.
    const withPWA = require('next-pwa');

module.exports = withPWA({
  pwa: {
    dest: 'public',
    disable: process.env.NODE_ENV === 'development',
  },
  reactStrictMode: true,
});

    オフラインフォールバックページ


    また、我々はまた、ユーザーがオフラインであるかどうかを表示するページを追加することができます、これはユーザーエクスペリエンスを強化し、実際のアプリのように動作します.
    ページを追加_offline.js あなたのpages フォルダとnext-pwa ユーザーがオフラインの場合、自動的にそのページが表示されます.しかし、ユーザーが最初にウェブサイトを訪問するたびに、オフラインのページがキャッシュされるように、ユーザーはウェブサイトを訪問しなければならないということです.
    以下はオフラインページの例です.

    👆 Easy Pastes



    👆



    👆 Google Meet


    最後のタッチは、これらのファイルをあなたの.gitignore これらのサービスワーカーファイルをnext-pwa
    # PWA files
**/public/precache.*.*.js
**/public/sw.js
**/public/workbox-*.js
**/public/worker-*.js
**/public/fallback-*.js
**/public/precache.*.*.js.map
**/public/sw.js.map
**/public/workbox-*.js.map
**/public/worker-*.js.map
**/public/fallback-*.js
    そして、我々は正常にプロセスを完了し、今あなたの次.JSアプリはオフラインで使用することができます、アプリとしてインストール可能であり、また、PWAです.


    私はそれはあなたがあなたのアプリをPWAを作るのを助け、私はコメントであなたの経験を知っているし、それを簡単にあまりにもできるように人々と共有することができます.
    [php]パス名アドレスの分割
    struct、クラスのメモリ割り当て