Next.js: الدعم الأول دون اتصال

أود تمامًا أن أرى هذا يعمل أيضًا ، إلى جانب التفسيرات / الوثائق / الأمثلة حوله.

لاحظ أن التالي / الجلب المسبق لا يسمح بالفعل بالسلوك في وضع عدم الاتصال ، لأنه لا يجلب البيانات مسبقًا: https://github.com/zeit/next.js/issues/740

لا يرتبط مباشرة بـ Next.js ولكني أتساءل أيضًا عن مقدار البيانات التي يمكن الاحتفاظ بها في الواقع دون اتصال (على سبيل المثال ، إذا كان تطبيق الويب يحتوي على مقاطع فيديو وما إلى ذلك - هل هناك حد معين في المتصفح؟ وماذا عن الهاتف المحمول؟) ، كيف يمكن للمستخدم تحديدًا اطلب شيئًا واحدًا لتنزيله مسبقًا لوقت لاحق ، وما إلى ذلك. لقد ذكرت أيضًا أشياء سابقًا هنا: https://github.com/zeit/next.js/issues/24#issuecomment -258804529 (قبل التالي / كان الجلب المسبق شيئًا ).

هناك حدود بيانات متفاوتة في مختلف المنصات والمتصفحات والإصدارات. يمكنك اختبار الحدود في "إساءة استخدام مساحة تخزين المتصفح": https://demo.agektmr.com/storage/

الطريقة المعيارية المخصصة للتخزين غير المتصل والتخزين المؤقت هي IndexedDB. يتم دعمه الآن حتى في iOS Safari (الإصدار 10) ، ولكن هناك مشاكل في الأداء. وإلا فإنه يتمتع بدعم واسع الآن: http://caniuse.com/#feat = indexeddb

على سبيل المثال ، لا يزال PouchDB يستخدم WebSQL بدلاً من قاعدة البيانات المفهرسة في Safari. https://github.com/pouchdb/pouchdb/issues/5572
نفس الشيء مع localForage: https://github.com/localForage/localForage/issues/604

يحتوي PouchDB على ملخص جيد لحدود البيانات: https://pouchdb.com/faq.html#data_limits (قديم قليلاً)
وتذكر هذه المقالة الأقدم أيضًا كيفية التعامل مع بعض أخطاء التخزين والجوانب الأخرى المتعلقة بمتصفحات الجوال https://www.html5rocks.com/en/tutorials/offline/quota-research/

يمكنك أيضًا الاستعلام عن حصتك الحالية وطلب المزيد من التخزين الثابت في بعض المتصفحات: https://jakearchibald.com/2014/offline-cookbook/#cache -persistance

هناك طريقة أخرى تتمثل في استخدام قيم انتهاء صلاحية ذاكرة التخزين المؤقت الطويلة والتحكم في ذاكرة التخزين المؤقت غير القابلة للتغيير مع العاملين في الخدمة. سيسمح هذا بسهولة بالتخزين المؤقت المحدد للمستخدم ، فقط عن طريق تقديم طلب http لكل مورد محدد. سيعمل هذا أيضًا بشكل جيد في المتصفحات القديمة. ولكن لتكون قادرًا على الاحتفاظ بمختلف ذاكرات التخزين المؤقت وحذفها يدويًا لتجنب القيود لن يكون ممكنًا إلا في المتصفحات التي تدعم عمال الخدمة.
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

فقط تذكر ، عند نفاد المساحة ، يمكن للمتصفح طرد أصل كامل في وقت واحد حتى يكون ضمن الحدود:
https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria

مقال آخر مفيد بقلم Addy Osmani: https://medium.com/dev-channel/offline-storage-for-progressive-web-apps-70d52695513c#.9vja3t8gp

يبدو أن هناك أيضًا واجهة برمجة تطبيقات للتخزين قيد العمل: https://storage.spec.whatwg.org/

