next pwa
5.6.1
ปลั๊กอินนี้ขับเคลื่อนโดยกล่องงานและสิ่งดีอื่นๆ
แบ่งปันโครงการ PWA ที่ยอดเยี่ยมของคุณที่นี่
คุณสมบัติ
next-i18nextblitz.config.js ).module.js เมื่อ next.config.js มีการตั้งค่า experimental.modern เป็น trueหมายเหตุ 1 -
next-pwaเวอร์ชัน 2.0.0+ ควรใช้ได้กับnext.js9.1+ เท่านั้น และไฟล์สแตติกควรให้บริการผ่านไดเร็กทอรีpublicเท่านั้น สิ่งนี้จะทำให้สิ่งต่าง ๆ ง่ายขึ้นหมายเหตุ 2 - หากคุณพบข้อผิดพลาด
TypeError: Cannot read property **'javascript' of undefined**ในระหว่างการสร้าง โปรดพิจารณาอัปเกรดเป็น webpack5 ในnext.config.js
หากคุณยังใหม่กับ
next.jsหรือreact.jsเลย คุณอาจต้องการชำระเงินเพื่อเรียนรู้เอกสาร next.js หรือ next.js ก่อน จากนั้นเริ่มจากตัวอย่างง่ายๆ หรือตัวอย่างเว็บแอปแบบก้าวหน้าในพื้นที่เก็บข้อมูล next.js
yarn add next-pwa อัปเดตหรือสร้าง next.config.js ด้วย
const withPWA = require ( 'next-pwa' ) ( {
dest : 'public'
} )
module . exports = withPWA ( {
// next.js config
} ) หลังจากรัน next build แล้ว สิ่งนี้จะสร้างไฟล์สองไฟล์ใน public ของคุณ: workbox-*.js และ sw.js ซึ่งจะให้บริการแบบคงที่โดยอัตโนมัติ
หากคุณใช้ Next.js เวอร์ชัน 9 หรือใหม่กว่า ให้ข้ามตัวเลือกด้านล่างและไปยังขั้นตอนที่ 2
หากคุณใช้ Next.js ที่เก่ากว่าเวอร์ชัน 9 คุณจะต้องเลือกตัวเลือกด้านล่างก่อนดำเนินการต่อในขั้นตอนที่ 2
คัดลอกไฟล์ไปยังเซิร์ฟเวอร์โฮสต์ไฟล์แบบคงที่ เพื่อให้สามารถเข้าถึงได้จากเส้นทางต่อไปนี้: https://yourdomain.com/sw.js และ https://yourdomain.com/workbox-*.js
ตัวอย่างหนึ่งคือการใช้บริการโฮสติ้ง Firebase เพื่อโฮสต์ไฟล์เหล่านั้นแบบคงที่ คุณสามารถทำให้ขั้นตอนการคัดลอกเป็นแบบอัตโนมัติได้โดยใช้สคริปต์ในเวิร์กโฟลว์การปรับใช้ของคุณ
ด้วยเหตุผลด้านความปลอดภัย คุณต้องโฮสต์ไฟล์เหล่านี้โดยตรงจากโดเมนของคุณ หากเนื้อหาถูกส่งโดยใช้การเปลี่ยนเส้นทาง เบราว์เซอร์จะปฏิเสธที่จะเรียกใช้โปรแกรมทำงานของบริการ
เมื่อได้รับคำขอ HTTP ให้ทดสอบว่ามีการร้องขอไฟล์เหล่านั้นหรือไม่ จากนั้นจึงส่งคืนไฟล์สแตติกเหล่านั้น
ตัวอย่าง 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
if ( pathname === '/sw.js' || / ^/(workbox|worker|fallback)-w+.js$ / . test ( pathname ) ) {
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-pwaและคุณอาจตั้งค่าไว้แล้ว ถ้าไม่เช่นนั้นให้ดำเนินการต่อและตั้งค่า
สร้างไฟล์ manifest.json ในโฟลเดอร์ public ของคุณ:
{
"name" : " PWA App " ,
"short_name" : " App " ,
"icons" : [
{
"src" : " /icons/android-chrome-192x192.png " ,
"sizes" : " 192x192 " ,
"type" : " image/png " ,
"purpose" : " any maskable "
},
{
"src" : " /icons/android-chrome-384x384.png " ,
"sizes" : " 384x384 " ,
"type" : " image/png "
},
{
"src" : " /icons/icon-512x512.png " ,
"sizes" : " 512x512 " ,
"type" : " image/png "
}
],
"theme_color" : " #FFFFFF " ,
"background_color" : " #FFFFFF " ,
"start_url" : " / " ,
"display" : " standalone " ,
"orientation" : " portrait "
} เพิ่มสิ่งต่อไปนี้ลงใน _document.jsx หรือ _app.tsx ใน :
< meta name =" application-name " content =" PWA App " />
< meta name =" apple-mobile-web-app-capable " content =" yes " />
< meta name =" apple-mobile-web-app-status-bar-style " content =" default " />
< meta name =" apple-mobile-web-app-title " content =" PWA App " />
< meta name =" description " content =" Best PWA App in the world " />
< meta name =" format-detection " content =" telephone=no " />
< meta name =" mobile-web-app-capable " content =" yes " />
< meta name =" msapplication-config " content =" /icons/browserconfig.xml " />
< meta name =" msapplication-TileColor " content =" #2B5797 " />
< meta name =" msapplication-tap-highlight " content =" no " />
< meta name =" theme-color " content =" #000000 " />
< link rel =" apple-touch-icon " href =" /icons/touch-icon-iphone.png " />
< link rel =" apple-touch-icon " sizes =" 152x152 " href =" /icons/touch-icon-ipad.png " />
< link rel =" apple-touch-icon " sizes =" 180x180 " href =" /icons/touch-icon-iphone-retina.png " />
< link rel =" apple-touch-icon " sizes =" 167x167 " href =" /icons/touch-icon-ipad-retina.png " />
< link rel =" icon " type =" image/png " sizes =" 32x32 " href =" /icons/favicon-32x32.png " />
< link rel =" icon " type =" image/png " sizes =" 16x16 " href =" /icons/favicon-16x16.png " />
< link rel =" manifest " href =" /manifest.json " />
< link rel =" mask-icon " href =" /icons/safari-pinned-tab.svg " color =" #5bbad5 " />
< link rel =" shortcut icon " href =" /favicon.ico " />
< link rel =" stylesheet " href =" https://fonts.googleapis.com/css?family=Roboto:300,400,500 " />
< meta name =" twitter:card " content =" summary " />
< meta name =" twitter:url " content =" https://yourdomain.com " />
< meta name =" twitter:title " content =" PWA App " />
< meta name =" twitter:description " content =" Best PWA App in the world " />
< meta name =" twitter:image " content =" https://yourdomain.com/icons/android-chrome-192x192.png " />
< meta name =" twitter:creator " content =" @DavidWShadow " />
< meta property =" og:type " content =" website " />
< meta property =" og:title " content =" PWA App " />
< meta property =" og:description " content =" Best PWA App in the world " />
< meta property =" og:site_name " content =" PWA App " />
< meta property =" og:url " content =" https://yourdomain.com " />
< meta property =" og:image " content =" https://yourdomain.com/icons/apple-touch-icon.png " />
เคล็ดลับ: ใส่เมตาแท็กส่วนหัว
viewportลงใน_app.jsแทนที่จะใส่ใน_document.jsหากคุณต้องการ
< meta
name = 'viewport'
content = 'minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, user-scalable=no, viewport-fit=cover'
/ > ทางเลือกแบบออฟไลน์มีประโยชน์เมื่อการดึงข้อมูลล้มเหลวจากทั้งแคชและเครือข่าย โดยจะมีการแสดงทรัพยากรที่เก็บไว้ล่วงหน้าแทนการแสดงข้อผิดพลาดจากเบราว์เซอร์
ในการเริ่มต้น เพียงเพิ่ม /_offline เพจ เช่น pages/_offline.js หรือ pages/_offline.jsx หรือ pages/_offline.ts หรือ pages/_offline.tsx ถ้าอย่างนั้นคุณก็พร้อมแล้ว! เมื่อผู้ใช้ออฟไลน์ หน้าทั้งหมดที่ไม่ได้แคชไว้จะถอยกลับไปเป็น '/_offline'
ใช้ตัวอย่างนี้เพื่อดูการทำงานจริง
next-pwa ช่วยให้คุณแคชทรัพยากรเหล่านั้นล่วงหน้าในการโหลดครั้งแรก จากนั้นฉีดตัวจัดการทางเลือกไปยังปลั๊กอิน handlerDidError ไปยังการกำหนดค่า runtimeCaching ทั้งหมด เพื่อให้ทรัพยากรที่แคชไว้ล่วงหน้าใช้งานได้เมื่อการดึงข้อมูลล้มเหลว
คุณยังสามารถตั้งค่า precacheFallback.fallbackURL ในรายการกำหนดค่า runtimeCaching เพื่อใช้ฟังก์ชันที่คล้ายกันได้ ข้อแตกต่างคือวิธีการข้างต้นขึ้นอยู่กับประเภททรัพยากร วิธีการนี้อิงตามรูปแบบ URL ที่ตรงกัน หากการกำหนดค่านี้ได้รับการตั้งค่าในรายการการกำหนดค่า runtimeCaching ทางเลือกตามประเภททรัพยากรจะถูกปิดใช้งานโดยอัตโนมัติสำหรับรูปแบบ URL นี้โดยเฉพาะเพื่อหลีกเลี่ยงความขัดแย้ง
มีตัวเลือกที่คุณสามารถใช้เพื่อปรับแต่งพฤติกรรมของปลั๊กอินนี้โดยเพิ่มวัตถุ pwa ในการกำหนดค่าถัดไปใน next.config.js :
const withPWA = require ( 'next-pwa' ) ( {
dest : 'public'
// disable: process.env.NODE_ENV === 'development',
// register: true,
// scope: '/app',
// sw: 'service-worker.js',
//...
} )
module . exports = withPWA ( {
// next.js config
} )falsedisable: false เพื่อที่จะสร้าง service worker ทั้งใน dev และ proddisable: true เพื่อปิดการใช้งาน PWA โดยสมบูรณ์dev คุณสามารถตั้ง disable: process.env.NODE_ENV === 'development'truefalse เมื่อคุณต้องการจัดการ register service worker ด้วยตัวเอง ซึ่งสามารถทำได้ใน componentDidMount ของแอปรูทของคุณ คุณสามารถพิจารณา register.js เป็นตัวอย่างได้basePath ใน next.config.js หรือ //app ดังนั้นเส้นทางภายใต้ /app จะเป็น PWA ในขณะที่เส้นทางอื่นไม่เป็น/sw.jspublic ไม่ให้ถูกแคชล่วงหน้า['!noprecache/**/*'] - หมายความว่าพฤติกรรมเริ่มต้นจะแคชไฟล์ทั้งหมดไว้ในโฟลเดอร์ public ของคุณ แต่ไฟล์จะอยู่ในโฟลเดอร์ /public/noprecache คุณสามารถใส่ไฟล์ไว้ในโฟลเดอร์นั้นเพื่อไม่ให้แคชล่วงหน้าโดยไม่ต้องกำหนดค่านี้['!img/super-large-image.jpg', '!fonts/not-used-fonts.otf'].next/static (หรือบิลด์ที่คุณกำหนดเอง)[][/chunks/images/.*$/] - อย่า precache ไฟล์ภายใต้ .next/static/chunks/images (ขอแนะนำอย่างยิ่งให้ใช้งานได้กับปลั๊กอิน next-optimized-images )truetruecacheStartUrl เป็น true/login ขอแนะนำให้ตั้งค่า URL ที่เปลี่ยนเส้นทางนี้เพื่อประสบการณ์ผู้ใช้ที่ดีที่สุดundefineddynamicStartUrlRedirect เป็น true/_offline เพจ เช่น pages/_offline.js เท่านี้ก็เรียบร้อย ไม่จำเป็นต้องกำหนดค่าใดๆobjectfallbacks.document - เส้นทางสำรองสำหรับเอกสาร (เพจ) ค่าเริ่มต้นเป็น /_offline หากคุณสร้างเพจนั้นfallbacks.image - เส้นทางสำรองสำหรับรูปภาพ ค่าเริ่มต้นคือไม่มีfallbacks.audio - เส้นทางสำรองสำหรับเสียง ไม่มีค่าเริ่มต้นfallbacks.video - เส้นทางสำรองสำหรับวิดีโอ ไม่มีค่าเริ่มต้นfallbacks.font - เส้นทางทางเลือกสำหรับแบบอักษร ค่าเริ่มต้นคือไม่มีnext/link อยู่ที่ส่วนหน้า ลองดูตัวอย่างนี้เพื่อดูบริบทว่าทำไมจึงนำสิ่งนี้ไปใช้false"" - เช่น ค่าเริ่มต้นที่ไม่มีคำนำหน้า/subdomain หากแอปโฮสต์บน example.com/subdomainlocation.reload() เพื่อรีเฟรชแอปหรือไม่truenext-pwa ค้นหาการใช้งานของผู้ปฏิบัติงานที่กำหนดเองเพื่อเพิ่มให้กับพนักงานบริการที่สร้างโดยเวิร์กบ็อกซ์ สำหรับข้อมูลเพิ่มเติม โปรดดูตัวอย่างผู้ปฏิบัติงานแบบกำหนดเองworker next-pwa ใช้ workbox-webpack-plugin ตัวเลือกอื่น ๆ ที่สามารถใส่ในวัตถุ pwa สามารถพบได้ ในเอกสาร สำหรับ GenerateSW และ InjectManifest หากคุณระบุ swSrc ระบบจะใช้ปลั๊กอิน InjectManifest มิฉะนั้น GenerateSW จะถูกใช้เพื่อสร้างพนักงานบริการ
next-pwa ใช้ runtime cache.js เริ่มต้น
มีโอกาสที่ดีที่คุณอาจต้องการปรับแต่งกฎการแคชรันไทม์ของคุณเอง โปรดคัดลอกไฟล์ cache.js เริ่มต้นและปรับแต่งกฎตามที่คุณต้องการ อย่าลืมฉีดการกำหนดค่าลงในการกำหนดค่า pwa ของคุณใน next.config.js
นี่คือเอกสารเกี่ยวกับวิธีการเขียนการกำหนดค่าแคชรันไทม์ รวมถึงการซิงค์พื้นหลังและคุณสมบัติการอัปเดตการออกอากาศ และอื่นๆ อีกมากมาย
{command: 'doSomething', message: ''} object เมื่อ postMessage ไปยังพนักงานบริการ เพื่อให้ผู้ฟังสามารถทำงานได้หลายอย่างโดยใช้ if...else...clean application cache อย่างต่อเนื่องเพื่อลดข้อผิดพลาดที่ไม่สม่ำเสมอruntimeCaching เช่น options.cacheableResponse.statuses=[200,302] .sw.js ที่คุณสร้างขึ้นเพื่อดูว่าเกิดอะไรขึ้นจริงๆnext-pwa สร้าง build ของ worker box โดยระบุ mode: 'production' ในส่วน pwa ของ next.config.js แม้ว่า next-pwa จะสร้าง build การพัฒนา worker box ในระหว่างการพัฒนา (โดยการรัน next ) และ build ของ worker box โดยอัตโนมัติระหว่างการผลิต (โดยการรัน next build และ next start ) คุณยังอาจต้องการบังคับให้สร้างเวอร์ชันที่ใช้งานจริงแม้ในระหว่างการพัฒนาเว็บแอปของคุณด้วยเหตุผลต่อไปนี้:self.__WB_DISABLE_DEV_LOGS = true ใน worker/index.js (สร้างหนึ่งรายการหากคุณไม่มี)userAgent เพื่อตรวจสอบว่าผู้ใช้ใช้ Safari/iOS/MacOS หรือแพลตฟอร์มอื่นๆ หรือไม่ ไลบรารี ua-parser-js เป็นเพื่อนที่ดีสำหรับจุดประสงค์นั้น เอ็มไอที
