next pwa
5.6.1
このプラグインはワークボックスやその他の優れた機能を利用しています。
素晴らしい PWA プロジェクトをここで共有してください
特徴
next-i18next例による国際化 (別名 I18N)blitz.config.jsに追加するだけ)next.config.jsにexperimental.modern trueに設定されている場合に.module.js事前キャッシュする注 1 -
next-pwaバージョン 2.0.0 以降はnext.js9.1 以降でのみ動作し、静的ファイルはpublicディレクトリを通じてのみ提供される必要があります。これにより、物事が簡単になります。注 2 - ビルド中にエラー
TypeError: Cannot read property **'javascript' of undefined**が発生した場合は、next.config.jsの webpack5 へのアップグレードを検討してください。
next.jsやreact.jsをまったく使用したことがない場合は、まず next.js または next.js のドキュメントをチェックアウトして学習してください。次に、next.js リポジトリの単純なサンプルまたはプログレッシブ Web アプリのサンプルから開始します。
yarn add next-pwanext.config.jsを更新または作成します。
const withPWA = require ( 'next-pwa' ) ( {
dest : 'public'
} )
module . exports = withPWA ( {
// next.js config
} ) next buildを実行すると、 publicにworkbox-*.jsとsw.js 2 つのファイルが生成され、自動的に静的に提供されます。
Next.js バージョン 9 以降を使用している場合は、以下のオプションをスキップしてステップ 2 に進みます。
バージョン 9 より古い Next.js を使用している場合は、ステップ 2 に進む前に、以下のオプションを選択する必要があります。
ファイルを静的ファイル ホスティング サーバーにコピーし、パスhttps://yourdomain.com/sw.jsおよびhttps://yourdomain.com/workbox-*.jsからアクセスできるようにします。
一例として、Firebase ホスティング サービスを使用してこれらのファイルを静的にホストすることが挙げられます。導入ワークフローでスクリプトを使用して、コピー手順を自動化できます。
セキュリティ上の理由から、これらのファイルはドメインから直接ホストする必要があります。コンテンツがリダイレクトを使用して配信される場合、ブラウザーは Service Worker の実行を拒否します。
HTTP リクエストを受信すると、それらのファイルがリクエストされているかどうかをテストし、それらの静的ファイルを返します。
例server.js
const { createServer } = require ( 'http' )
const { join } = require ( 'path' )
const { parse } = require ( 'url' )
const next = require ( 'next' )
const app = next ( { dev : process . env . NODE_ENV !== 'production' } )
const handle = app . getRequestHandler ( )
app . prepare ( ) . then ( ( ) => {
createServer ( ( req , res ) => {
const parsedUrl = parse ( req . url , true )
const { pathname } = parsedUrl
if ( pathname === '/sw.js' || / ^/(workbox|worker|fallback)-w+.js$ / . test ( pathname ) ) {
const filePath = join ( __dirname , '.next' , pathname )
app . serveStatic ( req , res , filePath )
} else {
handle ( req , res , parsedUrl )
}
} ) . listen ( 3000 , ( ) => {
console . log ( `> Ready on http://localhost: ${ 3000 } ` )
} )
} )次の設定は
next-pwaプラグインとは関係がありません。おそらくすでに設定されていると思います。そうでない場合は、先に進んで設定してください。
publicフォルダーにmanifest.jsonファイルを作成します。
{
"name" : " PWA App " ,
"short_name" : " App " ,
"icons" : [
{
"src" : " /icons/android-chrome-192x192.png " ,
"sizes" : " 192x192 " ,
"type" : " image/png " ,
"purpose" : " any maskable "
},
{
"src" : " /icons/android-chrome-384x384.png " ,
"sizes" : " 384x384 " ,
"type" : " image/png "
},
{
"src" : " /icons/icon-512x512.png " ,
"sizes" : " 512x512 " ,
"type" : " image/png "
}
],
"theme_color" : " #FFFFFF " ,
"background_color" : " #FFFFFF " ,
"start_url" : " / " ,
"display" : " standalone " ,
"orientation" : " portrait "
}以下を_document.jsxまたは_app.tsxのに追加します。
< meta name =" application-name " content =" PWA App " />
< meta name =" apple-mobile-web-app-capable " content =" yes " />
< meta name =" apple-mobile-web-app-status-bar-style " content =" default " />
< meta name =" apple-mobile-web-app-title " content =" PWA App " />
< meta name =" description " content =" Best PWA App in the world " />
< meta name =" format-detection " content =" telephone=no " />
< meta name =" mobile-web-app-capable " content =" yes " />
< meta name =" msapplication-config " content =" /icons/browserconfig.xml " />
< meta name =" msapplication-TileColor " content =" #2B5797 " />
< meta name =" msapplication-tap-highlight " content =" no " />
< meta name =" theme-color " content =" #000000 " />
< link rel =" apple-touch-icon " href =" /icons/touch-icon-iphone.png " />
< link rel =" apple-touch-icon " sizes =" 152x152 " href =" /icons/touch-icon-ipad.png " />
< link rel =" apple-touch-icon " sizes =" 180x180 " href =" /icons/touch-icon-iphone-retina.png " />
< link rel =" apple-touch-icon " sizes =" 167x167 " href =" /icons/touch-icon-ipad-retina.png " />
< link rel =" icon " type =" image/png " sizes =" 32x32 " href =" /icons/favicon-32x32.png " />
< link rel =" icon " type =" image/png " sizes =" 16x16 " href =" /icons/favicon-16x16.png " />
< link rel =" manifest " href =" /manifest.json " />
< link rel =" mask-icon " href =" /icons/safari-pinned-tab.svg " color =" #5bbad5 " />
< link rel =" shortcut icon " href =" /favicon.ico " />
< link rel =" stylesheet " href =" https://fonts.googleapis.com/css?family=Roboto:300,400,500 " />
< meta name =" twitter:card " content =" summary " />
< meta name =" twitter:url " content =" https://yourdomain.com " />
< meta name =" twitter:title " content =" PWA App " />
< meta name =" twitter:description " content =" Best PWA App in the world " />
< meta name =" twitter:image " content =" https://yourdomain.com/icons/android-chrome-192x192.png " />
< meta name =" twitter:creator " content =" @DavidWShadow " />
< meta property =" og:type " content =" website " />
< meta property =" og:title " content =" PWA App " />
< meta property =" og:description " content =" Best PWA App in the world " />
< meta property =" og:site_name " content =" PWA App " />
< meta property =" og:url " content =" https://yourdomain.com " />
< meta property =" og:image " content =" https://yourdomain.com/icons/apple-touch-icon.png " />
ヒント: 必要に応じて、
viewportヘッド メタ タグを_document.jsではなく_app.jsに配置します。
< meta
name = 'viewport'
content = 'minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, user-scalable=no, viewport-fit=cover'
/ > オフライン フォールバックは、キャッシュとネットワークの両方からの取得が失敗し、ブラウザからエラーが表示されるのではなく、事前にキャッシュされたリソースが提供される場合に役立ちます。
まず始めに、 pages/_offline.js 、 pages/_offline.jsx 、 pages/_offline.ts 、 pages/_offline.tsxなどの/_offlineページを追加するだけです。これで準備は完了です。ユーザーがオフラインの場合、キャッシュされていないすべてのページは「/_offline」にフォールバックします。
この例を使用して実際の動作を確認してください
next-pwa最初の読み込み時にこれらのリソースを事前キャッシュし、すべてのruntimeCaching構成にhandlerDidErrorプラグインへのフォールバック ハンドラーを挿入するのに役立ちます。これにより、フェッチが失敗したときに事前キャッシュされたリソースが提供されます。
runtimeCaching 構成エントリでprecacheFallback.fallbackURL設定して、同様の機能を実装することもできます。違いは、上記のメソッドはリソース タイプに基づいているのに対し、このメソッドは一致した URL パターンに基づいていることです。この構成が runtimeCaching 構成エントリで設定されている場合、競合を避けるために、この特定の URL パターンに対してリソース タイプ ベースのフォールバックが自動的に無効になります。
next.config.jsの次の構成にpwaオブジェクトを追加することで、このプラグインの動作をカスタマイズするために使用できるオプションがあります。
const withPWA = require ( 'next-pwa' ) ( {
dest : 'public'
// disable: process.env.NODE_ENV === 'development',
// register: true,
// scope: '/app',
// sw: 'service-worker.js',
//...
} )
module . exports = withPWA ( {
// next.js config
} )falsedisable: falseを設定すると、 devとprod両方で Service Worker が生成されます。disable: truedevで Service Worker をデバッグする必要がない場合は、 disable: process.env.NODE_ENV === 'development'truefalseに設定します。これは、ルート アプリのcomponentDidMountで実行できます。 register.js を例として考えてみましょう。next.config.jsのbasePathまたは//appに設定すると、 /appの下のパスは PWA になりますが、他のパスは PWA になりません。/sw.jspublicフォルダー内のファイルをプリキャッシュから除外するための glob パターン文字列の配列。['!noprecache/**/*'] - これは、デフォルトの動作では、 publicフォルダー内のすべてのファイル ( /public/noprecacheフォルダー内のファイルを除く) が事前キャッシュされることを意味します。この設定を行わずに、ファイルをそのフォルダー内に置くだけで事前キャッシュされないようにすることができます。['!img/super-large-image.jpg', '!fonts/not-used-fonts.otf'].next/static (またはカスタム ビルド) フォルダーのプリキャッシュからファイルを除外する追加のパターンまたは関数の配列[][/chunks/images/.*$/] - .next/static/chunks/imagesの下にファイルを事前キャッシュしないでください ( next-optimized-imagesプラグインで動作させるためにこれを強くお勧めします)truetruecacheStartUrl trueに設定されている場合に有効になります/loginなどの別のルートにリダイレクトされる場合、最高のユーザー エクスペリエンスを実現するために、このリダイレクトされた URL を設定することをお勧めします。undefineddynamicStartUrlRedirectがtrueに設定されている場合に有効になりますpages/_offline.jsなどの/_offlineページを作成するだけで準備完了です。構成は必要ありません。objectfallbacks.document - ドキュメント (ページ) のフォールバック ルート、そのページを作成した場合のデフォルトは/_offlinefallbacks.image - 画像のフォールバック ルート、デフォルトはなしfallbacks.audio - オーディオのフォールバック ルート、デフォルトはなしfallbacks.video - ビデオのフォールバック ルート、デフォルトはなしfallbacks.font - フォントのフォールバック ルート、デフォルトはなしnext/linkを使用してページ間を移動するときに追加のルート キャッシュを有効にします。これが実装される理由については、この例を確認してください。false"" - つまり、プレフィックスのないデフォルトexample.com/subdomainでホストされている場合は/subdomainlocation.reload()を呼び出す必要があるかどうかを示します。truenext-pwaワークボックスによって生成された Service Worker に追加するカスタム ワーカー実装を検索するディレクトリをカスタマイズします。詳細については、カスタム ワーカーの例を確認してください。workernext-pwa workbox-webpack-plugin使用します。pwa pwaに含めることができる他のオプションは、GenerateSW と InjectManifest のドキュメントにあります。 swSrcを指定した場合はInjectManifestプラグインが使用され、それ以外の場合はGenerateSW使用して Service Worker が生成されます。
next-pwaデフォルトのランタイムキャッシュ.js を使用します
独自のランタイム キャッシュ ルールをカスタマイズすることが必要になる可能性が非常に高くなります。デフォルトのcache.jsファイルを自由にコピーし、必要に応じてルールをカスタマイズしてください。 next.config.jsのpwa config に構成を忘れずに挿入してください。
バックグラウンド同期やブロードキャスト更新機能などを含む、ランタイム キャッシュ構成の作成方法に関するドキュメントは次のとおりです。
postMessageときは、 {command: 'doSomething', message: ''}オブジェクトのような規則を使用します。そのため、リスナーでは、 if...else...を使用して複数の異なるタスクを実行できます。clean application cache 。options.cacheableResponse.statuses=[200,302]のようにruntimeCachingで指定できます。 options.cacheableResponse.statuses=[200,302] 。sw.jsファイルをフォーマットしたい場合があります。next.config.jsのpwaセクションでオプションmode: 'production'を指定することで、 next-pwaに強制的にワーカー ボックスの運用ビルドを生成させます。ただし、 next-pwa開発中に ( next実行することで) ワーカー ボックスの開発ビルドを自動的に生成し、運用中に ( next buildとnext start実行することで) ワーカー ボックスの運用ビルドを自動的に生成します。次の理由から、Web アプリの開発中であっても、強制的に実稼働ビルドにしたい場合があります。worker/index.jsにself.__WB_DISABLE_DEV_LOGS = true入力します (ない場合は作成します)。userAgent文字列を使用する必要があるのは一般的であり、ua-parser-js ライブラリはその目的に適しています。 マサチューセッツ工科大学
