Next.js: Dukungan Pertama Offline

Dibuat pada 23 Jan 2017 · 47Komentar · Sumber: vercel/next.js

Dukungan offline sangat berguna, dan sangat penting untuk membuat PWA modern. Seiring dengan manifes HTML, ini membantu menjembatani kesenjangan antara situs web dan aplikasi asli.

Fitur ini memiliki dua rasa yang berbeda:

Dukungan offline: Ini adalah kemampuan untuk menavigasi situs bahkan saat offline, jika situs telah dimuat saat online. Ini harus menjadi fitur termudah untuk diterapkan.
Dukungan pertama offline: Ini adalah kemampuan untuk membuka situs bahkan saat offline, meskipun situs belum dimuat di browser.

Keduanya dapat dilakukan berkat plugin webpack-offline . Bagaimanapun karena saya mempelajari React dan Next.js sekaligus, saya belum bisa membuatnya bekerja.

Langkah-langkah untuk membuatnya bekerja:

Instal webpack-offline

npm install offline-plugin --save-dev

Buat next.config.js di folder root Anda

const OfflinePlugin = require('offline-plugin');

module.exports = {
  webpack: (config, { dev }) => {
        config.plugins = [
            new OfflinePlugin()
        ];
    return config
  }
};

Inisialisasi webpack-offline

Ini adalah langkah yang saya alami masalah. Saya pikir Anda harus melakukannya dalam sebuah komponen, di dalam componentDidMount , di dalam tingkat atas.

Masalah ini adalah pengingat bagi saya untuk terus mengerjakan ini, dan permintaan bantuan dari seseorang yang lebih berpengetahuan.

feature request

Sumber

espoal

👍93

Komentar yang paling membantu

Hai semuanya. Tim saya di Google bekerja di beberapa perpustakaan Service Worker (dengan plugin Webpack) seperti https://github.com/GoogleChrome/sw-precache dan https://github.com/GoogleChrome/sw-toolbox yang digunakan pada React/Webpack heavy situs seperti Lyft, Housing.com, Flipkart, dll.

Jika Berikutnya memutuskan untuk menjelajahi dukungan offline, kami akan dengan senang hati membagikan beberapa petunjuk. Saya pikir ada peluang besar untuk meresepkan pola seperti PRPL di luar kotak, mengingat pemecahan kode sudah dilakukan. Caching Service Worker khusus produksi akan menjadi tambahan yang rapi.

Selain memberi Anda beban pengulangan instan untuk halaman-halaman itu, itu juga akan mengikutsertakan Anda lebih awal ke dalam cache kode V8 sehingga waktu parse/kompilasi Anda untuk kunjungan berulang akan lebih rendah daripada hari ini.

Jangan ragu untuk berteriak jika ada yang menarik @rauchg :)

addyosmani pada 15 Feb 2017

👍74 🎉30 ❤10

Semua 47 komentar

Saya benar-benar ingin melihat ini berfungsi juga, bersama dengan penjelasan/dokumentasi/contoh tentangnya.

Perhatikan bahwa next/prefetch belum benar-benar memungkinkan perilaku offline, karena tidak mengambil data terlebih dahulu: https://github.com/zeit/next.js/issues/740

Tidak terkait langsung dengan Next.js tetapi saya juga bertanya-tanya berapa banyak data yang sebenarnya dapat disimpan secara offline (misalnya jika aplikasi web memiliki video dll -- apakah ada batasan keras di browser? Dan bagaimana dengan seluler?), bagaimana pengguna dapat secara spesifik minta satu hal untuk diunduh terlebih dahulu untuk nanti, dll. Saya juga sebelumnya menyebutkan hal-hal di sini: https://github.com/zeit/next.js/issues/24#issuecomment -258804529 (sebelum berikutnya/prefetch adalah sesuatu ).

sedubois pada 23 Jan 2017

Ada berbagai batasan data di berbagai platform, browser, dan versi. Anda dapat menguji batas di "Pelanggar penyimpanan browser": https://demo.agektmr.com/storage/

