tfoman/OfflineDemoAppStart
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add project files.

Browse Source
This commit is contained in:
Tommy Öman
2025-06-29 08:47:52 +02:00
commit 88161dc2ab
46 changed files with 1894 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
OfflineDemo/App.razor Normal file
View File

@ -0,0 +1,12 @@
<Router AppAssembly="@typeof(App).Assembly">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
</Found>
<NotFound>
<PageTitle>Not found</PageTitle>
<LayoutView Layout="@typeof(MainLayout)">
<p role="alert">Sorry, there's nothing at this address.</p>
</LayoutView>
</NotFound>
</Router>

12
OfflineDemo/Layout/MainLayout.razor Normal file
View File

@ -0,0 +1,12 @@
@inherits LayoutComponentBase
<div class="page">
<div class="sidebar">
<NavMenu />
</div>
<main>
<article class="content px-4">
@Body
</article>
</main>
</div>

78
OfflineDemo/Layout/MainLayout.razor.css Normal file
View File

@ -0,0 +1,78 @@
.page {
position: relative;
display: flex;
flex-direction: column;
}
main {
flex: 1;
}
.sidebar {
background: rgb(1,26,113);
background: linear-gradient(180deg, rgba(1,26,113,1) 0%, rgba(17,48,157,1) 100%);
}
.top-row {
background-color: #f7f7f7;
border-bottom: 1px solid #d6d5d5;
justify-content: flex-end;
height: 3.5rem;
display: flex;
align-items: center;
}
.top-row ::deep a, .top-row ::deep .btn-link {
white-space: nowrap;
margin-left: 1.5rem;
text-decoration: none;
}
.top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
text-decoration: underline;
}
.top-row ::deep a:first-child {
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 640.98px) {
.top-row {
justify-content: space-between;
}
.top-row ::deep a, .top-row ::deep .btn-link {
margin-left: 0;
}
}
@media (min-width: 641px) {
.page {
flex-direction: row;
}
.sidebar {
width: 250px;
height: 100vh;
position: sticky;
top: 0;
}
.top-row {
position: sticky;
top: 0;
z-index: 1;
}
.top-row.auth ::deep a:first-child {
flex: 1;
text-align: right;
width: 0;
}
.top-row, article {
padding-left: 2rem !important;
padding-right: 1.5rem !important;
}
}

44
OfflineDemo/Layout/NavMenu.razor Normal file
View File

@ -0,0 +1,44 @@
<div class="top-row ps-3 navbar navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="">OfflineDemo</a>
<button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
<div class="@NavMenuCssClass nav-scrollable" @onclick="ToggleNavMenu">
<nav class="flex-column">
<div class="nav-item px-3">
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
<span class="bi bi-house-door mx-2" aria-hidden="true"></span> Home
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="todo">
<span class="bi bi-list-task mx-2" aria-hidden="true"></span> ToDo List
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="shorts">
<i class="bi bi-card-checklist mx-2" aria-hidden="true"></i> Shorts
</NavLink>
</div>
<div class="nav-item px-3">
<NavLink class="nav-link" href="upload">
<span class="bi bi-cloud-arrow-up mx-2" aria-hidden="true"></span> Upload
</NavLink>
</div>
</nav>
</div>
@code {
private bool collapseNavMenu = true;
private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;
private void ToggleNavMenu()
{
collapseNavMenu = !collapseNavMenu;
}
}

56
OfflineDemo/Layout/NavMenu.razor.css Normal file
View File

@ -0,0 +1,56 @@
.navbar-toggler {
background-color: rgba(255, 255, 255, 0.1);
}
.navbar-brand {
font-size: 1.1rem;
}
.nav-item {
font-size: 0.9rem;
padding-bottom: 0.5rem;
}
.nav-item:first-of-type {
padding-top: 1rem;
}
.nav-item:last-of-type {
padding-bottom: 1rem;
}
.nav-item ::deep a {
color: #d7d7d7;
border-radius: 4px;
height: 3rem;
display: flex;
align-items: center;
line-height: 3rem;
}
.nav-item ::deep a.active {
background-color: rgba(255,255,255,0.37);
color: white;
}
.nav-item ::deep a:hover {
background-color: rgba(255,255,255,0.1);
color: white;
}
@media (min-width: 641px) {
.navbar-toggler {
display: none;
}
.collapse {
/* Never collapse the sidebar for wide screens */
display: block;
}
.nav-scrollable {
/* Allow sidebar to scroll for tall menus */
height: calc(100vh - 3.5rem);
overflow-y: auto;
}
}

