notfire/Iceshrimp.NET
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[frontend] Initial PWA enablement

Browse source
This commit is contained in:
Lilian 2024-11-04 21:08:26 +01:00 • committed by Laura Hausmann
parent 55f7b48d80
commit 8b9019b76e
No known key found for this signature in database
GPG key ID: D044E84C5BE01605
7 changed files with 100 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
Iceshrimp.Backend/Pages/Shared/FrontendSPA.cshtml
View file

@ -14,8 +14,11 @@
<link rel="stylesheet" href="~/css/app.css"/>
<link rel="stylesheet" href="~/_content/Iceshrimp.Assets.PhosphorIcons/css/ph-regular.css"/>
<link rel="stylesheet" href="~/_content/Iceshrimp.Assets.PhosphorIcons/css/ph-fill.css"/>
<link rel="icon" type="image/png" href="~/favicon.png"/>
<link rel="icon" type="image/png" href="~/_content/Iceshrimp.Assets.Branding/favicon.png"/>
<link rel="stylesheet" href="~/Iceshrimp.Frontend.styles.css"/>
<link href="manifest.webmanifest" rel="manifest"/>
<link rel="apple-touch-icon" sizes="512x512" href="~/_content/Iceshrimp.Assets.Branding/512.png"/>
<link rel="apple-touch-icon" sizes="192x192" href="~/_content/Iceshrimp.Assets.Branding/192.png"/>
</head>
<body>
@ -38,6 +41,7 @@
</div>
<script src="~/_framework/blazor.webassembly.js"></script>
<script>navigator.serviceWorker.register('service-worker.js');</script>
</body>
</html>

11
Iceshrimp.Frontend/Iceshrimp.Frontend.csproj
View file

@ -16,6 +16,7 @@
<ItemGroup>
<None Update="Components/MfmText.razor.css" CssScope="mfm" />
<None Include="wwwroot\icon-512.png" />
</ItemGroup>
<ItemGroup>
@ -27,6 +28,7 @@
<PackageReference Include="AngleSharp" Version="1.1.2" />
<PackageReference Include="Blazored.LocalStorage" Version="4.5.0" />
<PackageReference Include="BlazorIntersectionObserver" Version="3.1.0" />
<PackageReference Include="Iceshrimp.Assets.Branding" Version="1.0.1" />
<PackageReference Include="Microsoft.AspNetCore.Components.Authorization" Version="9.0.0" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="9.0.0" />
<PackageReference Include="Microsoft.AspNetCore.SignalR.Client" Version="9.0.0" />
@ -45,6 +47,15 @@
<PackageReference Include="MessagePack" Version="2.5.192" />
</ItemGroup>
<!-- Required for PWA Features -->
<PropertyGroup>
<ServiceWorkerAssetsManifest>service-worker-assets.js</ServiceWorkerAssetsManifest>
</PropertyGroup>
<ItemGroup>
<ServiceWorker Include="wwwroot\service-worker.js" PublishedContent="wwwroot\service-worker.published.js" />
</ItemGroup>
<ItemGroup>
<EmbeddedResource Update="Localization\Localization.resx">
<Generator>ResXFileCodeGenerator</Generator>

BIN
Iceshrimp.Frontend/wwwroot/favicon.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.1 KiB

BIN
Iceshrimp.Frontend/wwwroot/icon-192.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 2.6 KiB

22
Iceshrimp.Frontend/wwwroot/manifest.webmanifest Normal file
View file

@ -0,0 +1,22 @@
{
"name": "Iceshrimp.Frontend",
"short_name": "Iceshrimp.Frontend",
"id": "./",
"start_url": "./",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#03173d",
"prefer_related_applications": false,
"icons": [
{
"src": "icon-512.png",
"type": "image/png",
"sizes": "512x512"
},
{
"src": "icon-192.png",
"type": "image/png",
"sizes": "192x192"
}
]
}

4
Iceshrimp.Frontend/wwwroot/service-worker.js Normal file
View file

@ -0,0 +1,4 @@
// In development, always fetch from the network and do not enable offline support.
// This is because caching would make development more difficult (changes would not
// be reflected on the first load after each change).
self.addEventListener('fetch', () => { });

55
Iceshrimp.Frontend/wwwroot/service-worker.published.js Normal file
View file

@ -0,0 +1,55 @@
// Caution! Be sure you understand the caveats before publishing an application with
// offline support. See https://aka.ms/blazor-offline-considerations
self.importScripts('./service-worker-assets.js');
self.addEventListener('install', event => event.waitUntil(onInstall(event)));
self.addEventListener('activate', event => event.waitUntil(onActivate(event)));
self.addEventListener('fetch', event => event.respondWith(onFetch(event)));
const cacheNamePrefix = 'offline-cache-';
const cacheName = `${cacheNamePrefix}${self.assetsManifest.version}`;
const offlineAssetsInclude = [ /\.dll$/, /\.pdb$/, /\.wasm/, /\.html/, /\.js$/, /\.json$/, /\.css$/, /\.woff$/, /\.png$/, /\.jpe?g$/, /\.gif$/, /\.ico$/, /\.blat$/, /\.dat$/ ];
const offlineAssetsExclude = [ /^service-worker\.js$/ ];
// Replace with your base path if you are hosting on a subfolder. Ensure there is a trailing '/'.
const base = "/";
const baseUrl = new URL(base, self.origin);
const manifestUrlList = self.assetsManifest.assets.map(asset => new URL(asset.url, baseUrl).href);
async function onInstall(event) {
console.info('Service worker: Install');
// Fetch and cache all matching items from the assets manifest
const assetsRequests = self.assetsManifest.assets
.filter(asset => offlineAssetsInclude.some(pattern => pattern.test(asset.url)))
.filter(asset => !offlineAssetsExclude.some(pattern => pattern.test(asset.url)))
.map(asset => new Request(asset.url, { integrity: asset.hash, cache: 'no-cache' }));
await caches.open(cacheName).then(cache => cache.addAll(assetsRequests));
}
async function onActivate(event) {
console.info('Service worker: Activate');
// Delete unused caches
const cacheKeys = await caches.keys();
await Promise.all(cacheKeys
.filter(key => key.startsWith(cacheNamePrefix) && key !== cacheName)
.map(key => caches.delete(key)));
}
async function onFetch(event) {
let cachedResponse = null;
if (event.request.method === 'GET') {
// For all navigation requests, try to serve index.html from cache,
// unless that request is for an offline resource.
// If you need some URLs to be server-rendered, edit the following check to exclude those URLs
const shouldServeIndexHtml = event.request.mode === 'navigate'
&& !manifestUrlList.some(url => url === event.request.url);
const request = shouldServeIndexHtml ? 'index.html' : event.request;
const cache = await caches.open(cacheName);
cachedResponse = await cache.match(request);
}
return cachedResponse || fetch(event.request);
}