هذا يسمح بالفعل بالتخزين الدائم:
"تقليديًا ، نظرًا لنفاد مساحة التخزين لدى المستخدم على أجهزته ، تُفقد البيانات المخزنة مع واجهات برمجة التطبيقات هذه دون أن يتمكن المستخدم من التدخل. ومع ذلك ، لا يمكن مسح الصناديق الثابتة دون موافقة المستخدم. وهذا يؤدي إلى ضمان البيانات للمستخدمين على المنصات الأصلية على الويب ".

يتضمن إنشاء IMO لموقع / تطبيق يعمل دون اتصال بالإنترنت الكثير من القرارات التي لا ينبغي أن يتخذها إطار العمل بمفرده. سأعمل على مثال على موقع يعمل دون اتصال مع عامل خدمة ولكن هناك تقنيات مختلفة لأنواع مختلفة من التطبيقات.

شكرا impronunciable . هل تخطط لاستخدام webpack-Offline أو أي شيء آخر؟

ما نوع القرارات التي تتحدث عنها؟ أعتقد أنه يمكننا تقسيم المشكلة إلى قضيتين رئيسيتين:

1) التخزين المؤقت للأصول الثابتة: مثل js ، HTML ، الصور ، ... تم تنفيذ هذا بالفعل تقريبًا ، على الأقل في النكهة غير المتصلة بالإنترنت وباستثناء /static ، وبالنظر إلى أننا نستخدم رد فعل يجب أن يكون تطبيق مفضل واحد ، عبر webpack-offline وعمال الخدمة.

2) التخزين المؤقت للبيانات: الحالة والاستعلامات والبيانات المتقلبة ... تثير المزيد من المخاوف ، لأنها تتطلب على الأقل افتراض كيفية تحميل المستخدمين للبيانات. ربما يمكننا أن نبين كيفية الحفاظ على الحالة مع إعادة ، ومن ثم سيعيد الناس البيانات كما يفضلون. أو ربما يمكننا استخدام GraphQL / Apollo والتي يجب أن تغطي مثل هذه الحالة عن طريق تخزين الاستعلامات والطفرات في ذاكرة التخزين المؤقت.

servermeta حقا يعتمد على قضيتك. أنتهي من تنفيذ إستراتيجية قوية للتخزين المؤقت دون استخدام المكونات الإضافية ، فقط خادم مخصص وإستراتيجية من https://serviceworke.rs/

لدي العمل هنا . خاضت الكثير من المعارك مع برنامج Offline-Plugin ، وواجهت بعض المشكلات مع الدليل .next ، ثم قمت بالتبديل إلى البرنامج المساعد sw-precache-webpack-plugin ، وتجاهلت الدليل التالي.

شكرا لك ooade ، أحسنت ، لقد وفرت لي الكثير من الوقت.

على أي حال أرى أن هذه الحالة لا تستمر بين التحديث وإعادة التحميل. سأحاول التفكير في كيفية إضافة هذه الميزة.

شكرا ooade . تقصد بالمضيف المحلي ديسيبل محلي ، مثل mongodb ، أو localstorage؟

أعتقد أنه يجب علينا تقسيم المشكلة: يجب ترك استرداد البيانات دون اتصال للمطور ، بينما يمكننا الحفاظ على حالة إعادة الإرسال. افحص هذا:

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

مع هذا يمكننا تخزين الحالة في التخزين المحلي ، بحيث يمكن أن تستمر بين عمليات التحديث وإعادة التحميل وعلامات التبويب والجلسات.

مرحبا يا اصدقاء. يعمل فريقي في Google على عدد قليل من مكتبات Service Worker (مع مكونات Webpack الإضافية) مثل https://github.com/GoogleChrome/sw-precache و https://github.com/GoogleChrome/sw-toolbox المستخدم في React / Webpack الثقيلة مواقع مثل Lyft و Housing.com و Flipkart وما إلى ذلك.

إذا قررت Next استكشاف الدعم في وضع عدم الاتصال ، فسيسعدنا مشاركة بعض المؤشرات. أعتقد أن هناك فرصة كبيرة لوصف أنماط مثل PRPL خارج الصندوق ، نظرًا لأن تقسيم الشفرة قد تم بالفعل. سيكون التخزين المؤقت لعامل الخدمة للإنتاج فقط إضافة أنيقة.

بالإضافة إلى منحك عمليات تحميل متكررة فورية لتلك الصفحات ، فإنها ستختارك في وقت مبكر في التخزين المؤقت لرمز V8 بحيث تكون أوقات التحليل / التجميع للزيارات المتكررة أقل من اليوم.

لا تتردد في الصراخ إذا كان أي من هذا مثيرًا للاهتمام rauchg :)

يعد دعم المتصل أحد أهم أولوياتنا بعد استقرار 2.0

rauchg أي تقدير بخصوص 2.0 تاريخ الإصدار المستقر؟
نحن على وشك بدء الإنتاج بالكامل ونود استخدام Next.js
سأقدر أي نوع من التقدير ، أيام / أسابيع / أشهر ...
شكرا جزيلا!

@ Ajar-Ajar 2.0.0 صدر اليوم.

rauchg هل سيتم تتبع الدعم الأول دون اتصال هنا أم أنك ستنشئ مشكلة أخرى له؟

يرجى أيضًا الاطلاع على redux مفتوح المصدر حديثًا

فهل لدينا أي معلومات حول كيفية تحقيق ذلك ، كنت أحاول القيام بذلك في next.config.js وتثبيت المكون الإضافي دون اتصال بالإنترنت ، لكن لم أتمكن من تشغيله. التالي هو مشروع رائع ولكنه سيكون مكتملًا للغاية (وأكثر برودة) إذا كان يحتوي على هذه الميزة (غير متصل أولاً) خارج الصندوق!

@ saulflores95 استخدام طريقةooade 's NextSimpleStarter لم ينجح بالنسبة لي :)

AugustinLF NextSimpleStarter لا يقدم إمكانيات غير https://github.com/ooade/NextSimpleStarter/issues/23#issuecomment -294310240

sedubois بالنسبة لأي شخص يأتي ويقرأ هذا ، هذا نوع من المبالغة. لكي نكون منصفين ، فإنه يحتوي على بعض الإمكانات غير المتصلة بالإنترنت باستخدام sw-precache و sw-toolbox. يعمل تطبيقي في وضع عدم الاتصال فقط مع هاتين الأداتين ، لكن الحالة الأولية لتطبيقي لا تتغير. إذا كنت أحاول أن أكون محددًا ، فقد أقول إنه لا يقدم حلولًا غير متصلة بالإنترنت لبناء حالة تتجاوز ما تم إرساله في البداية عبر السلك.

timmywil ، هل لديك GitHub repo لتطبيقك nextjs غير المتصل؟ شكرا.

لقد أنشأت للتو إصدارًا (تجريبيًا) من الدعم التالي في وضع عدم الاتصال باستخدام appcache ، وهو أمر ضروري لبرنامج Safari. يرجى إلقاء نظرة على http://github.com/ssured/nownextmicro

مرحبًا بالجميع ، لقد أضفت دعمًا في وضع عدم الاتصال إلى النموذج المعياري الخاص بي.
https://github.com/Sly777/ran

إنها عربات التي تجرها الدواب قليلاً. لهذا السبب سميت على أنها "تجريبية" 😄 على أي حال ، آمل أن تساعد.

rauchg هل هذه الميزة لا تزال أولوية؟

rauchg مع إصدار next.js 4.0 بيتا ، هل هناك أي فرص لوجود دعم أول في وضع عدم الاتصال في خارطة الطريق لهذا الإصدار؟

أود أن أسأل عن أخبار هذه الميزة ^ ^

تم إصدار Next.js 5.0 (تهانينا!) ولكن لم يرد ذكر للدعم دون اتصال بالإنترنت ، فهل هناك خارطة طريق جديدة تود مشاركتها؟ شكرا للعمل الرائع الذي تم إنجازه حتى الآن