12
OfflineDemo/Models/ShortsModel.cs Normal file
View File

@ -0,0 +1,12 @@
namespace OfflineDemo.Models;
public class ShortsModel
{
public int Id { get; set; }
public string Title { get; set; }
public string Description { get; set; }
public string Hashtags { get; set; }
public string Mp4FileUrl { get; set; }
public string ImageFileUrl { get; set; }
public bool IsUploaded { get; set; } = false;
}

8
OfflineDemo/Models/TodoModel.cs Normal file
View File

@ -0,0 +1,8 @@
namespace OfflineDemo.Models;
public class TodoModel
{
public DateTime CreationDate { get; set; } = DateTime.Now;
public string ToDoItem { get; set; }
public bool IsComplete { get; set; }
}

17
OfflineDemo/Models/UploadModel.cs Normal file
View File

@ -0,0 +1,17 @@
using System.ComponentModel.DataAnnotations;
namespace OfflineDemo.Models;
public class UploadModel
{
[Required]
[StringLength(100, ErrorMessage = "Title must be less than 100 characters.")]
public string Title { get; set; } = "";
[Required]
[StringLength(500, ErrorMessage = "Description must be less than 500 characters.")]
public string Description { get; set; } = "";
[StringLength(200, ErrorMessage = "Hashtags must be less than 200 characters.")]
public string Hashtags { get; set; } = "#";
}

21
OfflineDemo/OfflineDemo.csproj Normal file
View File

@ -0,0 +1,21 @@
<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
<PropertyGroup>
<TargetFramework>net8.0</TargetFramework>
<Nullable>enable</Nullable>
<ImplicitUsings>enable</ImplicitUsings>
<ServiceWorkerAssetsManifest>service-worker-assets.js</ServiceWorkerAssetsManifest>
</PropertyGroup>
<ItemGroup>
<PackageReference Include="Blazored.LocalStorage" Version="4.4.0" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.0" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.0" PrivateAssets="all" />
<PackageReference Include="Microsoft.AspNetCore.Server.Kestrel.Core" Version="2.2.0" />
</ItemGroup>
<ItemGroup>
<ServiceWorker Include="wwwroot\service-worker.js" PublishedContent="wwwroot\service-worker.published.js" />
</ItemGroup>
</Project>

7
OfflineDemo/Pages/Home.razor Normal file
View File

@ -0,0 +1,7 @@
@page "/"
<PageTitle>Home</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.

62
OfflineDemo/Pages/TikTokList.razor Normal file
View File

@ -0,0 +1,62 @@
@page "/shorts"
@inject HttpClient httpClient
@inject IConfiguration config
<h3>Shorts List</h3>
@if (shorts == null)
{
<p>Loading...</p>
}
else if (!shorts.Any())
{
<p>No shorts available.</p>
}
else
{
<table class="table table-striped">
<thead>
<tr>
<th>Id</th>
<th>Title</th>
<th>Description</th>
<th>Hashtags</th>
<th>Mp4 URL</th>
<th>Image URL</th>
<th>Uploaded</th>
</tr>
</thead>
<tbody>
@foreach (var shortItem in shorts)
{
<tr>
<td>@shortItem.Id</td>
<td>@shortItem.Title</td>
<td>@shortItem.Description</td>
<td>@shortItem.Hashtags</td>
<td><a href="@shortItem.Mp4FileUrl" target="_blank">View Video</a></td>
<td><a href="@shortItem.ImageFileUrl" target="_blank">View Image</a></td>
<td>@(shortItem.IsUploaded ? "Yes" : "No")</td>
</tr>
}
</tbody>
</table>
}
@code {
private List<ShortsModel>? shorts;
protected override async Task OnInitializedAsync()
{
try
{
string url = $"{config["ApiUrl"]}/shorts";
shorts = await httpClient.GetFromJsonAsync<List<ShortsModel>>(url);
}
catch (Exception ex)
{
Console.Error.WriteLine($"Error fetching shorts: {ex.Message}");
}
}
}

