الصفحة الرئيسية>موارد بناء الموقع>بيانات الموقع
تنزيل

الخط التالي

استخدم Workbox مع Next.js و
تمكين الوظائف غير المتصلة بسهولة في تطبيقك!


تثبيت 

$ npm install --save next-offline
$ yarn add next-offline

الاستخدام

هناك شيئان مهمان لإعداده ، أولاً نحتاج إلى next-offline للف التكوين التالي.

إذا لم تقم بذلك ، فقم بإنشاء next.config.js في مشروعك. 

 // next.config.js
const withOffline = require ( 'next-offline' )

const nextConfig = {
  ...
}

module . exports = withOffline ( nextConfig )

بعد ذلك ، نحتاج إلى التأكد من أن تطبيقنا يقدم بشكل صحيح عامل الخدمة ، ويعتمد هذا الإعداد على كيفية استضافة تطبيقك. هناك وثائق أدناه. إذا كنت لا تستخدم الآن 2.0 ، فيجب أن يعمل مثال 1.0 الآن في معظم الظروف.

الوثائق

  • خدمة العامل خدمة
    • الآن 1.0 / AWS
    • الآن 2.0
  • تسجيل عامل الخدمة
    • تجميع التسجيل وقت
    • تسجيل وقت التشغيل
  • تخصيص عامل الخدمة
    • باستخدام صندوق العمل
    • خيارات الخط التالي
  • استراتيجيات ذاكرة التخزين المؤقت
  • مسار عامل الخدمة
  • التصدير التالي
  • وضع التطوير
  • التالي غير متصل 5.0
  • contrbuting
  • رخصة

خدمة العامل خدمة

نظرًا لأن عمال الخدمة أقوياء للغاية ، فإن واجهة برمجة التطبيقات لديها بعض القيود المدمجة. على سبيل المثال ، يجب تقديم عمال الخدمة في المجال الذي يتم استخدامه عليه - لا يمكنك استخدام CDN.

الآن 1.0

سترغب في استخدام API Custom Server Custom. أسهل طريقة للقيام بذلك هي إنشاء 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

      // 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 } ` )
    } )
  } )

يمكنك قراءة المزيد عن الخوادم المخصصة في مستندات Next.js

إذا كنت لا تستضيف الآن ، فربما أتابع نهج الآن 1.0 لأن واجهة برمجة تطبيقات الخادم المخصصة يمكنها تمكين الكثير من الوظائف ، فهي ببساطة لا تعمل بشكل جيد مع الآن 2.0؟ ‍ ‍

الآن 2.0

لأن الآن 2.0 يعمل بشكل مختلف تمامًا عن الإصدار السابق ، وكذلك يخدم عامل الخدمة. هناك بعض الطرق المختلفة للقيام بذلك ، لكنني أوصي بمراجعة تطبيق مثال Now2. التغييرات التي يجب أن تكون على دراية بها في now.json و next.config.js.

تسجيل عامل الخدمة

تجميع التسجيل وقت

بشكل افتراضي ، سيقوم next-offline بتسجيل عامل خدمة مع البرنامج النصي أدناه ، ويتم إضافة هذا تلقائيًا إلى حزمة جانب العميل الخاص بك بمجرد استدعاء withOffline . 

 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 )
    } )
  } )
}

تسجيل وقت التشغيل

بديل للوقت التجويف ، يمكنك التحكم في التسجيل/عدم التسجيل في رمز التطبيق الخاص بك باستخدام وحدة next-offline/runtime . 

 import { register , unregister } from 'next-offline/runtime'

class App extends React . Component {
  componentDidMount ( ) {
    register ( )
  }
  componentWillUnmount ( ) {
    unregister ( )
  }
  . .
}

يمكنك اختيار تمرير مسار عامل الخدمة ونطاقه إذا لزم الأمر. 

 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 ( )
  }
  . .
}

إذا كنت تتعامل مع التسجيل بمفردك ، فالمرض dontAutoRegisterSw إلى الخط التالي. 

 // next.config.js
const withOffline = require ( 'next-offline' )

module . exports = withOffline ( { dontAutoRegisterSw : true } )

تخصيص عامل الخدمة

باستخدام صندوق العمل

إذا كنت جديدًا في WorkBox ، أوصي بقراءة هذا الدليل السريع-سيتم نقل أي شيء داخل workboxOpts إلى workbox-webpack-plugin .

حدد كائن workboxOpts في next.config.js وسيتم نقله إلى Workbox-Webpack-plugin. WorkBox هو ما يستخدمه next-offline تحت الغطاء لإنشاء عامل الخدمة ، يمكنك معرفة المزيد عنها هنا. 

 // next.config.js
const withOffline = require ( 'next-offline' )

const nextConfig = {
  workboxOpts : {
    ...
  }
}

module . exports = withOffline ( nextConfig )

خيارات الخط التالي

علاوة على خيارات صندوق العمل ، يوجد لدى Next Offline بعض الخيارات المدمجة في الأعلام لمنحك تحكمًا في الحبوب الدقيقة في كيفية إنشاء عامل الخدمة الخاص بك.

