Mobil ilovalar foydalanuvchilarga kerakli xizmatlarni tez va qulay tarzda taqdim etish qobiliyati tufayli korxonalar uchun deyarli ajralmas narsaga aylandi. Ammo, agar men sizga Internetda mobil ilovaga o'xshash tajribaga ega bo'lish mumkinligini aytsam nima bo'ladi? Progressive Web Apps (PWA) aynan shu maqsadda. so‘rovi shuni ko‘rsatadiki, mobil ilovalarga talab ortib bormoqda. 2022-yilda kichik biznesning deyarli yarmi – 48 foizi mobil ilovalariga ega bo‘lgan bo‘lsa, 2021-yilda bu ko‘rsatkich 32 foizni tashkil etgan bo‘lsa, bu ko‘rsatkich barcha platformalarda mobil aloqaga o‘xshash o‘zaro aloqalarni talab qiluvchi foydalanuvchi ehtiyojlarining o‘zgarishini ko‘rsatadi. Top Design Firms PWA-ni ishlab chiqish orqali korxonalar ushbu mahalliy ilova tajribasini veb-brauzer orqali to'g'ridan-to'g'ri taqdim etishi mumkin, bu esa oxirgi foydalanuvchilarga alohida mobil ilovaga ehtiyoj sezmasdan ishonchli va qiziqarli dasturni taqdim etishi mumkin. PWAlar nima? Progressiv veb-ilova - bu foydalanuvchilarga mobil qurilmalarga o'xshash mahalliy qo'llab-quvvatlashni ta'minlaydigan ilova bo'lib, ular Androiddan iOS va ish stollarigacha o'zgarib turadigan platformaga xos mulohazalar bilan tuziladi. Ular engil, barcha qurilmalarda foydalanish mumkin va internetga ulanganda avtomatik yangilanadi. Nima uchun biznesingiz uchun PWA haqida o'ylaysiz? Mahalliy ilovalarni ishlab chiqish bilan solishtirganda ular arzonroq Ularni ilovalar do‘konisiz foydalanuvchilarning bosh ekranlariga osongina o‘rnatish mumkin PWA'lar xuddi mobil ilovalar kabi push-bildirishnomalarni taklif qiladi Ular kontentni keshlash orqali oflayn funksiyani taklif qilishadi Ular turli xil qurilmalarda ishlash uchun mo'ljallangan Next.js-ning PWA uchun yangi mahalliy yordamiga umumiy nuqtai Yaqinda men NextJs ilovamni Progressive Web ilovasiga aylantirish uchun eng yaxshi yoʻl izlanayotgan edim, Reddit’ning keyingi Next.js yangilanishlari, jumladan PWA’larni mahalliy qoʻllab-quvvatlash haqida quyida keltirilgan izohiga duch keldim. sharhni tekshiring. Bu erda Yangilanishni ko'rib chiqqandan so'ng, aytishim mumkinki, PWA yaratish hech qachon oson bo'lmagan va men buni isbotlayman. Loyihani sozlash va talablar React haqida oqilona tushuncha. kompyuteringizda o'rnatilgan. NodeJs PS: Ilovangizni PWA sifatida tan olish uchun ikkita fayl juda muhim - va . manifest fayli xizmat ishchi fayli Veb-ilova manifesti ilovamiz haqidagi maʼlumotlarni oʻz ichiga olgan fayl boʻlib, uni oʻrnatishga imkon beradi. Ushbu ma'lumotlarga mavzu rangi, piktogramma, boshlang'ich URL va boshqalar kiradi. Manifest fayli: Xizmat ko'rsatuvchi xodim ilova fonida ishlaydigan skriptni o'z ichiga olgan fayldir. Bu push-bildirishnomalar, keshlash va oflayn qo'llab-quvvatlash kabi xususiyatlarga imkon beradi. Xizmat xodimi: 1.) Ilovani sozlash npx create-next-app@latest my-pwa-app Yoki yarn create next-app my-pwa-app Buyruqni ishga tushirgandan so'ng, o'rnatish xususiyatlari uchun ko'rsatmalarga rioya qiling, so'ngra loyiha katalogiga o'ting cd my-pwa-app Dev serverini ishga tushiring npm run dev 2.) Manifest faylini yarating katalogida yoki faylini yarating. app manifest.json manifest.ts import type { MetadataRoute } from 'next' export default function manifest(): MetadataRoute.Manifest { return { name: 'Next.js PWA', short_name: 'NextPWA', description: 'A Progressive Web App built with Next.js', start_url: '/', display: 'standalone', background_color: '#ffffff', theme_color: '#000000', icons: [ { src: '/icon-192x192.png', sizes: '192x192', type: 'image/png', }, { src: '/icon-512x512.png', sizes: '512x512', type: 'image/png', }, ], } } ilovaning rasmiy nomi. Bu nom asosiy ekranda paydo bo'ladi va foydalanuvchilarga ilovani aniqlash imkonini beradi. nomi: : Qisqa nom uzun bo'lsa va ko'rsatish uchun ko'p joy bo'lmasa paydo bo'ladi short_name : Ilova va u nima qilishini tavsiflaydi. tavsif : Agar foydalanuvchi dasturni ishga tushirsa, u bu yerda belgilangan marshrutdan boshlanadi. start_url : Displey xususiyati ishga tushirilganda o'zining ko'rinishini sozlaydi va yoki bo'lishi mumkin displey standalone minimal-ui fullscreen browser : silliq o‘tish va foydalanuvchi tajribasi uchun ilova mavzusiga mos keladigan fon rangidan foydalanish muhim background_color : Bu brauzer asboblar paneli va holat paneli kabi UI elementlarining rangini belgilaydi. theme_color : Belgilar qatori , va ko'rsatib, turli platformalarda ishlatiladigan piktogrammalarning xususiyatlarini o'z ichiga oladi. PWA uchun kamida va o'lchamdagi piktogrammalarga ega bo'lish muhimdir. piktogramma src size type 192x192 512x512 kabi veb-saytlar manifest faylini va turli o'lchamdagi piktogrammalarni tezda yaratish uchun ishlatilishi mumkin Manifest-generator 3.) Xizmat ishchi faylini yarating. Xizmat xodimi push hodisalarini tinglaydi va push bildirishnomalari uchun quyidagi funksiyani bajaradi self.addEventListener("push", function (event) { if (event.data) { const data = event.data.json(); const options = { body: data.body, icon: data.icon || '/icon.png', badge: "/icons/timer-icon-144.png", vibrate: [100, 50, 100], data: { dateOfArrival: Date.now(), primaryKey: "5", }, }; event.waitUntil(self.registration.showNotification(data.title, options)); } }); self.addEventListener("notificationclick", function (event) { console.log("Notification click received."); event.notification.close(); event.waitUntil(clients.openWindow("<https://your-website.com>")); //This should be the url to your website }); 4.) Xizmat ko'rsatuvchi xodimni ro'yxatdan o'tkazing Xizmat ko'rsatuvchi xodimni ro'yxatdan o'tkazish uchun siz xizmat ko'rsatuvchi xodim yaratilgan marshrutni ko'rsatishingiz kerak. const registration = await navigator.serviceWorker.register("/sw.js", { //provide the route to the service worker scope: "/", updateViaCache: "none", }); Bildirishnomalar va obunalarni boshqarish uchun o'rnating web-push-ni npm install web-push --save Keyin obunani olishimiz kerak, agar foydalanuvchida obuna bo'lsa yoki foydalanuvchini voqealarni surish uchun obuna bo'lsa. Haqiqiy dasturda ushbu obuna saqlash uchun serverga yuborilishi kerak async function registerServiceWorker() { const registration = await navigator.serviceWorker.register("/sw.js", { scope: "/", updateViaCache: "none", }); const sub = await registration.pushManager.getSubscription(); if (sub) { setSubscription(sub); //This would be sent to a server } else { const pushSubscription = await registration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: process.env.NEXT_PUBLIC_VAPID_PUBLIC_KEY, // Your VAPID public key }); setSubscription(pushSubscription); } } VAPID kalitlarini yaratish uchun quyidagilarni bajaring: npx web-push generate-vapid-keys Bularning barchasini foydalanuvchi interfeysi uchun push-bildirishnomani sinab ko'rish funktsiyasi bilan birlashtirish "use client"; import { useEffect, useState } from "react"; const Home = () => { const [subscription, setSubscription] = useState<PushSubscription | null>( null ); useEffect(() => { if ("serviceWorker" in navigator && "PushManager" in window) { registerServiceWorker(); } }, []); async function registerServiceWorker() { const registration = await navigator.serviceWorker.register("/sw.js", { //provide the route to the service worker scope: "/", updateViaCache: "none", }); const sub = await registration.pushManager.getSubscription(); if (sub) { setSubscription(sub); //This would be sent to a server } else { const pushSubscription = await registration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: process.env.NEXT_PUBLIC_VAPID_PUBLIC_KEY, // Your VAPID public key }); setSubscription(pushSubscription); } } //Create a function to test the notification const handleSendNotification = async () => { await fetch("/api/sendNotification", { method: "POST", body: JSON.stringify({ message: "Your timer has completed!", subscription: subscription, // This ideally, should not be included in the body. It should have already been saved on the server }), headers: { "Content-Type": "application/json", }, }); }; return ( <div> <h1>My PWA with Push Notifications</h1> <button onClick={handleSendNotification}>Notify Me!</button> </div> ); }; export default Home; 5.) Yakuniy nuqtani yaratish katalogida deb nomlangan yangi jild yarating. app api jildida nomli boshqa papka yarating. api sendNotification jildida nomli fayl yarating. sendNotification route.ts Tuzilishi quyidagicha bo'lishi kerak app/ └── api/ └── sendNotification/ └── route.ts route.ts faylida quyidagi kod qatorlarini kiriting import { NextResponse } from "next/server"; import webpush from "web-push"; webpush.setVapidDetails( "mailto:your-email@example.com", // Your email process.env.NEXT_PUBLIC_VAPID_PUBLIC_KEY!, process.env.VAPID_PRIVATE_KEY! ); export async function POST(req: Request) { const { message, subscription } = await req.json(); if (!subscription) { return NextResponse.json( { error: "No subscription available" }, { status: 400 } ); } try { await webpush.sendNotification( subscription, JSON.stringify({ title: "Notification", body: message }) ); return NextResponse.json({ success: true }); } catch (error) { console.error("Error sending notification:", error); return NextResponse.json( { error: "Failed to send notification" }, { status: 500 } ); } } Ilova endi PWA ekanligini tasdiqlash uchun yuklab olish belgisi url satrining o'ng tomonida paydo bo'lishi kerak. Ilovalar ko'rinishida veb-manifest haqidagi ma'lumotlarni ham ko'rishingiz kerak. Xulosa Next.js-ning mahalliy PWA qo'llab-quvvatlashi bilan so'nggi yangilanishi progressiv veb-ilovalarni yaratish jarayonini juda muammosiz qildi. Next.js yordamida PWA-ni ishlab chiqish va joylashtirish zamonaviy veb-ishlab chiqishning bir qismi bo'lgan oddiy jarayon, chunki ishlab chiquvchilar endi veb-brauzer orqali foydalanuvchilar kutgan mahalliy xususiyatlarga ega ilovalarni tezda yaratishi mumkin.