138
OfflineDemo/Pages/TikTokUpload.razor Normal file
View File

@ -0,0 +1,138 @@
@page "/upload"
@using Microsoft.AspNetCore.Components.Forms
@using System.ComponentModel.DataAnnotations
@inject HttpClient http
@inject IConfiguration config
@inject NavigationManager nav
<h3>Upload TikTok Video</h3>
@if (isSubmitting)
{
<p>Uploading...</p>
}
@if (!string.IsNullOrEmpty(resultMessage))
{
<p>@resultMessage</p>
}
<EditForm Model="@uploadModel" OnValidSubmit="@HandleValidSubmit">
<DataAnnotationsValidator />
<ValidationSummary />
<div class="form-group mb-3">
<label class="form-label" for="title">Title</label>
<InputText id="title" class="form-control" @bind-Value="uploadModel.Title" />
<ValidationMessage For="@(() => uploadModel.Title)" />
</div>
<div class="form-group mb-3">
<label class="form-label" for="description">Description</label>
<InputTextArea id="description" class="form-control" @bind-Value="uploadModel.Description" />
<ValidationMessage For="@(() => uploadModel.Description)" />
</div>
<div class="form-group mb-3">
<label class="form-label" for="hashtags">Hashtags</label>
<InputText id="hashtags" @oninput="HandleHashtagInput" class="form-control" @bind-Value="uploadModel.Hashtags" />
<ValidationMessage For="@(() => uploadModel.Hashtags)" />
</div>
<div class="form-group mb-3">
<label class="form-label" for="mp4Upload">MP4 File</label>
<InputFile id="mp4Upload" class="form-control" OnChange="@HandleMp4FileChange" accept=".mp4,.mov" />
</div>
<div class="form-group mb-3">
<label class="form-label" for="imageUpload">Image File (optional)</label>
<InputFile id="imageUpload" class="form-control" OnChange="@HandleImageFileChange" accept=".jpg,.jpeg,.png" />
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</EditForm>
@code {
private UploadModel uploadModel = new();
private IBrowserFile? mp4File;
private IBrowserFile? imageFile;
private bool isSubmitting = false;
private string? resultMessage;
private void HandleMp4FileChange(InputFileChangeEventArgs e)
{
mp4File = e.File;
}
private void HandleImageFileChange(InputFileChangeEventArgs e)
{
imageFile = e.File;
}
private async Task HandleHashtagInput(ChangeEventArgs e)
{
var input = e.Value?.ToString() ?? "";
if (input.EndsWith(" "))
{
// Add a hashtag before the space
uploadModel.Hashtags = input.TrimEnd() + " #";
// Optionally, reset cursor position
await InvokeAsync(StateHasChanged);
}
}
private async Task HandleValidSubmit()
{
resultMessage = "";
if (mp4File == null || imageFile == null)
{
resultMessage = "Both MP4 and Image files are required.";
return;
}
isSubmitting = true;
try
{
using var content = new MultipartFormDataContent();
content.Add(new StringContent(uploadModel.Title ?? string.Empty), "Title");
content.Add(new StringContent(uploadModel.Description ?? string.Empty), "Description");
content.Add(new StringContent(uploadModel.Hashtags ?? string.Empty), "Hashtags");
// Add files
var mp4Stream = mp4File.OpenReadStream(800 * 1024 * 1024); // 800 MB limit
var mp4Content = new StreamContent(mp4Stream);
mp4Content.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue(mp4File.ContentType);
content.Add(mp4Content, "Mp4File", mp4File.Name);
var imageStream = imageFile.OpenReadStream(10 * 1024 * 1024); // 10 MB limit for images
var imageContent = new StreamContent(imageStream);
imageContent.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue(imageFile.ContentType);
content.Add(imageContent, "ImageFile", imageFile.Name);
// Call the API
string url = $"{config["ApiUrl"]}/upload";
var response = await http.PostAsync(url, content);
if (response.IsSuccessStatusCode)
{
resultMessage = "Files uploaded successfully!";
nav.NavigateTo("/shorts");
}
else
{
var error = await response.Content.ReadAsStringAsync();
resultMessage = $"Error: {response.StatusCode} - {error}";
}
}
catch (Exception ex)
{
resultMessage = $"An error occurred: {ex.Message}";
}
finally
{
isSubmitting = false;
}
}
}

49
OfflineDemo/Pages/ToDo.razor Normal file
View File

@ -0,0 +1,49 @@
@page "/todo"
@inject ILocalStorageService localStorage
<h3>ToDo</h3>
@if (todos is not null)
{
<ol>
@foreach (var todo in todos)
{
<li>@todo.ToDoItem (@todo.CreationDate.ToString("MMMM dd, yyyy hh:mm tt"))</li>
}
</ol>
}
<h4>Add ToDo Item</h4>
<EditForm Model="newTodo" OnValidSubmit="AddTodo">
<DataAnnotationsValidator />
<ValidationSummary />
<div class="form-group">
<label for="newTodo.ToDoItem">ToDo Item</label>
<InputText id="newTodo.ToDoItem" class="form-control" @bind-Value="newTodo.ToDoItem" />
<ValidationMessage For="@(() => newTodo.ToDoItem)" />
</div>
<button type="submit" class="btn btn-primary">Add</button>
</EditForm>
@code {
private List<TodoModel> todos;
private TodoModel newTodo = new();
protected override async Task OnInitializedAsync()
{
todos = await localStorage.GetItemAsync<List<TodoModel>>("todos");
if (todos is null || todos.Count == 0)
{
todos = new();
await localStorage.SetItemAsync("todos", todos);
}
}
private async Task AddTodo()
{
todos.Add(newTodo);
newTodo = new();
await localStorage.SetItemAsync("todos", todos);
}
}

19
OfflineDemo/Program.cs Normal file
View File

@ -0,0 +1,19 @@
using Blazored.LocalStorage;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.AspNetCore.Server.Kestrel.Core;
using OfflineDemo;
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");
builder.Services.AddScoped(sp => new HttpClient());
builder.Services.AddBlazoredLocalStorage();
builder.Services.Configure<KestrelServerOptions>(options =>
{
options.Limits.MaxRequestBodySize = 800L * 1024 * 1024; // 800 MB
});
await builder.Build().RunAsync();

41
OfflineDemo/Properties/launchSettings.json Normal file
View File

@ -0,0 +1,41 @@
{
"$schema": "http://json.schemastore.org/launchsettings.json",
"iisSettings": {
"windowsAuthentication": false,
"anonymousAuthentication": true,
"iisExpress": {
"applicationUrl": "http://localhost:28724",
"sslPort": 44360
}
},
"profiles": {
"http": {
"commandName": "Project",
"dotnetRunMessages": true,
"launchBrowser": true,
"inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
"applicationUrl": "http://localhost:5137",
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
}
},
"https": {
"commandName": "Project",
"dotnetRunMessages": true,
"launchBrowser": true,
"inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
"applicationUrl": "https://localhost:7119;http://localhost:5137",
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
}
},
"IIS Express": {
"commandName": "IISExpress",
"launchBrowser": true,
"inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
}
}
}
}

12
OfflineDemo/_Imports.razor Normal file
View File

@ -0,0 +1,12 @@
@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.AspNetCore.Components.WebAssembly.Http
@using Microsoft.JSInterop
@using OfflineDemo
@using OfflineDemo.Layout
@using Blazored.LocalStorage
@using OfflineDemo.Models