idhard في الواقع ، قد لا ندعم الدعم دون اتصال افتراضيًا.
(لكن الأمور قد تتغير)

لكننا بصدد التأكد من أن Next.js لا يقوم بأي عمل سحري. لذلك ، ستتمكن من استخدام الإضافات وبرامج تحميل webpack المباشرة كما هي.
5 التالي هو الخطوة الأولى.

idhard أعتقد أنه سيكون أمرًا بديهيًا للدعم الشامل في وضع عدم الاتصال ، فبعض التطبيقات بالتأكيد لن ترغب في تمكين هذه الميزة.

على موقع الويب الشخصي الخاص بي ، أستخدم https://github.com/zeit/next.js/tree/canary/examples/with-sw-precache وسنستخدم أيضًا ^ في الإنتاج في

hanford ، نعم ، تم إجراء مناقشة مماثلة على CRA وانتهى الأمر بإزالة دعم عمال الويب افتراضيًا (https://github.com/facebook/create-react-app/issues/2554#event-1431558318) ، ولكن ما زلت أعتقد أن العاملين على الويب و PWA سيكونان الحل الفعلي للدعم غير المتصل بالإنترنت ، لذا سيكون من الجيد معرفة ما إذا كان لدى فريق Next خطة لإضافة دعم رسمي ، مثل الصفحات التي تم جلبها مسبقًا.

idhard نعم ، نوع من معضلة مثيرة للاهتمام للفريق الأساسي. لقد كنت سعيدًا حقًا بالمكون الإضافي sw-precache الذي ذكرته أعلاه.

يستخدم موقع الويب الشخصي الخاص بي المكوّن الإضافي sw-precache webpack ، إلى جانب تقديم manifest.json من الدليل الثابت. إذا كنت فضوليًا ، فالشفرة موجودة هنا .. الالتزامات قذرة بعض الشيء ، لكني أضفت دعمًا غير متصل بالإنترنت وبيان json خلال الأسبوع الماضي.

hanford ماذا يحدث في iOS 11.3 ، هل سيكون به عمال خدمة؟ هل لديك أي مرجع بمزيد من المعلومات؟

hanfordidhard حاولنا العاملين في مجال الخدمات الطريق أمام CRA، وكان لها الكثير من القضايا.
لهذا السبب قررنا بناء حل الجلب المسبق فقط باستخدام تقنية التخزين المؤقت للويب التقليدية.
إنه يعمل بشكل رائع. مجموعة جديدة من التحسينات قريبا.

نعم بالطبع غير متصل بالإنترنت هو المكان الذي نحتاجه SW.
لكنه غير مستقر للغاية ويصعب استخدام API. يمكن أن تسوء الأمور وتكسر موقعك.

لذلك ، قد لا نريد أن نفعل ذلك بأنفسنا.
لكننا نريد السماح للمستخدمين باستخدام أشياء مثل sw-precache عبر المكون الإضافي Next.js (أو ببساطة إضافة مجموعة من أدوات تحميل webpack والمكونات الإضافية)

sedubiois راجع https://developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_11_1.html لخطط Apples على iOS Safari. تم الإعلان عن عمال الخدمة

Yepssuredsedubois يهبط عمال الخدمة في Mobile Safari في iOS 11.3 وهو أمر مثير للغاية! أنا أستخدم iOS 11.3 Beta 2 وهناك العديد من الأخطاء ، (لا يتم التعرف على عمال الخدمة بشكل صحيح عند إضافة موقع الويب إلى الشاشة الرئيسية ، لكنني على ثقة من أن Apple ستصلح هذه الأخطاء قبل الإصدار العام)

أعتقد أن ما تقترحهarunoda هو أن إستراتيجية التخزين المؤقت الحالية Next.js (رؤوس التحكم في ذاكرة التخزين المؤقت ، etags ، إلخ) أكثر استقرارًا من عمال الخدمة. يعمل عمال الخدمة على تمكين بعض الوظائف الجديدة الرائعة حقًا ، لا سيما الحصول على تحكم دقيق في الحبوب على طلبات الشبكة (إعادة المحتوى المخزن مؤقتًا في وقت مبكر) .. ولكن ما يعمل Next.js في كل مكان وأقل تكلفة بشكل كبير .. (يمثل إلغاء تسجيل عمال الخدمة ألمًا تامًا)

ssuredsedubois لقد أنشأت مكوّنًا إضافيًا صغيرًا يعمل بنفس طريقة المكونات الإضافية التي أطلقها Zeit في اليوم الآخر .. يجب أن يخفف من التطبيقات التالية غير المتصلة بالإنترنت وأن يكون سهلًا جدًا في توصيل تطبيقاتك الحالية

اسمحوا لي أن أعرف إذا كان لديك أي ملاحظات! https://github.com/hanford/next-offline

hanford شكرا لجعل حياتنا أسهل قليلا
arunoda بينما دعم البرنامج المساعد في next.js 5 رائع ، ألن يكون أكثر فائدة للمجتمع إذا تمت استضافة جميع الإضافات في مجلدات main.js repo ، تمامًا كما هو الحال مع جميع الأمثلة ، بدلاً من البرامج المساعدة الريبو؟ يزور معظم المطورين الريبو الرئيسي ، وبالتالي ، سيكون لدى مطوري المكونات الإضافية المحتملين حافز أكبر لإنشاء طلب سحب ، وبالتالي توفير إهدار وقت المجتمع بسبب التكرار وتجزئة النظام البيئي للمكونات الإضافية التي لا مفر منها والتي تنشأ نتيجة لعمليات إعادة الشراء المنفصلة.

بالنسبة لأي شخص آخر لا يزال يقرر ما يجب فعله للمضي قدمًا ، فقد استفدت أيضًا من المكون الإضافي sw-precache webpack بسهولة نسبية ( مثال ، مرة أخرى ).

كنت أستخدم الحل الخاص بي ولكني انتقلت إلى الحل المقدم من hanford. اضطررت إلى إجراء بعض التعديلات في next.config.js لإيقاف تسجيل المكون الإضافي تلقائيًا لعامل الخدمة ، ولكن يبدو أنه يعمل بشكل جيد.

أنا الآن بحاجة فقط لمعرفة كيف يمكنني تشغيل هذا مع خادمي المخصص. على سبيل المثال ، لدي إعداد مسار كمقال /: slug. عندما أزور أحد عناوين url هذه ، يحاول عامل الخدمة إرسال مستند لعنوان url هذا. أي شخص يعرف كيف يمكنني إيقاف ذلك وجعله يخدم المقالة بدلاً من ذلك؟ هذا مرتبط بالإعدادات في Workbox على ما أعتقد.

هل ما زلنا نتوقع أي تكامل للعاملين في الخدمة أو الدعم غير المتصل بالإنترنت في إصدارات NextJS المستقبلية؟ يبدو أن بعض الأشخاص كانوا يقولون سابقًا إنها ميزة ذات أولوية ، ولكن هذه المشكلة ظلت مفتوحة لأكثر من عام ونصف ...

@ caribou-code لا يمكنني التحدث باسم فريق Zeit بشأن خططهم لـ Next.js ، لكنني كتبت هذا منذ فترة: https://github.com/hanford/next-offline الذي يسمح لك بإنشاء عامل خدمة تلقائيًا ستعمل دون اتصال.

لقد استخدمتها في العديد من التطبيقات وعملت بشكل جيد. تحت غطاء محرك السيارة ، تستخدم Google workbox ، وهو مشروع مثير للغاية: https://developers.google.com/web/tools/workbox/

بعض الأمثلة حيث أستخدم next-offline :

• https://github.com/hanford/trends
• https://github.com/hanford/personal-website

hanford كنت أستخدم التالي غير المتصل قبل النشر هنا وهو جيد جدًا! في الواقع ، إنه الحل الوحيد الذي تمكنت من تنفيذه حتى الآن والذي يعمل بالفعل. عمل جيد!

ومع ذلك ، كنت أرغب حقًا في الحصول على حل يعمل مع البرنامج المساعد sw-precache-webpack-plugin نظرًا لوجود مثال على ذلك في مستودع NextJS ، على الرغم من أنني لا أستطيع معرفة كيفية تهيئته للتخزين المؤقت وخدمة جميع ملفاتي التالية من خلال عامل الخدمة. يبدو أن هذا البرنامج المساعد شائع جدًا أيضًا.

لقد أنشأت NextSimpleStarter قبل عام للمساعدة في حل هذه المشكلة . ولكن ، لاحظت أن sw-precache وحدها لن تكون قادرة على تلبية معظم المتطلبات في وضع عدم الاتصال ، لذا انتقلنا مؤخرًا إلى استخدام Workbox الذي يحل معظمها.

على الرغم من أنني لم أقوم بعد بتحديثه وفقًا للمعايير الحالية (أحجام الرموز وما إلى ذلك) ، والتي سأقوم بإصلاحها في غضون أيام قليلة. لا تتردد في إعطائها تجربة. أسقط مشكلة إذا لم تجدها مرضية.

hanford هذا يبدو رائعا. يتم تشغيله لي في وضع التطوير ولكن لا يوجد عامل خدمة في هذا الوضع. لا أستطيع أن أخبر من الملف التمهيدي الخاص بك كيفية جعله يعمل في وضع الإنتاج ومع عامل خدمة وبدون خادم عقدة. أقوم أيضًا بنشر تطبيقي على Netlify وكنت أستخدم next export . تطبيقي ثابت تمامًا. ليس لدي مشكلة في عدم استخدام next export إذا كانت هذه مشكلة . سأفعل كل ما هو أكثر أداءً ولا يكلف شيئًا. إنه تطبيق هواية ، لذا فأنا مرن.

ooade هذا يبدو رائعًا أيضًا ، لكنني حصلت على خطأ عند بدء تشغيله. أدى تغيير "بدون خادم" إلى "خادم" وفقًا لإرشاداتك إلى إصلاح هذا الخطأ ولكن بعد ذلك حصلت على الخطأ التالي

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

dancancro ، يجب أن تكون قادرًا بالتأكيد على استخدام next-offline أثناء استخدام next-export

هل تمانع في فتح مشكلة next-offline مع بعض الخطوات لإعادة الإنتاج حتى أتمكن من إلقاء نظرة أعمق؟

hanford يمكنني أن أفعل ذلك إذا أردت لكني لم أفعل شيئًا تعليماتك . المشكلة الوحيدة هي أنني لا أعرف كيفية تشغيله في وضع الإنتاج. انطلاقًا من هذه الحالة ، لا يُفترض أن يكون عامل الخدمة مسجلاً في وضع التطوير ، لذا فإن ما حدث لي هو سلوك متوقع. أنا فقط بحاجة إلى بعض التعليمات - كيفية تشغيله في وضع الإنتاج ، وإذا كان من الممكن استخدام next export ، فعندئذٍ كيفية تشغيل التعليمات البرمجية الثابتة التي يعرضها الخادم في وضع الإنتاج باستخدام next export .

أتفهمdancancro ، لكن هذا النقاش لا ينبغي أن يحدث هنا ، فهذه بالتأكيد ليست مشكلة مع Next.js نفسها.

الرجاء فتح مشكلة هنا وسيسعدني إلقاء نظرة / الإجابة على الأسئلة التي قد تكون لديكم.

لا يستفيد المجتمع إذا كان لدينا مناقشة في مشكلة / إعادة شراء غير ذات صلة

لقد قمت مؤخرًا بإنشاء ملحق PWA سهل الاستخدام لـ Next.js: next-pwa

تحقق من المثال هنا