برنامه های وب پیشرو (PWA): تغییر تجربه وب

body {
    font-family: Arial, sans-serif;
    text-align: center;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
}

h1 {
    color: #333;
}

p {
    color: #666;
}

const CACHE_NAME = 'my-pwa-cache-v1';
consturlsToCache = [
    '/',
    '/styles.css',
    '/app.js'
];

self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
            .then(cache => {
                return cache.addAll(urlsToCache);
            })
    );
});

self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
            .then(response => {
                return response || fetch(event.request);
            })
    );
});

if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js')
            .then(registration => {
console.log('ServiceWorker registration successful with scope: ', registration.scope);
            })
            .catch(error => {
console.log('ServiceWorker registration failed: ', error);
            });
    });
}

{
    "name": "My PWA",
    "short_name": "PWA",
    "start_url": "https://dev.to/",
    "display": "standalone",
    "background_color": "#ffffff",
    "theme_color": "#000000",
    "icons": [
        {
            "src": "icon.png",
            "sizes": "192x192",
: "type": "image/png"
        }
    ]
}

if ('Notification' in window &&navigator.serviceWorker) {
Notification.requestPermission(status => {
console.log('Notification permission status:', status);
    });
}

function subscribeUserToPush() {
navigator.serviceWorker.ready.then(registration => {
constsubscribeOptions = {
userVisibleOnly: true,
applicationServerKey: urlBase64ToUint8Array(
                'YOUR_PUBLIC_VAPID_KEY'
            )
        };

        return registration.pushManager.subscribe(subscribeOptions);
    }).then(pushSubscription => {
console.log('Received PushSubscription:', JSON.stringify(pushSubscription));
        // Send the subscription to your server
    }).catch(error => {
console.error('Error during getSubscription()', error);
    });
}

function urlBase64ToUint8Array(base64String) {
const padding = '='.repeat((4 - base64String.length % 4) % 4);
const base64 = (base64String + padding)
        .replace(/-/g, '+')
        .replace(/_/g, '/');

constrawData = window.atob(base64);
constoutputArray = new Uint8Array(rawData.length);

    for (let i = 0; i<rawData.length; ++i) {
outputArray[i] = rawData.charCodeAt(i);
    }
    return outputArray;
}

self.addEventListener('push', event => {
const data = event.data.json();
const options = {
        body: data.body,
        icon: 'icon.png',
        badge: 'badge.png'
    };

event.waitUntil(
self.registration.showNotification(data.title, options)
    );
});

constwebPush = require('web-push');

constvapidKeys = {
publicKey: 'YOUR_PUBLIC_VAPID_KEY',
privateKey: 'YOUR_PRIVATE_VAPID_KEY'
};

webPush.setVapidDetails(
    'mailto:your-email@example.com',
vapidKeys.publicKey,
vapidKeys.privateKey
);

constpushSubscription = {
    endpoint: 'USER_SUBSCRIPTION_ENDPOINT',
    keys: {
auth: 'USER_AUTH_KEY',
        p256dh: 'USER_P256DH_KEY'
    }
};

const payload = JSON.stringify({
    title: 'Hello!',
    body: 'This is a push notification.'
});

webPush.sendNotification(pushSubscription, payload)
    .then(response =>console.log('Push notification sent:', response))
    .catch(error =>console.error('Error sending push notification:', error));