اسم يكتب وصف تقصير
توليد منطقية إذا كان FALSE ، فلن يقوم Next Offine بإنشاء عامل خدمة وسيحاول بدلاً من ذلك تعديل الملف الموجود في Workboxopts.swsrc باستخدام WorkBox [Injection Plugin] (https://developers.google.com/web/tools/workbox/modules/workbox-plugin-plugin#injectman) حقيقي
dontautoregistersw منطقية إذا كان هذا صحيحًا ، فلن يقوم Next Offine تلقائيًا بدفع البرنامج النصي للتسجيل إلى رمز التطبيق. هذا مطلوب إذا كنت تستخدم تسجيل وقت التشغيل أو تتعامل مع التسجيل بمفردك. خطأ شنيع
Devswsrc خيط مسار ليتم تسجيله بواسطة الخط التالي أثناء التطوير. بشكل افتراضي ، سيتم تسجيل الخط التالي أثناء التطوير خطأ شنيع
cenderateindevmode منطقية إذا كان هذا صحيحًا ، فسيتم إنشاء عامل الخدمة أيضًا في وضع التطوير. وإلا فإن عامل الخدمة المحدد في devswsrc سيتم استخدامه. خطأ شنيع
REGISWPREFIX خيط إذا لم يكن عامل الخدمة الخاص بك على مستوى جذر التطبيق الخاص بك ، فقد يساعدك ذلك في بادئة المسار. هذا مفيد إذا كنت ترغب في عمل عامل الخدمة الخاص بك على foobar.com/my/long/path/service-worker.js. يؤثر هذا على [Scope] (https://developers.google.com/web/ilt/pwa/introduction-to-service-work#registration_and_scope) لعامل الخدمة الخاص بك. خطأ شنيع
نِطَاق خيط يتم تمرير ذلك إلى عامل الخدمة المسجل تلقائيًا مما يسمح بزيادة أو تقليل ما لديه تحكم عامل الخدمة. "/"

استراتيجيات ذاكرة التخزين المؤقت

بشكل افتراضي next-offline على استراتيجية التخزين المؤقت للوقت التالي. إذا قمت بتخصيص next-offline باستخدام workboxOpts ، فلن يتم نقل السلوك الافتراضي إلى workbox-webpack-plugin . هذه المقالة رائعة في تحطيم وصفات ذاكرة التخزين المؤقت المختلفة المختلفة. 

 {
  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'
            }
          }
        }
      }
    ]
  }
} )

مسار عامل الخدمة

إذا كان تطبيقك لا يعيش على جذر مجالك ، فيمكنك استخدام registerSwPrefix . هذا مفيد إذا كان التطبيق الخاص بك موجودًا على Domain.com/my/custom/path لأن next-offline افتراضيًا يفترض أن تطبيقك موجود على Domain.com وسيحاول تسجيل Domain.com/service-worker.js. لا يمكننا دعم استخدام assetPrefix لأنه يجب تقديم عمال الخدمة في مجال الجذر. للحصول على انهيار تقني على هذا القيد ، راجع الرابط التالي: هل من الممكن خدمة عمال الخدمة من الأصل CDN/ARMOTE؟

بشكل افتراضي /static ستقوم next-offline بتمهيد جميع ملفات WebPack التالية.

إذا كنت ترغب في تضمين المزيد أو تغيير أصل الملفات الثابتة ، فاستخدم خيارات صندوق العمل المحددة: 

workboxOpts: {
  modifyURLPrefix : {
    'app' : assetPrefix ,
  } ,
  runtimeCaching : { ... }
}

وضع التطوير

بشكل افتراضي ، سيضيف next-offline عامل خدمة بدون OP في التطوير. إذا كنت ترغب في توفير خيار تمريرك الخاص بك إلى devSwSrc . هذا مفيد بشكل خاص إذا كنت ترغب في اختبار إشعارات دفع الويب في التطوير ، على سبيل المثال. 

 // next.config.js
const withOffline = require ( 'next-offline' )

module . exports = withOffline ( {
  devSwSrc : '/path/to/my/dev/service-worker.js'
} )

يمكنك تعطيل هذا السلوك عن طريق تعيين خيار generateInDevMode إلى true .

التصدير التالي

في Next [email protected] ، قمنا بإعادة كتابة وظائف التصدير للعمل في المزيد من الحالات ، بشكل أكثر موثوقية ، مع كود أقل بفضل بعض الإضافات في 7.0.0 التالية!

يمكنك قراءة المزيد حول التصدير على مستندات Next.js ولكن يجب أن يكون العمل التالي في وضع عدم الاتصال فقط.

التالي غير متصل 5.0

إذا كنت تقوم بالترقية إلى أحدث إصدار من next-offline فإنني أوصي بإلقاء نظرة على ما تم إضافته/تغييره داخل صندوق العمل في إصدارات 5.x جنبًا إلى جنب مع الإصدار 4.0 الذي تضمن تغييرات كسر. لم تتغير واجهة برمجة تطبيقات Next Offline ، ولكن التبعية الأساسية!

أسئلة؟ تعليق؟ أخبرونى من فضلكم

المساهمة

next-offline هو Lerna Monorepo الذي يستخدم مساحات عمل الغزل. بعد استنساخ الريبو ، قم بتشغيل ما يلي 

$ yarn bootstrap

سيضمن ذلك أن إصدار التطوير الخاص بك من الخط التالي هو متماثل في الأمثلة والاختبارات التي يجب أن تسمح لك بإجراء التغييرات بسرعة!

ترخيص (MIT) 

 WWWWWW||WWWWWW
 W W W||W W W
      ||
    ( OO )__________
     /  |           
    /o o|    MIT     
    ___/||_||__||_|| *
         || ||  || ||
        _||_|| _||_||
       (__|__|(__|__|

حقوق الطبع والنشر © 2017-Present Jack Hanford ، [email protected]

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

يجب إدراج إشعار حقوق الطبع والنشر أعلاه وإشعار الإذن هذا في جميع النسخ أو الأجزاء الكبيرة من البرنامج.

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

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل