SilverLABS/littleshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

PWA-implementation

Browse Source
This commit is contained in:
sysadmin
2025-09-01 04:49:05 +01:00
parent cccb4e4d03
commit 5eb7647faf
34 changed files with 56372 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
LittleShop/Areas/Admin/Views/Dashboard/Index.cshtml
View File

@@ -59,6 +59,9 @@
<div class="card">
<div class="card-header">
<h5><i class="fas fa-chart-line"></i> Quick Actions</h5>
<button id="pwa-install-dashboard" class="btn btn-sm btn-outline-primary" style="float: right;">
<i class="fas fa-mobile-alt"></i> Install App
</button>
</div>
<div class="card-body">
<div class="list-group list-group-flush">
@@ -95,4 +98,34 @@
</div>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const installBtn = document.getElementById('pwa-install-dashboard');
if (installBtn) {
installBtn.addEventListener('click', function() {
// Check if app is in standalone mode
if (window.matchMedia('(display-mode: standalone)').matches) {
alert('App is already installed!');
return;
}
// Show manual install instructions
alert(`To install LittleShop Admin as an app:
🌐 Chrome/Edge:
1. Click the install icon (⊞) in the address bar, OR
2. Menu (⋮) → "Install LittleShop Admin"
🍎 Safari (iOS):
1. Share button → "Add to Home Screen"
📱 Mobile browsers:
1. Browser menu → "Add to Home Screen"
The app will then work offline and appear in your apps list!`);
});
}
});
</script>

43
LittleShop/Areas/Admin/Views/Shared/_Layout.cshtml
View File

@@ -2,15 +2,42 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover" />
<title>@ViewData["Title"] - LittleShop Admin</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
<!-- PWA Meta Tags -->
<meta name="application-name" content="LittleShop Admin" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="apple-mobile-web-app-title" content="LittleShop" />
<meta name="description" content="Modern e-commerce admin panel" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="theme-color" content="#2563eb" />
<meta name="msapplication-TileColor" content="#2563eb" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- PWA Manifest -->
<link rel="manifest" href="/manifest.json" />
<!-- Icons -->
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/icons/icon-152x152.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/icons/icon-72x72.png" />
<link rel="apple-touch-icon" sizes="96x96" href="/icons/icon-96x96.png" />
<link rel="apple-touch-icon" sizes="128x128" href="/icons/icon-128x128.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/icons/icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/icons/icon-152x152.png" />
<link rel="apple-touch-icon" sizes="192x192" href="/icons/icon-192x192.png" />
<link rel="apple-touch-icon" sizes="384x384" href="/icons/icon-384x384.png" />
<link rel="apple-touch-icon" sizes="512x512" href="/icons/icon-512x512.png" />
<link href="/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="/lib/fontawesome/css/all.min.css" rel="stylesheet">
<link href="/lib/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
<link href="/css/modern-admin.css" rel="stylesheet">
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<nav class="navbar navbar-expand-sm navbar-light bg-white">
<div class="container-fluid">
<a class="navbar-brand" href="@Url.Action("Index", "Dashboard", new { area = "Admin" })">
<i class="fas fa-store"></i> LittleShop Admin
@@ -87,8 +114,10 @@
</main>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="/lib/jquery/jquery.min.js"></script>
<script src="/lib/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="/js/pwa.js"></script>
<script src="/js/modern-mobile.js"></script>
@await RenderSectionAsync("Scripts", required: false)
</body>
</html>