モバイル アプリは、ユーザーに必要なサービスを迅速かつ簡単に提供できるため、企業にとってほぼ不可欠なものとなっています。しかし、Web 上でモバイル アプリのようなエクスペリエンスを実現できるとしたらどうでしょうか。これがプログレッシブ ウェブ アプリ (PWA) の目的です。 調査で示されているように、モバイル アプリの需要は高まっています。2021 年には 3 分の 1 (32%) でしたが、2022 年には中小企業のほぼ半数 (48%) がモバイル アプリを導入しました。この傾向は、すべてのプラットフォームでモバイルのようなインタラクションを求めるユーザー ニーズの変化を示しています。 Top Design Firms の PWAを開発することで、企業はWebブラウザ経由でネイティブアプリのエクスペリエンスを直接提供することができ、エンドユーザーに別のモバイルアプリケーションを必要とせずに信頼性が高く魅力的なアプリケーションを提供することができます。 PWA とは何ですか? プログレッシブ ウェブ アプリは、Android から iOS、デスクトップまでさまざまなプラットフォーム固有の考慮事項を考慮して構築する必要なく、モバイル デバイスと同様のネイティブ サポートをユーザーに提供するアプリです。軽量で、すべてのデバイスからアクセスでき、インターネットに接続すると自動的に更新されます。 ビジネスに PWA を検討する理由は何ですか? ネイティブアプリの開発に比べてコストが安い アプリストアがなくてもユーザーのホーム画面に簡単にインストールできる PWAはモバイルアプリと同じようにプッシュ通知を提供します コンテンツをキャッシュすることでオフライン機能を提供する さまざまなデバイスで動作するように設計されている Next.js の新しい PWA ネイティブ サポートの概要 最近、NextJs アプリを Progressive Web App にするための最善の方法を調査していたところ、PWA のネイティブ サポートを含む最近の Next.js アップデートに関する以下の Reddit のコメントを見つけました。 コメントをご覧ください。 こちらの アップデートを確認した後、PWA の作成がこれまでになく簡単になったと断言できます。それを証明します。 プロジェクトの設定と要件 React に関する適切な理解。 マシンに がインストールされています。 NodeJs PS: アプリを PWA として認識させるには、 と という 2 つのファイルが非常に重要です。 マニフェスト ファイル サービス ワーカー ファイル Web アプリ マニフェストは、アプリをインストール可能にするための情報を含むファイルです。この情報には、テーマの色、アイコン、開始 URL などが含まれます。 マニフェスト ファイル: サービス ワーカーは、アプリケーションのバックグラウンドで実行されるスクリプトを含むファイルです。プッシュ通知、キャッシュ、オフライン サポートなどの機能を可能にします。 サービス ワーカー: 1.) アプリの設定 npx create-next-app@latest my-pwa-app または yarn create next-app my-pwa-app コマンドを実行した後、インストールの詳細に関するプロンプトに従ってプロジェクトディレクトリに移動します。 cd my-pwa-app 開発サーバーを起動する npm run dev 2.) マニフェストファイルを作成する ディレクトリに または ファイルを作成します。 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', }, ], } } アプリの正式名称。この名前はホーム画面に表示され、ユーザーがアプリを識別できるようにします。 name: : 名前が長くて表示するスペースがあまりない場合に短縮名が表示されます short_name : アプリケーションとその機能について説明します。 説明 : ユーザーがアプリを起動すると、ここで指定されたルートから起動します。 start_url : displayプロパティは起動時の外観を設定し、スタンドアロン、最小限 、 のいずれかになります。 display standalone minimal-ui fullscreen browser : スムーズな遷移とユーザーエクスペリエンスのために、アプリのテーマに合った背景色を使用することが重要です。 background_color : ブラウザのツールバーやステータスバーなどの UI 要素の色を指定します。 theme_color : icons 配列には、さまざまなプラットフォームで使用されるアイコンのプロパティが含まれており、 、 、 を指定します。PWA では、少なくとも と のサイズのアイコンを用意することが重要です。 icons 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", }); 通知とサブスクリプションを処理するために をインストールする Webプッシュ 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); } } VAPID キーを生成するには、次のコマンドを実行します。 npx web-push generate-vapid-keys プッシュ通知をテストする機能を備えたUIをまとめる "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 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 } ); } } アプリが PWA になったことを確認するには、ダウンロード アイコンが URL バーの右端に表示されます。また、アプリケーション タブで Web マニフェストに関する情報を確認することもできます。 結論 Next.js の最近のアップデートではネイティブ PWA がサポートされ、プログレッシブ ウェブ アプリの作成プロセスが非常にシームレスになりました。Next.js を使用すると、開発者はユーザーが期待するネイティブのような機能を備えたアプリケーションをすべてウェブ ブラウザー内からすばやく作成できるため、PWA の開発と展開は現代のウェブ開発の一部として簡単なプロセスになりました。
