next offline
1.0.0
Gunakan WorkBox dengan Next.js dan
Mudah mengaktifkan fungsionalitas offline dalam aplikasi Anda!
$ npm install --save next-offline$ yarn add next-offline Ada dua hal penting yang harus diatur, pertama-tama kita perlu next-offline untuk membungkus konfigurasi Anda berikutnya.
Jika belum, buat next.config.js di proyek Anda.
// next.config.js
const withOffline = require ( 'next-offline' )
const nextConfig = {
...
}
module . exports = withOffline ( nextConfig )Selanjutnya kita perlu memastikan aplikasi kami melayani pekerja layanan dengan benar, pengaturan ini tergantung pada bagaimana Anda menjadi hosting aplikasi Anda. Ada dokumentasi di bawah ini. Jika Anda tidak menggunakan sekarang 2.0, contoh sekarang 1.0 harus bekerja di sebagian besar keadaan.
Karena pekerja layanan sangat kuat, API memiliki beberapa pembatasan. Misalnya, pekerja layanan harus dilayani di domain tempat mereka digunakan - Anda tidak dapat menggunakan CDN.
Anda ingin menggunakan API Server Kustom Next.js. Cara termudah untuk melakukannya adalah membuat server.js yang terlihat seperti ini:
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
// handle GET request to /service-worker.js
if ( pathname === '/service-worker.js' ) {
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 } ` )
} )
} )Anda dapat membaca lebih lanjut tentang server kustom di docs.js next.js
Jika Anda tidak hosting dengan sekarang, saya mungkin akan mengikuti pendekatan sekarang 1.0 karena API server khusus dapat memungkinkan banyak fungsionalitas, itu hanya tidak berfungsi dengan baik dengan sekarang 2.0? ♂️
Karena sekarang 2.0 bekerja sangat berbeda dari versi sebelumnya, begitu juga melayani pekerja layanan. Ada beberapa cara berbeda untuk melakukan ini, tetapi saya merekomendasikan untuk memeriksa aplikasi contoh sekarang2 ini. Perubahan yang harus diperhatikan ada di sekarang.json dan next.config.js.
Secara default next-offline akan mendaftarkan pekerja layanan dengan skrip di bawah ini, ini secara otomatis ditambahkan ke bundel sisi klien Anda setelah withOffline dipanggil.
if ( 'serviceWorker' in navigator ) {
window . addEventListener ( 'load' , function ( ) {
navigator . serviceWorker . register ( '/service-worker.js' , { scope : '/' } ) . then ( function ( registration ) {
console . log ( 'SW registered: ' , registration )
} ) . catch ( function ( registrationError ) {
console . log ( 'SW registration failed: ' , registrationError )
} )
} )
} Alternatif untuk mengkompilasi waktu, Anda dapat mengendalikan mendaftar/tidak terdaftar dalam kode aplikasi Anda dengan menggunakan modul next-offline/runtime .
import { register , unregister } from 'next-offline/runtime'
class App extends React . Component {
componentDidMount ( ) {
register ( )
}
componentWillUnmount ( ) {
unregister ( )
}
. .
}Anda dapat memilih untuk melewati jalur dan ruang lingkup pekerja layanan jika diperlukan.
import { register , unregister } from 'next-offline/runtime'
class App extends React . Component {
componentDidMount ( ) {
/**
* Default service worker path is '/service-worker.js'
* Refer https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerContainer/register for default scope rules
*
*/
register ( '/sub_folder/service-worker.js' , { scope : '/sub_folder' } )
}
componentWillUnmount ( ) {
unregister ( )
}
. .
} Jika Anda menangani pendaftaran sendiri, lewati dontAutoRegisterSw ke offline berikutnya.
// next.config.js
const withOffline = require ( 'next-offline' )
module . exports = withOffline ( { dontAutoRegisterSw : true } ) Jika Anda baru mengenal WorkBox, saya sarankan membaca panduan cepat ini-apa pun di dalam workboxOpts akan diteruskan ke workbox-webpack-plugin .
Tentukan objek workboxOpts di next.config.js Anda dan itu akan diteruskan ke Workbox-Webpack-Plugin. Workbox adalah apa yang digunakan next-offline di bawah kap untuk menghasilkan pekerja layanan, Anda dapat mempelajari lebih lanjut tentang itu di sini.
// next.config.js
const withOffline = require ( 'next-offline' )
const nextConfig = {
workboxOpts : {
...
}
}
module . exports = withOffline ( nextConfig )Di atas opsi Workbox, Next-Offline memiliki beberapa opsi built in bendera untuk memberi Anda kontrol biji-bijian yang lebih baik atas bagaimana pekerja layanan Anda dihasilkan.
| Nama | Jenis | Keterangan | Bawaan |
|---|---|---|---|
| menghasilkan | Boolean | Jika false, Next-Offline tidak akan menghasilkan pekerja layanan dan sebaliknya akan mencoba untuk memodifikasi file yang ditemukan di workboxopts.swsrc menggunakan plugin workbox [suntikan] (https://developers.google.com/web/tools/workbox/modules/workbox-webpack-packin#injectmest_plbox_plbox) | BENAR |
| DontAutoregistersw | Boolean | Jika benar, Next-Offline tidak akan secara otomatis mendorong skrip pendaftaran ke dalam kode aplikasi. Ini diperlukan jika Anda menggunakan pendaftaran runtime atau menangani pendaftaran sendiri. | PALSU |
| devswsrc | Rangkaian | Jalur yang akan didaftarkan oleh Next-Offline selama pengembangan. Secara default Nextline akan mendaftarkan NOOP selama pengembangan | PALSU |
| GenerateIndevMode | Boolean | Jika benar, pekerja layanan juga akan dihasilkan dalam mode pengembangan. Kalau tidak, pekerja layanan yang ditentukan dalam DevSWSRC akan digunakan. | PALSU |
| registerswprefix | Rangkaian | Jika pekerja layanan Anda tidak berada di level root aplikasi Anda, ini dapat membantu Anda mengawali jalur. Ini berguna jika Anda ingin pekerja layanan Anda di foobar.com/my/long/path/service-worker.js. Ini mempengaruhi [Lingkup] (https://developers.google.com/web/ilt/pwa/introduction-to-service-worker#registration_and_scope) dari pekerja layanan Anda. | PALSU |
| cakupan | Rangkaian | Ini diteruskan ke pekerja layanan terdaftar secara otomatis yang memungkinkan peningkatan atau mengurangi apa yang dikendalikan oleh pekerja layanan. | "/" |
Secara default next-offline memiliki strategi caching runtime selimut berikut. Jika Anda menyesuaikan next-offline dengan workboxOpts , perilaku default tidak akan diteruskan ke workbox-webpack-plugin . Artikel ini bagus untuk memecah berbagai resep cache yang berbeda.
{
runtimeCaching : [
{
urlPattern : / ^https?.* / ,
handler : 'NetworkFirst' ,
options : {
cacheName : 'offlineCache' ,
expiration : {
maxEntries : 200
}
}
}
]
} // next.config.js
const withOffline = require ( 'next-offline' )
module . exports = withOffline ( {
workboxOpts : {
runtimeCaching : [
{
urlPattern : / .png$ / ,
handler : 'CacheFirst'
} ,
{
urlPattern : / api / ,
handler : 'NetworkFirst' ,
options : {
cacheableResponse : {
statuses : [ 0 , 200 ] ,
headers : {
'x-test' : 'true'
}
}
}
}
]
}
} ) Jika aplikasi Anda tidak hidup pada akar domain Anda, Anda dapat menggunakan registerSwPrefix . Ini bermanfaat jika aplikasi Anda ada di domain.com/my/custom/path karena secara default next-offline mengasumsikan aplikasi Anda ada di domain.com dan akan mencoba mendaftarkan domain.com/service-worker.js. Kami tidak dapat mendukung penggunaan assetPrefix karena pekerja layanan harus dilayani di domain root. Untuk rincian teknis pada batasan itu, lihat tautan berikut: Apakah mungkin untuk melayani pekerja layanan dari CDN/Remote Origin?
Secara default next-offline akan melakukan pra-sekolah semua file yang dipancarkan dan yang ditentukan pengguna (di dalam /static )-pada dasarnya semua yang diekspor juga.
Jika Anda ingin memasukkan beberapa lagi atau mengubah asal file statis Anda, gunakan opsi kotak kerja yang diberikan:
workboxOpts: {
modifyURLPrefix : {
'app' : assetPrefix ,
} ,
runtimeCaching : { ... }
} Secara default next-offline akan menambah pekerja layanan no-op dalam pengembangan. Jika Anda ingin memberikan izin Anda sendiri untuk opsi devSwSrc . Ini sangat berguna jika Anda ingin menguji pemberitahuan dorong web dalam pengembangan, misalnya.
// next.config.js
const withOffline = require ( 'next-offline' )
module . exports = withOffline ( {
devSwSrc : '/path/to/my/dev/service-worker.js'
} ) Anda dapat menonaktifkan perilaku ini dengan mengatur opsi generateInDevMode ke true .
Di [email protected] kami telah menulis ulang fungsionalitas ekspor untuk bekerja dalam lebih banyak kasus, lebih andal, dengan lebih sedikit kode berkat beberapa penambahan di 7.0.0 berikutnya!
Anda dapat membaca lebih lanjut tentang ekspor di docs.js next.js tetapi offline berikutnya harus bekerja ™ ️.
Jika Anda meningkatkan ke versi terbaru dari next-offline saya merekomendasikan melirik apa yang telah ditambahkan/diubah di dalam Workbox dalam rilis 5.x bersama dengan rilis 4.0 yang termasuk perubahan yang melanggar. API Offline berikutnya tidak berubah, tetapi ketergantungan inti!
Pertanyaan? Masukan? tolong beritahu saya
next-offline adalah Lerna Monorepo yang menggunakan ruang kerja benang. Setelah mengkloning repo, jalankan berikut ini
$ yarn bootstrapIni akan memastikan versi pengembangan Anda dari Next-Offline adalah symlink dalam contoh & tes yang memungkinkan Anda untuk dengan cepat melakukan perubahan!
WWWWWW||WWWWWW
W W W||W W W
||
( OO )__________
/ |
/o o| MIT
___/||_||__||_|| *
|| || || ||
_||_|| _||_||
(__|__|(__|__|
Hak Cipta © 2017-Present Jack Hanford, [email protected]
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
Pemberitahuan hak cipta di atas dan pemberitahuan izin ini harus dimasukkan dalam semua salinan atau bagian substansial dari perangkat lunak.
Perangkat lunak ini disediakan 'sebagaimana adanya', tanpa jaminan apa pun, tersurat maupun tersirat, termasuk tetapi tidak terbatas pada jaminan dapat diperjualbelikan, kebugaran untuk tujuan tertentu dan nonpringement. Dalam hal apa pun penulis atau pemegang hak cipta tidak akan bertanggung jawab atas klaim, kerusakan atau tanggung jawab lainnya, baik dalam tindakan kontrak, gugatan atau sebaliknya, timbul dari, di luar atau sehubungan dengan perangkat lunak atau penggunaan atau transaksi lain dalam perangkat lunak.
