Научите како да направите прогресивну веб апликацију за неколико минута помоћу Нект.јс

Мобилне апликације су скоро постале незаменљиве за предузећа због своје способности да корисницима пруже потребне услуге брзо и са лакоћом. Међутим, шта ако вам кажем да је могуће имати искуство слично мобилној апликацији на вебу? За то служе прогресивне веб апликације (ПВА).

Све је већа потражња за мобилним апликацијама, као што је показало истраживање Топ Десигн Фирмс . У 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:[email protected]", // 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 } ); } }

Да бисте потврдили да је апликација сада ПВА, икона за преузимање би требало да се појави крајње десно у УРЛ траци. Такође би требало да будете у могућности да видите информације о веб манифесту на картици апликација.

Закључак

Недавна исправка Нект.јс са изворном ПВА подршком учинила је процес креирања прогресивних веб апликација веома беспрекорним. Уз Нект.јс, развој и примена ПВА је сада једноставан процес у делу модерног веб развоја, јер програмери сада могу брзо да креирају апликације са функцијама сличним изворном језику које корисници очекују, све из веб претраживача.