Hey, everybody!
The project is https://www.pwabuilder.com/, helping to build a progressive app. You can also test any site https://www.pwabuilder.com/reportcard?site=https://griarsvah.github.io/PWABuilder, but I want to make a project that will give the best results for all tests. pwabuilder 100%
"icons": [
{
"src": "images/favicons/favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "images/vector.svg",
"type": "image/svg+xml",
"sizes": "667x667"
},
{
"src": "images/android/launchericon-512.png",
"type": "image/png",
"sizes": "512x512"
},
{
"src": "images/android/launchericon-192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "images/maskable/icon_x48.png",
"type": "image/png",
"sizes": "48x48"
},
{
"src": "images/maskable/icon_x72.png",
"type": "image/png",
"sizes": "72x72"
},
{
"src": "images/maskable/icon_x96.png",
"type": "image/png",
"sizes": "96x96"
},
{
"src": "images/maskable/icon_x128.png",
"type": "image/png",
"sizes": "128x128"
},
{
"src": "images/maskable/icon_x192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "images/maskable/icon_x384.png",
"type": "image/png",
"sizes": "384x384",
"purpose": "maskable"
},
{
"src": "images/maskable/icon_x512.png",
"type": "image/png",
"sizes": "512x512",
"purpose": "any"
}
],
"name": "Vahe PWA",
"short_name": "Vahe",
"start_url": "https://griarsvah.github.io/PWABuilder/index.html",
"background_color": "#ffffff",
"description": "My portfolio, my page, portfolio about me, my works, my skills",
"display": "fullscreen" ,
{
"src": "images/maskable/icon_x384.png",
"type": "image/png",
"sizes": "384x384",
"purpose": "maskable"
},
{
"src": "images/maskable/icon_x512.png",
"type": "image/png",
"sizes": "512x512",
"purpose": "any"
}
"id": "index.html",
"launch_handler": {
"client_mode": ["focus-existing", "auto"]
},
"orientation": "any",
"screenshots" : [
{
"src": "screenshot1.webp",
"sizes": "1280x720",
"type": "image/webp",
"form_factor": "wide",
"label": "Homescreen of Awesome App"
},
{
"src": "screenshot2.webp",
"sizes": "1280x720",
"type": "image/webp",
"form_factor": "wide",
"label": "List of Awesome Resources available in Awesome App"
}
]
"theme_color": "#ffffff",
"categories": [
"education",
"personalization",
"productivity"
],
"dir": "ltr",
"iarc_rating_id": "e84b072d-71b3-4d3e-86ae-31a8ce4e53b7",
"share_target": {
"action": "handle-shared-song",
"method": "POST",
"enctype": "multipart/form-data",
"params": {
"title": "title",
"files": [
{
"name": "audioFiles",
"accept": [
"audio/wav",
"audio/x-wav",
"audio/mpeg",
"audio/mp4",
"audio/aac",
"audio/ogg",
"application/ogg",
"audio/webm",
"audio/flac"
]
}
]
}
},
"lang": "en",
"prefer_related_applications": false,
"related_applications": [
{
"platform": "webapp",
"url": "https://griarsvah.github.io/PWABuilder/manifest.webmanifest"
},
{
"platform": "itunes",
"url": "index.html"
},
{
"platform": "play",
"url": "index.html"
},
{
"platform": "windows",
"url": "index.html"
}
],
"scope": "/",
"scope_extensions": [
{"origin": "index.html"}
],
"display_override": ["fullscreen", "standalone", "minimal-ui", "standalone", "window-controls-overlay"],
"edge_side_panel": {
"preferred_width": 480
},
"file_handlers": [
{
"action": "index.html",
"accept": {
"text/html": [".htm", ".html"]
}
}
],
"handle_links": "auto",
"protocol_handlers": [
{
"protocol": "web+jngl",
"url": "/lookup?type=%s"
},
{
"protocol": "web+jnglstore",
"url": "/shop?for=%s"
}
],
"share_target": {
"action": "handle-shared-song",
"method": "POST",
"enctype": "multipart/form-data",
"params": {
"title": "title",
"files": [
{
"name": "audioFiles",
"accept": [
"audio/wav",
"audio/x-wav",
"audio/mpeg",
"audio/mp4",
"audio/aac",
"audio/ogg",
"application/ogg",
"audio/webm",
"audio/flac"
]
}
]
}
},
"shortcuts": [
{
"name": "Open Play Later",
"short_name": "Play Later",
"description": "View the list of podcasts you saved for later",
"url": "index.html",
"icons": [{ "src": "images/vector.svg", "sizes": "667x667" }]
},
{
"name": "View Subscriptions",
"short_name": "Subscriptions",
"description": "View the list of podcasts you listen to",
"url": "index.html",
"icons": [{ "src": "images/vector.svg", "sizes": "667x667" }]
}
],
"widgets": [
{
"name": "PWAmp mini player",
"short_name": "PWAmp",
"description": "Widget to control the PWAmp player",
"tag": "pwamp",
"ms_ac_template": "widgets/mini-player.json",
"data": "widgets/mini-player-data.json",
"screenshots": [
{
"src": "screenshot-widget.png",
"sizes": "600x400",
"label": "The PWAmp mini-player widget"
}
],
"icons": [
{
"src": "favicon-48.png",
"sizes": "48x48"
},
{
"src": "favicon-96.png",
"sizes": "96x96"
},
{
"src": "favicon-128.png",
"sizes": "128x128"
},
{
"src": "favicon-256.png",
"sizes": "256x256"
},
{
"src": "favicon-512.png",
"sizes": "512x512"
}
],
"backgrounds": [
{
"src": "widgets/background.png",
"sizes": "600x400"
}
]
}
]
Tip
Для выполнения этого условия нужно иметь в корне сайта файла index.html
<script>if (typeof navigator.serviceWorker !== 'undefined') {
navigator.serviceWorker.register('sw.js')
}</script>```
-
background sync
-
periodic sync
Tip
Для выполнения этого условия нужно в файле sw.js
// Respond to a server push with a user notification.
self.addEventListener('push', function (event) {
if (Notification.permission === "granted") {
let notification_data = JSON.parse(event.data.text());
const notificationText = notification_data["description"];
const notification_title = notification_data["notifier_DisplayName"];
let notificaiotn_timestampt = notification_data["CreatedAt"];
// Convert the string date to a date object. And unix timestamp to milliseconds
let notification_timestamp = new Date(notificaiotn_timestampt * 1000);
// Convert the date object to a string, using the locale language
let notification_timestamp_string = notification_timestamp.toLocaleString();
let notificaiton_sid = notification_data["sid"];
const showNotification = self.registration.showNotification(notification_title, {
// title: notification_title,
body: notificationText,
icon: '/images/vector.svg',
tag: notificaiton_sid,
data: {
url: notification_data["url"]
},
// actions: [
// { action: 'actionName', title: 'Mark as read', icon: '/static/images/Logos/logo.png' },
// { action: 'actionName', title: 'Mark as unread', icon: '/static/images/Logos/logo.png' },
// ],
timestamp: notification_timestamp_string,
});
// Make sure the toast notification is displayed.
event.waitUntil(showNotification);
}
});
// Respond to the user selecting the toast notification.
self.addEventListener('notificationclick', function (event) {
event.notification.close(); // Android needs explicit close.
event.waitUntil(
clients.openWindow(event.notification.data.url) // This line will open the URL saved in 'data' when the notification was first created.
);
});