8
OfflineDemo/wwwroot/appsettings.json Normal file
View File

@ -0,0 +1,8 @@
{
"Kestrel": {
"Limits": {
"MaxRequestBodySize": 838860800 // 800 MB in bytes
}
},
"ApiUrl": "https://localhost:7099/api"
}

103
OfflineDemo/wwwroot/css/app.css Normal file
View File

@ -0,0 +1,103 @@
html, body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
h1:focus {
outline: none;
}
a, .btn-link {
color: #0071c1;
}
.btn-primary {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}
.content {
padding-top: 1.1rem;
}
.valid.modified:not([type=checkbox]) {
outline: 1px solid #26b050;
}
.invalid {
outline: 1px solid red;
}
.validation-message {
color: red;
}
#blazor-error-ui {
background: lightyellow;
bottom: 0;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
display: none;
left: 0;
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
position: fixed;
width: 100%;
z-index: 1000;
}
#blazor-error-ui .dismiss {
cursor: pointer;
position: absolute;
right: 0.75rem;
top: 0.5rem;
}
.blazor-error-boundary {
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
padding: 1rem 1rem 1rem 3.7rem;
color: white;
}
.blazor-error-boundary::after {
content: "An error has occurred."
}
.loading-progress {
position: relative;
display: block;
width: 8rem;
height: 8rem;
margin: 20vh auto 1rem auto;
}
.loading-progress circle {
fill: none;
stroke: #e0e0e0;
stroke-width: 0.6rem;
transform-origin: 50% 50%;
transform: rotate(-90deg);
}
.loading-progress circle:last-child {
stroke: #1b6ec2;
stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
transition: stroke-dasharray 0.05s ease-in-out;
}
.loading-progress-text {
position: absolute;
text-align: center;
font-weight: bold;
inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}
.loading-progress-text:after {
content: var(--blazor-load-percentage-text, "Loading");
}
code {
color: #c02d76;
}

7
OfflineDemo/wwwroot/css/bootstrap/bootstrap.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
OfflineDemo/wwwroot/css/bootstrap/bootstrap.min.css.map Normal file
View File

File diff suppressed because one or more lines are too long

BIN
OfflineDemo/wwwroot/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
OfflineDemo/wwwroot/icon-192.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
OfflineDemo/wwwroot/icon-512.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

37
OfflineDemo/wwwroot/index.html Normal file
View File

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>OfflineDemo</title>
<base href="/" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="css/app.css" />
<link rel="icon" type="image/png" href="favicon.png" />
<link href="OfflineDemo.styles.css" rel="stylesheet" />
<link href="manifest.webmanifest" rel="manifest" />
<link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
<link rel="apple-touch-icon" sizes="192x192" href="icon-192.png" />
</head>
<body>
<div id="app">
<svg class="loading-progress">
<circle r="40%" cx="50%" cy="50%" />
<circle r="40%" cx="50%" cy="50%" />
</svg>
<div class="loading-progress-text"></div>
</div>
<div id="blazor-error-ui">
An unhandled error has occurred.
<a href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.webassembly.js"></script>
<script>navigator.serviceWorker.register('service-worker.js');</script>
</body>
</html>

22
OfflineDemo/wwwroot/manifest.webmanifest Normal file
View File

@ -0,0 +1,22 @@
{
"name": "OfflineDemo",
"short_name": "OfflineDemo",
"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"
}
]
}

27
OfflineDemo/wwwroot/sample-data/weather.json Normal file
View File

@ -0,0 +1,27 @@
[
{
"date": "2022-01-06",
"temperatureC": 1,
"summary": "Freezing"
},
{
"date": "2022-01-07",
"temperatureC": 14,
"summary": "Bracing"
},
{
"date": "2022-01-08",
"temperatureC": -13,
"summary": "Freezing"
},
{
"date": "2022-01-09",
"temperatureC": -16,
"summary": "Balmy"
},
{
"date": "2022-01-10",
"temperatureC": -2,
"summary": "Chilly"
}
]

4
OfflineDemo/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
OfflineDemo/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);
}