Metode standar yang ditujukan untuk penyimpanan offline dan caching adalah IndexedDB. Sekarang didukung bahkan di iOS Safari (v10), tetapi ada masalah kinerja. Kalau tidak, ia memiliki dukungan luas sekarang: http://caniuse.com/#feat =indexeddb

Misalnya PouchDB masih menggunakan WebSQL, bukan IndexedDB di Safari. https://github.com/pouchdb/pouchdb/issues/5572
Sama dengan localForage: https://github.com/localForage/localForage/issues/604

PouchDB memiliki ringkasan bagus tentang batas data: https://pouchdb.com/faq.html#data_limits (sedikit ketinggalan zaman)
Dan artikel yang lebih tua ini juga menyebutkan cara menangani beberapa kesalahan penyimpanan dan aspek lain terkait browser seluler https://www.html5rocks.com/en/tutorials/offline/quota-research/

Anda juga dapat menanyakan kuota Anda saat ini dan meminta penyimpanan yang lebih persisten di beberapa browser: https://jakearchibald.com/2014/offline-cookbook/#cache -persistence

Cara lain adalah dengan menggunakan nilai kedaluwarsa cache yang panjang dan kontrol cache yang tidak dapat diubah bersama dengan pekerja layanan. Ini akan dengan mudah memungkinkan caching yang ditentukan pengguna, hanya dengan membuat permintaan http untuk setiap sumber daya yang dipilih. Ini juga akan bekerja cukup baik di browser lama. Tetapi untuk dapat mempertahankan dan menghapus berbagai cache secara manual untuk menghindari batasan hanya dimungkinkan di browser yang mendukung pekerja layanan.
https://developer.mozilla.org/en-US/docs/Web/API/Cache
https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers

Ingat saja, ketika Anda kehabisan ruang, browser dapat mengusir seluruh asal sekaligus hingga berada dalam batas:
https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria

msand pada 23 Jan 2017

👍5

Artikel bermanfaat lainnya oleh Addy Osmani: https://medium.com/dev-channel/offline-storage-for-progressive-web-apps-70d52695513c#.9vja3t8gp

Rupanya ada juga api Penyimpanan yang sedang dikerjakan: https://storage.spec.whatwg.org/

Ini memungkinkan penyimpanan yang benar-benar persisten:
"Biasanya, saat pengguna kehabisan ruang penyimpanan di perangkat mereka, data yang disimpan dengan API ini hilang tanpa campur tangan pengguna. Namun, kotak persisten tidak dapat dihapus tanpa persetujuan pengguna. Dengan demikian, data menjamin pengguna telah dinikmati di platform asli ke web."

msand pada 23 Jan 2017

IMO membuat situs/aplikasi berfungsi offline melibatkan banyak keputusan yang tidak boleh diambil oleh kerangka kerja dengan sendirinya. Saya akan mengerjakan contoh di situs yang bekerja secara offline dengan pekerja layanan tetapi ada teknik yang berbeda untuk berbagai jenis aplikasi.

impronunciable pada 24 Jan 2017

👍11 😕3

terima kasih @impronunciable . Apakah Anda berencana untuk menggunakan webpack-offline atau yang lainnya?

keputusan macam apa yang kamu bicarakan? Saya pikir kita dapat membagi masalah dalam dua masalah utama:

1) Caching aset statis: Seperti js, HTML, gambar, ... ini hampir sudah diimplementasikan, setidaknya dalam rasa offline dan dengan pengecualian /static , dan mengingat bahwa kita menggunakan reaksi seharusnya sudah satu implementasi yang disukai, melalui webpack-offline dan pekerja layanan.

2) Caching data: status, kueri, data volatil, .... menimbulkan lebih banyak kekhawatiran, karena setidaknya perlu mengasumsikan bagaimana pengguna akan memuat data. Mungkin kita bisa menunjukkan cara mempertahankan status dengan redux, dan kemudian orang akan memasukkan data ke redux sesuka mereka. Atau mungkin kita bisa menggunakan GraphQL/Apollo yang seharusnya mencakup kasus seperti itu dengan menyimpan kueri dan mutasi.

espoal pada 24 Jan 2017

@servermeta itu sangat tergantung pada kasus Anda. Saya selesai menerapkan strategi caching agresif tanpa menggunakan plugin, hanya server khusus dan strategi dari https://serviceworke.rs/

