next pwa
5.6.1
Plugin ini didukung oleh kotak kerja dan hal bagus lainnya.
Bagikan proyek PWA Anda yang luar biasa di sini
Fitur
next-i18nextblitz.config.js ).module.js ketika next.config.js memiliki experimental.modern yang disetel ke trueCATATAN 1 -
next-pwaversi 2.0.0+ seharusnya hanya berfungsi dengannext.js9.1+, dan file statis hanya boleh disajikan melalui direktoripublic. Ini akan membuat segalanya lebih sederhana.CATATAN 2 - Jika Anda mengalami kesalahan
TypeError: Cannot read property **'javascript' of undefined**selama pembuatan, harap pertimbangkan untuk meningkatkan ke webpack5 dinext.config.js.
Jika Anda baru mengenal
next.jsataureact.js, Anda mungkin ingin melakukan checkout terlebih dahulu untuk mempelajari dokumen next.js atau next.js. Kemudian mulai dari contoh sederhana atau contoh aplikasi web progresif di repositori next.js.
yarn add next-pwa Perbarui atau buat next.config.js dengan
const withPWA = require ( 'next-pwa' ) ( {
dest : 'public'
} )
module . exports = withPWA ( {
// next.js config
} ) Setelah menjalankan next build , ini akan menghasilkan dua file di public Anda: workbox-*.js dan sw.js , yang secara otomatis akan disajikan secara statis.
Jika Anda menggunakan Next.js versi 9 atau lebih baru, lewati opsi di bawah dan lanjutkan ke Langkah 2.
Jika Anda menggunakan Next.js yang lebih lama dari versi 9, Anda harus memilih opsi di bawah sebelum melanjutkan ke Langkah 2.
Salin file ke server hosting file statis Anda, sehingga dapat diakses dari jalur berikut: https://yourdomain.com/sw.js dan https://yourdomain.com/workbox-*.js .
Salah satu contohnya adalah menggunakan layanan hosting Firebase untuk menghosting file-file tersebut secara statis. Anda dapat mengotomatiskan langkah penyalinan menggunakan skrip dalam alur kerja penerapan Anda.
Demi alasan keamanan, Anda harus menghosting file ini langsung dari domain Anda. Jika konten dikirimkan menggunakan pengalihan, browser akan menolak menjalankan pekerja layanan.
Saat permintaan HTTP diterima, uji apakah file tersebut diminta, lalu kembalikan file statis tersebut.
Contoh 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 } ` )
} )
} )Pengaturan berikut tidak ada hubungannya dengan plugin
next-pwa, dan Anda mungkin sudah menyiapkannya. Jika tidak, lanjutkan dan atur.
Buat file manifest.json di folder public Anda:
{
"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 "
} Tambahkan yang berikut ini ke _document.jsx atau _app.tsx , di :
< 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 " />
Tip: Masukkan tag meta kepala
viewportke_app.jsbukan di_document.jsjika Anda memerlukannya.
< meta
name = 'viewport'
content = 'minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, user-scalable=no, viewport-fit=cover'
/ > Fallback offline berguna ketika pengambilan gagal dari cache dan jaringan, sumber daya yang di-cache disajikan alih-alih menampilkan kesalahan dari browser.
Untuk memulai cukup tambahkan halaman /_offline seperti pages/_offline.js atau pages/_offline.jsx atau pages/_offline.ts atau pages/_offline.tsx . Maka Anda sudah siap! Saat pengguna offline, semua halaman yang tidak di-cache akan dikembalikan ke '/_offline'.
Gunakan contoh ini untuk melihatnya beraksi
next-pwa membantu Anda melakukan pra-cache sumber daya tersebut pada pemuatan pertama, lalu memasukkan penangan fallback ke plugin handlerDidError ke semua konfigurasi runtimeCaching , sehingga sumber daya yang telah di-pra-cache disajikan ketika pengambilan gagal.
Anda juga dapat mengatur precacheFallback.fallbackURL di entri konfigurasi runtimeCaching Anda untuk mengimplementasikan fungsi serupa. Perbedaannya adalah metode di atas didasarkan pada jenis sumber daya, metode ini didasarkan pada pola url yang cocok. Jika konfigurasi ini disetel di entri konfigurasi runtimeCaching, fallback berbasis jenis sumber daya akan dinonaktifkan secara otomatis untuk pola url khusus ini guna menghindari konflik.
Ada opsi yang dapat Anda gunakan untuk menyesuaikan perilaku plugin ini dengan menambahkan objek pwa pada konfigurasi berikutnya di next.config.js :
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 , sehingga akan menghasilkan pekerja layanan di dev dan proddisable: true untuk menonaktifkan PWA sepenuhnyadev , Anda dapat mengatur disable: process.env.NODE_ENV === 'development'truefalse ketika Anda ingin menangani sendiri pekerja layanan pendaftaran, ini bisa dilakukan di componentDidMount aplikasi root Anda. Anda dapat mempertimbangkan register.js sebagai contoh.basePath di next.config.js atau //app sehingga jalur di bawah /app akan menjadi PWA sementara yang lain tidak/sw.jspublic agar tidak di-cache sebelumnya.['!noprecache/**/*'] - ini berarti bahwa perilaku default akan melakukan pra-cache semua file di dalam folder public Anda kecuali file di dalam folder /public/noprecache . Anda cukup memasukkan file ke dalam folder itu untuk tidak melakukan precache tanpa melakukan konfigurasi ini.['!img/super-large-image.jpg', '!fonts/not-used-fonts.otf'].next/static (atau build kustom Anda)[][/chunks/images/.*$/] - Jangan melakukan precache file di bawah .next/static/chunks/images (Sangat merekomendasikan ini untuk bekerja dengan plugin next-optimized-images )truetruecacheStartUrl disetel ke true/login , disarankan untuk menyiapkan url pengalihan ini untuk pengalaman pengguna terbaik.undefineddynamicStartUrlRedirect disetel ke true/_offline seperti pages/_offline.js dan Anda sudah siap, tidak perlu konfigurasiobjectfallbacks.document - rute fallback untuk dokumen (halaman), default ke /_offline jika Anda membuat halaman itufallbacks.image - rute fallback untuk gambar, defaultnya tidak adafallbacks.audio - rute fallback untuk audio, defaultnya tidak adafallbacks.video - rute fallback untuk video, defaultnya tidak adafallbacks.font - rute fallback untuk font, defaultnya tidak adanext/link di ujung depan. Lihat contoh ini untuk mengetahui konteks mengapa hal ini diterapkan.false"" - yaitu default tanpa awalan/subdomain jika aplikasi dihosting di example.com/subdomainlocation.reload() untuk menyegarkan aplikasi.truenext-pwa mencari implementasi pekerja khusus untuk ditambahkan ke pekerja layanan yang dihasilkan oleh kotak kerja. Untuk informasi lebih lanjut, lihat contoh pekerja kustom.worker next-pwa menggunakan workbox-webpack-plugin , opsi lain yang juga dapat dimasukkan ke dalam objek pwa dapat ditemukan PADA DOKUMENTASI untuk GenerateSW dan InjectManifest. Jika Anda menentukan swSrc , plugin InjectManifest akan digunakan, jika tidak, GenerateSW akan digunakan untuk menghasilkan pekerja layanan.
next-pwa menggunakan cache.js runtime default
Ada kemungkinan besar Anda ingin menyesuaikan aturan caching runtime Anda sendiri. Silakan menyalin file cache.js default dan menyesuaikan aturan sesuka Anda. Jangan lupa untuk memasukkan konfigurasi ke dalam konfigurasi pwa Anda di next.config.js .
Berikut adalah dokumen tentang cara menulis konfigurasi cache runtime, termasuk sinkronisasi latar belakang dan fitur pembaruan siaran dan banyak lagi!
{command: 'doSomething', message: ''} saat postMessage ke pekerja layanan. Sehingga pada pendengar, ia dapat melakukan beberapa tugas berbeda menggunakan if...else... .clean application cache untuk mengurangi beberapa kesalahan yang tidak stabil.runtimeCaching seperti options.cacheableResponse.statuses=[200,302] .sw.js yang Anda buat untuk mencari tahu apa yang sebenarnya terjadi.next-pwa untuk menghasilkan build produksi kotak pekerja dengan menentukan opsi mode: 'production' di bagian pwa Anda di next.config.js . Meskipun next-pwa secara otomatis menghasilkan build pengembangan kotak pekerja selama pengembangan (dengan menjalankan next ) dan build produksi kotak pekerja selama produksi (dengan menjalankan next build dan next start ). Anda mungkin masih ingin memaksakannya ke build produksi bahkan selama pengembangan aplikasi web Anda karena alasan berikut:self.__WB_DISABLE_DEV_LOGS = true di worker/index.js Anda (buat satu jika Anda belum memilikinya).userAgent untuk menentukan apakah pengguna menggunakan Safari/iOS/MacOS atau platform lain, perpustakaan ua-parser-js adalah teman yang baik untuk tujuan itu. MIT
