next offline

นอก

ใช้กล่องทำงานกับ 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
• ที่คัดค้าน
• ใบอนุญาต

บริการพนักงานบริการ

เนื่องจากพนักงานบริการมีประสิทธิภาพมาก API จึงมีข้อ จำกัด บางอย่างในตัวตัวอย่างเช่นพนักงานบริการจะต้องเสิร์ฟในโดเมนที่ใช้อยู่ - คุณไม่สามารถใช้ CDN ได้

ตอนนี้ 1.0

คุณจะต้องใช้ API เซิร์ฟเวอร์ที่กำหนดเอง next.js วิธีที่ง่ายที่สุดในการสร้าง 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 } ` )
    } )
  } )

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับเซิร์ฟเวอร์ที่กำหนดเองได้ในเอกสารถัดไป js

หากคุณไม่ได้โฮสต์ด้วยตอนนี้ฉันอาจทำตามวิธีการ 1.0 ตอนนี้เพราะเซิร์ฟเวอร์ API ที่กำหนดเองสามารถเปิดใช้งานฟังก์ชั่นจำนวนมากได้

ตอนนี้ 2.0

เพราะตอนนี้ 2.0 ทำงานได้แตกต่างจากเวอร์ชันก่อนหน้าดังนั้นการให้บริการพนักงานบริการ มีหลายวิธีในการทำเช่นนี้ แต่ฉันขอแนะนำให้ตรวจสอบแอพตัวอย่างนี้ 2 ตัวอย่างนี้ การเปลี่ยนแปลงที่จะรับรู้อยู่ในตอนนี้ 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 ไปที่ Offline ถัดไป

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

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

ปรับแต่งพนักงานบริการ

ใช้กล่องทำงาน

หากคุณยังใหม่กับกล่องทำงานฉันขอแนะนำให้อ่านคู่มือด่วนนี้-สิ่งใดก็ตามที่อยู่ใน 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 มีตัวเลือกบางอย่างที่สร้างขึ้นในธงเพื่อให้การควบคุมธัญพืชที่ดีขึ้นเกี่ยวกับวิธีการสร้างพนักงานบริการของคุณ

ชื่อ	พิมพ์	คำอธิบาย	ค่าเริ่มต้น
สร้าง	บูลีน	หากเป็นเท็จ, Next-offline จะไม่สร้างผู้ปฏิบัติงานบริการและจะพยายามแก้ไขไฟล์ที่พบใน workboxopts.swsrc แทนที่จะใช้งาน [ปลั๊กอินฉีด] ของกล่องทำงาน (https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin#inject	จริง
Dontautoregistersw	บูลีน	หากเป็นจริง Next-Offline จะไม่ส่งสคริปต์การลงทะเบียนลงในรหัสแอปพลิเคชันโดยอัตโนมัติ สิ่งนี้จำเป็นหากคุณใช้การลงทะเบียนรันไทม์หรือกำลังจัดการการลงทะเบียนด้วยตัวคุณเอง	เท็จ
devswsrc	สาย	เส้นทางที่จะลงทะเบียนโดย Next-Offline ระหว่างการพัฒนา โดยค่าเริ่มต้น next-offline จะลงทะเบียน noop ในระหว่างการพัฒนา	เท็จ
GenerateIndeVmode	บูลีน	หากเป็นจริงผู้ปฏิบัติงานบริการจะถูกสร้างขึ้นในโหมดการพัฒนา มิฉะนั้นจะใช้คนงานบริการที่กำหนดไว้ใน DevSWSRC	เท็จ
ลงทะเบียน	สาย	หากพนักงานบริการของคุณไม่อยู่ในระดับรูทของแอปพลิเคชันสิ่งนี้จะช่วยให้คุณนำหน้าเส้นทางได้ สิ่งนี้มีประโยชน์หากคุณต้องการพนักงานบริการของคุณที่ foobar.com/my/long/path/service-worker.js สิ่งนี้มีผลต่อ [ขอบเขต] (https://developers.google.com/web/ilt/pwa/introduction-to-service-worker#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/รีโมท?

โดยค่าเริ่มต้น next-offline จะ precache ไฟล์ next.js webpack ที่ปล่อยออกมาทั้งหมดและไฟล์คงที่ที่ผู้ใช้กำหนด (ภายใน /static )-โดยพื้นฐานแล้วทุกอย่างที่ส่งออกเช่นกัน

หากคุณต้องการรวมเพิ่มเติมหรือเปลี่ยนที่มาของไฟล์คงที่ของคุณใช้ตัวเลือกกล่องทำงานที่กำหนด:

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

โหมดการพัฒนา

โดยค่าเริ่มต้น next-offline จะเพิ่มพนักงานบริการที่ไม่มีการพัฒนา หากคุณต้องการให้ Pass ของคุณเองไปยังตัวเลือก devSwSrc สิ่งนี้มีประโยชน์อย่างยิ่งหากคุณต้องการทดสอบการแจ้งเตือนแบบพุชเว็บในการพัฒนาเช่น

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

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

คุณสามารถปิดการใช้งานพฤติกรรมนี้ได้โดยการตั้งค่าตัวเลือก generateInDevMode เป็น true

การส่งออกครั้งต่อไป

ใน [email protected] เราได้เขียนฟังก์ชั่นการส่งออกใหม่เพื่อทำงานในบางกรณีมีความน่าเชื่อถือมากขึ้นโดยมีรหัสน้อยลงด้วยการเพิ่มเติมบางส่วนใน 7.0.0 ถัดไป!

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับการส่งออกที่เอกสาร next.js แต่ออฟไลน์ถัดไปควรใช้งาน™

ถัดไปออฟไลน์ 5.0

หากคุณกำลังอัพเกรดเป็นเวอร์ชันล่าสุดของ next-offline ฉันขอแนะนำให้มองไปที่สิ่งที่เพิ่ม/เปลี่ยนแปลงภายใน Workbox ในรุ่น 5.X พร้อมกับการเปิดตัว 4.0 ซึ่งรวมถึงการเปลี่ยนแปลงที่แตกหัก API ของ Next Offline ไม่เปลี่ยนแปลง แต่การพึ่งพาหลักมี!

---

คำถาม? ข้อเสนอแนะ? โปรดแจ้งให้เราทราบ

การบริจาค

next-offline เป็น Lerna Monorepo ซึ่งใช้พื้นที่ทำงานของเส้นด้าย หลังจากโคลนนิ่ง repo ให้เรียกใช้สิ่งต่อไปนี้

$ yarn bootstrap

สิ่งนี้จะช่วยให้มั่นใจได้ว่าเวอร์ชันการพัฒนาของคุณจะไม่ได้รับการเชื่อมโยงในตัวอย่างและการทดสอบซึ่งจะช่วยให้คุณสามารถเปลี่ยนแปลงได้อย่างรวดเร็ว!

ใบอนุญาต (MIT)

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

ลิขสิทธิ์© 2017-Present Jack Hanford, [email protected]

ได้รับอนุญาตโดยไม่ต้องเสียค่าใช้จ่ายสำหรับบุคคลใด ๆ ที่ได้รับสำเนาซอฟต์แวร์นี้และไฟล์เอกสารที่เกี่ยวข้อง ('ซอฟต์แวร์') เพื่อจัดการในซอฟต์แวร์โดยไม่มีการ จำกัด รวมถึง แต่ไม่ จำกัด เฉพาะสิทธิ์ในการใช้คัดลอกดัดแปลงรวมเผยแพร่แจกจ่าย sublicense

ประกาศลิขสิทธิ์ข้างต้นและประกาศการอนุญาตนี้จะรวมอยู่ในสำเนาทั้งหมดหรือส่วนสำคัญของซอฟต์แวร์

ซอฟต์แวร์มีให้ 'ตามที่เป็นอยู่' โดยไม่มีการรับประกันใด ๆ ไม่ว่าโดยชัดแจ้งหรือโดยนัยรวมถึง แต่ไม่ จำกัด เพียงการรับประกันความสามารถในการค้าการออกกำลังกายเพื่อวัตถุประสงค์เฉพาะและการไม่เข้าร่วม ไม่ว่าในกรณีใดผู้เขียนหรือผู้ถือลิขสิทธิ์จะต้องรับผิดชอบต่อการเรียกร้องความเสียหายหรือความรับผิดอื่น ๆ ไม่ว่าจะเป็นการกระทำของสัญญาการละเมิดหรืออื่น ๆ ที่เกิดขึ้นจากหรือเกี่ยวข้องกับซอฟต์แวร์หรือการใช้งานหรือการติดต่ออื่น ๆ ในซอฟต์แวร์