impronunciable pada 24 Jan 2017

👍2

Saya memilikinya bekerja di sini . Berjuang banyak dengan Offline-Plugin, memiliki beberapa masalah dengan direktori .next kemudian saya beralih ke sw-precache-webpack-plugin, mengabaikan direktori .next dan menyajikan semua aset ke sw

ooade pada 24 Jan 2017

👍11

terima kasih @ooade , bagus sekali, Anda menyelamatkan saya banyak waktu.

Bagaimanapun saya melihat keadaan itu tidak bertahan di antara penyegaran, memuat ulang. Saya akan mencoba memikirkan cara menambahkan fitur ini.

espoal pada 24 Jan 2017

👍1

terima kasih @ooade . Dengan localhost maksud Anda db lokal, seperti mongodb, atau penyimpanan lokal?

Saya pikir kita harus membagi masalahnya: pengambilan data offline harus diserahkan kepada pengembang, sementara kita dapat mempertahankan status redux. Periksa ini:

https://github.com/rt2zz/redux-persist

dengan ini kita dapat menyimpan status di penyimpanan lokal, sehingga dapat bertahan di antara penyegaran, pemuatan ulang, tab, dan sesi.

espoal pada 26 Jan 2017

Jangan ragu untuk berteriak jika ada yang menarik @rauchg :)

addyosmani pada 15 Feb 2017

👍74 🎉30 ❤10

Dukungan offline

rauchg pada 15 Feb 2017

👍49 🎉20 ❤9

@rauchg ada estimasi mengenai 2.0 tanggal rilis stabil?
Kami akan memulai produksi penuh dan kami ingin menggunakan Next.js
Saya akan menghargai semua jenis perkiraan, hari / minggu / bulan ...
Terima kasih banyak!

YarivGilad pada 17 Feb 2017

@Ajar-Ajar 2.0.0 dirilis hari ini.

sebastienbarre pada 27 Mar 2017

@rauchg apakah dukungan offline-pertama akan dilacak di sini atau apakah Anda akan membuat masalah lain untuk itu?

egeozcan pada 31 Mar 2017

👍3

Silakan lihat juga redux -offline open-source baru oleh @jevakallio. Akan luar biasa untuk memiliki contoh + redux-offline berikutnya.

sedubois pada 31 Mar 2017

👍11

Jadi apakah kami memiliki info tentang cara mencapai ini, saya telah mencoba melakukannya di next.config.js dan menginstal plugin offline, tetapi saya tidak dapat membuatnya berfungsi. Berikutnya adalah proyek yang luar biasa tetapi akan sangat lengkap (dan lebih keren) jika memiliki fitur ini (Offline-first) di luar kotak!

saulflores95 pada 21 Apr 2017

👍1

@ saulflores95 Menggunakan @ooade 's NextSimpleStarter cara' s melakukan pekerjaan untuk saya :)

AugustinLF pada 21 Apr 2017

👍2

@AugustinLF NextSimpleStarter tidak menawarkan kemampuan offline. https://github.com/ooade/NextSimpleStarter/issues/23#issuecomment -294310240

sedubois pada 21 Apr 2017

👍4

@sedubois Bagi siapa pun yang datang dan membaca ini, itu agak berlebihan. Agar adil, itu memang memiliki beberapa kemampuan offline dengan penggunaan sw-precache dan sw-toolbox. Aplikasi saya bekerja offline hanya dengan dua alat itu, tetapi status awal aplikasi saya tidak berubah. Jika saya mencoba untuk lebih spesifik, saya dapat mengatakan bahwa itu tidak menawarkan solusi offline untuk membangun status di luar apa yang awalnya dikirim melalui kabel.

timmywil pada 21 Apr 2017

👍3

@timmywil , apakah Anda memiliki repo GitHub dari aplikasi berkemampuan offline nextjs Anda? Terima kasih.

freecates pada 6 Mei 2017

👍1

Saya baru saja membuat versi (beta) dukungan offline berikutnya menggunakan appcache , yang diperlukan untuk Safari. Silakan lihat di http://github.com/ssured/nownextmicro

ssured pada 12 Mei 2017

👍7 🎉2

Hai semuanya, saya menambahkan dukungan offline ke boilerplate saya.
https://github.com/Sly777/ran

Ini sedikit buggy. Makanya dinamakan "eksperimental" Pokoknya, semoga membantu.

Sly777 pada 26 Jun 2017

👍3

@rauchg Apakah fitur ini masih menjadi prioritas?

jabacchetta pada 2 Sep 2017

👍32 😄3

@rauchg Dengan next.js 4.0 beta dirilis, apakah ada kemungkinan dukungan offline pertama berada di peta jalan untuk versi itu?

prateekrastogi pada 22 Okt 2017

👍29

Saya akan meminta berita tentang fitur tersebut ^^

HelloEdit pada 25 Jan 2018

Next.js 5.0 telah dirilis (selamat!) tetapi tidak disebutkan dukungan offline, apakah ada peta jalan baru yang ingin Anda bagikan? terima kasih atas pekerjaan luar biasa yang dilakukan sejauh ini

idhard pada 6 Feb 2018

@idhard sebenarnya, kami mungkin tidak akan mendukung dukungan offline secara default.
(Tapi hal-hal mungkin berubah)

Tapi kami sedang dalam proses memastikan Next.js tidak melakukan keajaiban apa pun. Jadi, Anda dapat menggunakan plugin dan loader webpack langsung apa adanya.
5 berikutnya adalah langkah pertama.

arunoda pada 6 Feb 2018

👍6

@idhard Saya pikir itu akan menjadi kontra intuitif untuk dukungan offline selimut, beberapa aplikasi pasti tidak ingin fitur itu diaktifkan.

Di situs web pribadi saya, saya menggunakan ini https://github.com/zeit/next.js/tree/canary/examples/with-sw-precache dan kami juga akan menggunakan ^ dalam produksi di Eaze setelah iOS 11.3 dilepaskan.

hanford pada 6 Feb 2018

@hanford ya diskusi serupa telah dilakukan di CRA dan akhirnya menghapus dukungan pekerja web secara default (https://github.com/facebook/create-react-app/issues/2554#event-1431558318), namun saya masih berpikir pekerja web dan PWA akan menjadi solusi de facto untuk dukungan offline , jadi akan lebih baik untuk mengetahui apakah tim Next memiliki beberapa rencana untuk menambahkan dukungan resmi , seperti halaman yang telah diambil sebelumnya.

idhard pada 6 Feb 2018

@idhard ya, semacam dilema yang menarik bagi tim inti. Saya sangat senang dengan plugin sw-precache yang saya sebutkan di atas.

situs web pribadi saya menggunakan plugin sw-precache webpack, bersama dengan menyajikan manifest.json dari direktori statis. Jika Anda penasaran, kodenya ada di sini .. komitnya sedikit ceroboh, tetapi saya menambahkan dukungan offline dan manifes json dalam seminggu terakhir.

hanford pada 6 Feb 2018

@hanford apa yang terjadi di iOS 11.3, apakah akan ada pekerja layanan? Apakah Anda memiliki referensi dengan info lebih lanjut?

sedubois pada 7 Feb 2018

@hanford @idhard kami mencoba pekerja layanan jauh sebelum CRA dan memiliki banyak masalah.
Itu sebabnya kami memutuskan untuk membangun solusi prefetching murni dengan teknologi web caching tradisional.
Ini bekerja dengan baik. Serangkaian peningkatan baru akan segera hadir.

Ya tentu saja offline adalah tempat kita membutuhkan SW.
Tapi itu sangat tidak stabil dan sulit untuk menggunakan API. Hal-hal bisa salah dan merusak situs Anda.

Jadi, kita mungkin tidak ingin melakukannya sendiri.
Tetapi kami ingin mengizinkan pengguna untuk menggunakan hal-hal seperti sw-precache melalui plugin Next.js (atau cukup menambahkan satu set pemuat dan plugin webpack)

arunoda pada 7 Feb 2018

👍2

@sedubiois lihat https://developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_11_1.html untuk paket Apple di iOS Safari. Service Worker diumumkan

ssured pada 7 Feb 2018

🎉4

Yap pekerja layanan @ssured @sedubois mendarat di Mobile Safari di iOS 11.3 yang cukup mengasyikkan! Saya menggunakan iOS 11.3 Beta 2 dan ada banyak bug, (pekerja layanan tidak dikenali dengan benar saat situs web ditambahkan ke layar beranda, tetapi saya yakin Apple akan memperbaikinya sebelum rilis publik)

Saya pikir apa yang disarankan @arunoda adalah bahwa Next.js strategi caching saat ini (tajuk kontrol-cache, etags, dll) jauh lebih stabil daripada pekerja layanan. Pekerja layanan memang mengaktifkan beberapa fungsi baru yang benar-benar rapi, terutama mendapatkan kontrol butir yang lebih baik atas permintaan jaringan (mengembalikan konten yang di-cache lebih awal) .. Tapi apa yang Next.js bekerja di mana-mana dan jauh lebih sedikit overhead .. (membatalkan pendaftaran pekerja layanan sangat merepotkan)

hanford pada 7 Feb 2018

@ssured @sedubois Saya membuat plugin kecil yang bekerja dengan cara yang sama seperti plugin yang diluncurkan Zeit beberapa hari yang lalu .. itu akan meringankan offline aplikasi berikutnya dan cukup lurus ke depan mencolokkan ke aplikasi yang ada

Beri tahu saya jika Anda memiliki umpan balik! https://github.com/hanford/next-offline

hanford pada 7 Feb 2018

👍3

@hanford terima kasih telah membuat hidup kami sedikit lebih mudah
@arunoda Sementara dukungan plugin di next.js 5 luar biasa, bukankah akan jauh lebih bermanfaat bagi komunitas jika semua plugin di-host di folder plugin repo next.js utama, seperti semua contohnya, bukan tambahan repo? Sebagian besar pengembang mengunjungi repo utama, dan dengan demikian, pengembang plugin potensial akan memiliki lebih banyak insentif untuk membuat permintaan tarik, sehingga menghemat pemborosan waktu komunitas karena pengulangan dan fragmentasi ekosistem plugin yang tak terhindarkan yang timbul sebagai akibat dari repo terpisah.

prateekrastogi pada 8 Feb 2018

Bagi siapa pun yang masih memutuskan apa yang harus dilakukan ke depan, saya juga menggunakan plugin sw-precache webpack dengan relatif mudah ( contoh, lagi ).

jabacchetta pada 8 Feb 2018

❤2

Saya menggunakan solusi saya sendiri tetapi telah beralih ke solusi yang disediakan oleh hanford. Saya harus membuat beberapa modifikasi di next.config.js untuk menghentikan plugin secara otomatis mendaftarkan pekerja layanan, tetapi tampaknya berfungsi dengan baik.

Saya sekarang hanya perlu mencari tahu bagaimana saya bisa membuatnya bekerja dengan server khusus saya. Misalnya saya memiliki pengaturan rute sebagai article/:slug. Ketika saya mengunjungi salah satu url ini, pekerja layanan mencoba mengirimkan dokumen untuk url itu. Adakah yang tahu bagaimana saya bisa menghentikannya dan menjadikannya sebagai artikel? Ini terkait dengan pengaturan di Workbox, saya kira.

designspin pada 19 Feb 2018

🎉1

Haruskah kita masih mengharapkan integrasi pekerja layanan atau dukungan offline di rilis NextJS mendatang? Sepertinya beberapa orang sebelumnya mengatakan itu adalah fitur prioritas, tetapi masalah ini telah terbuka selama lebih dari satu setengah tahun...

caribou-code pada 7 Agu 2018

@caribou-code Saya tidak dapat berbicara untuk tim Zeit tentang rencana mereka untuk Next.js, tetapi saya menulis ini beberapa waktu yang lalu: https://github.com/hanford/next-offline yang memungkinkan Anda untuk secara otomatis menghasilkan pekerja layanan yang akan bekerja secara offline.

Saya telah menggunakannya di beberapa aplikasi dan itu bekerja dengan cukup baik. Di bawah tenda itu menggunakan kotak kerja googles, yang merupakan proyek yang sangat menarik: https://developers.google.com/web/tools/workbox/

Beberapa contoh di mana saya menggunakan next-offline :

hanford pada 7 Agu 2018

❤8

@hanford Saya baru saja menggunakan offline berikutnya sebelum memposting di sini dan itu cukup bagus! Sebenarnya itu satu-satunya solusi yang berhasil saya terapkan sejauh ini yang benar-benar berfungsi. Kerja bagus!

Namun, saya benar-benar ingin mendapatkan solusi yang berfungsi dengan sw-precache-webpack-plugin karena ada contohnya di repo NextJS, meskipun saya tidak dapat mengetahui cara mengonfigurasinya ke cache dan menyajikan semua file Berikutnya saya melalui pekerja layanan. Plugin itu tampaknya cukup populer juga.

caribou-code pada 7 Agu 2018

Saya membuat NextSimpleStarter setahun yang lalu untuk membantu mengatasi masalah ini. Tetapi, saya menyadari bahwa sw-precache saja tidak akan dapat memenuhi sebagian besar persyaratan offline, jadi kami baru-baru ini beralih menggunakan kotak kerja yang menyelesaikan sebagian besar dari mereka.

Meskipun, saya belum memperbaruinya ke standar saat ini (ukuran ikon dan sebagainya), yang akan saya perbaiki dalam beberapa hari. Jangan ragu untuk mencobanya. Jatuhkan masalah jika Anda tidak merasa puas.

ooade pada 7 Agu 2018

@hanford Ini terlihat bagus. Ini berjalan untuk saya dalam mode pengembangan tetapi tidak ada pekerja layanan dalam mode itu. Saya tidak tahu dari readme Anda bagaimana membuatnya bekerja dalam mode produksi dan dengan pekerja layanan dan tanpa server simpul. Saya juga menyebarkan aplikasi saya ke Netlify dan saya telah menggunakan next export . Aplikasi saya benar-benar statis. Saya tidak punya masalah tidak menggunakan next export jika itu masalah . Saya akan melakukan apa pun yang paling berhasil dan tidak memerlukan biaya apa pun. Ini adalah aplikasi hobi, jadi saya fleksibel.

@ooade Ini juga terlihat bagus, tapi saya mendapat kesalahan saat memulainya. Mengubah "tanpa server" menjadi "server" sesuai instruksi Anda memperbaiki kesalahan itu tetapi kemudian saya mendapatkan kesalahan berikut:

A bad HTTP response code (404) was received when fetching the script.

dancancro pada 3 Jul 2019

@dancancro Anda pasti dapat menggunakan next-offline sementara juga menggunakan next-export

Keberatan membuka masalah di next-offline dengan beberapa langkah untuk mereproduksi sehingga saya dapat melihat lebih dalam?

hanford pada 3 Jul 2019

@hanford Saya bisa melakukan itu jika Anda mau, tetapi saya tidak melakukan apa pun yang istimewa dan saya tidak menyarankan ada yang rusak tentang starter. Langkah-langkah untuk mereproduksi masalah hanyalah instruksi Anda . Satu-satunya masalah adalah saya tidak tahu cara menjalankannya dalam mode produksi. Dilihat dari kondisi ini seorang service worker tidak seharusnya terdaftar dalam mode dev, jadi yang terjadi pada saya adalah perilaku yang diharapkan. Saya hanya perlu beberapa instruksi - cara menjalankannya dalam mode produksi, dan jika next export dimungkinkan, lalu bagaimana menjalankan kode statis yang dibuat server dalam mode produksi dengan next export .

dancancro pada 3 Jul 2019

@dancancro Saya mengerti, tetapi diskusi itu seharusnya tidak terjadi di sini, ini tentu saja bukan masalah dengan Next.js itu sendiri.

Silakan buka masalah di sini dan saya akan dengan senang hati melihat / menjawab pertanyaan yang mungkin Anda miliki.

Komunitas tidak diuntungkan jika kita berdiskusi dalam isu/repo yang tidak terkait

hanford pada 3 Jul 2019

👍1

Saya baru-baru ini membuat plugin PWA nol konfigurasi yang mudah digunakan untuk Next.js: next-pwa

Lihat contohnya di sini