Мобилне апликације су скоро постале незаменљиве за предузећа због своје способности да корисницима пруже потребне услуге брзо и са лакоћом. Међутим, шта ако вам кажем да је могуће имати искуство слично мобилној апликацији на вебу? За то служе прогресивне веб апликације (ПВА). Све је већа потражња за мобилним апликацијама, као што је показало истраживање . У 2022. години, скоро половина – 48% – малих предузећа је имала своје мобилне апликације у поређењу са једном трећином од 32% у 2021. Овај тренд показује промену у потребама корисника који захтевају интеракције сличне мобилним уређајима на свим платформама. Топ Десигн Фирмс Развојем ПВА, предузећа могу директно да пруже ово искуство изворне апликације преко веб претраживача, дајући крајњим корисницима поуздану и привлачну апликацију без потребе за посебном мобилном апликацијом Шта су ПВА? Прогресивна веб апликација је апликација која корисницима пружа изворну подршку, сродну мобилним уређајима, без потребе за прављењем уз разматрање специфичних за платформу која варира од Андроид-а преко ИОС-а до десктоп рачунара. Они су лагани, доступни на свим уређајима и аутоматски се ажурирају када су повезани на интернет. Зашто размотрити ПВА за своје пословање? Они су јефтинији у поређењу са развојем изворних апликација Могу се лако инсталирати на почетним екранима корисника без продавнице апликација ПВА нуде пусх обавештења баш као и мобилне апликације Они нуде функционалност ван мреже кеширањем садржаја Дизајнирани су за рад на различитим уређајима Преглед нове изворне подршке Нект.јс за ПВА Недавно сам истраживао најбоље могуће да своју НектЈс апликацију учиним прогресивном веб апликацијом када сам наишао на коментар на Реддиту испод о недавним ажурирањима Нект.јс укључујући изворну подршку за ПВА. Погледајте коментар . овде Након прегледа ажурирања, могу рећи да никада није било лакше креирати ПВА и то ћу доказати. Подешавање пројекта и захтеви Разумно разумевање Реацт-а. инсталиран на вашој машини. НодеЈс ПС: Две датотеке су веома важне да би се ваша апликација препознала као ПВА – и . датотека манифеста датотека сервисера Манифест веб апликације је датотека која садржи информације о нашој апликацији што је у суштини чини инсталираном. Ове информације укључују боју теме, иконе, почетни УРЛ итд. Датотека манифеста: Сервисни радник је датотека која садржи скрипту која се покреће у позадини апликације. Омогућава функције као што су пусх обавештења, кеширање и подршка ван мреже. Сервисни радник: 1.) Подешавање апликације npx create-next-app@latest my-pwa-app Ор yarn create next-app my-pwa-app Након што покренете команду, пратите упутства за спецификације ваше инсталације, а затим идите у директоријум пројекта cd my-pwa-app Покрените дев сервер npm run dev 2.) Креирајте датотеку манифеста Направите датотеку или у директоријуму . manifest.json manifest.ts app 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', }, ], } } Званични назив апликације. Ово име се појављује на почетном екрану и омогућава корисницима да идентификују апликацију. назив: : Кратко име се појављује када је име дуго и нема много простора за приказ схорт_наме : Описује апликацију и шта она ради. опис : Када корисник покрене апликацију, она почиње са руте која је овде наведена. старт_урл : својство дисплаи конфигурише свој изглед када се покрене и може бити било који или дисплаи standalone minimal-ui fullscreen browser : Важно је да користите боју позадине која одговара теми апликације за несметан прелаз и корисничко искуство бацкгроунд_цолор : Ово одређује боју елемената корисничког интерфејса као што су трака са алаткама претраживача и статусна трака. тхеме_цолор : Низ икона садржи својства икона које ће се користити на различитим платформама, наводећи , и . За ваш ПВА, важно је да имате најмање иконе величине и . иконе src size type 192x192 512x512 Веб локације као што могу се користити за брзо генерисање датотеке манифеста и различитих величина икона је манифест-генератор 3.) Креирајте датотеку сервисера. Сервисни радник би слушао пусх догађаје и извршио доњу функцију за пусх обавештења 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.) Региструјте услужног радника Да бисте регистровали сервисера, потребно је да наведете руту на којој се креира сервисер. const registration = await navigator.serviceWorker.register("/sw.js", { //provide the route to the service worker scope: "/", updateViaCache: "none", }); Инсталирајте за руковање обавештењима и претплатама веб-пусх npm install web-push --save Затим морамо да добијемо претплату ако је корисник има или да претплатимо корисника да гура догађаје. У стварној апликацији, ову претплату треба послати на сервер за складиштење 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); } } Да бисте генерисали ВАПИД кључеве, покрените: npx web-push generate-vapid-keys Све то састављамо за кориснички интерфејс са функцијом за тестирање пусх обавештења "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.) Креирање крајње тачке Унутар директоријума направите нову фасциклу под називом . app api У оквиру фасцикле, направите другу фасциклу под називом . api sendNotification Унутар фолдера креирајте датотеку под називом . sendNotification route.ts Структура треба да буде следећа app/ └── api/ └── sendNotification/ └── route.ts У датотеку роуте.тс укључите следеће линије кода 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 } ); } } Да бисте потврдили да је апликација сада ПВА, икона за преузимање би требало да се појави крајње десно у УРЛ траци. Такође би требало да будете у могућности да видите информације о веб манифесту на картици апликација. Закључак Недавна исправка Нект.јс са изворном ПВА подршком учинила је процес креирања прогресивних веб апликација веома беспрекорним. Уз Нект.јс, развој и примена ПВА је сада једноставан процес у делу модерног веб развоја, јер програмери сада могу брзо да креирају апликације са функцијама сличним изворном језику које корисници очекују, све из веб претраживача.
