Back to "Κάνοντας το ASP.NET Core Website σας PWA"

This is a viewer only at the moment see the article on how this works.

To update the preview hit Ctrl-Alt-R (or ⌘-Alt-R on Mac) or Enter to refresh. The Save icon lets you save the markdown file to disk

This is a preview from the server running through my markdig pipeline

ASP.NET

Κάνοντας το ASP.NET Core Website σας PWA

Thursday, 01 August 2024

Σε αυτό το άρθρο, θα σας δείξω πώς να κάνετε την ιστοσελίδα σας ASP.NET Core μια PWA (Progressive Web App).

Προαπαιτούμενα

Είναι πραγματικά πολύ απλό δείτε https://github.com/madskristensen/WebEssentials.AspNetCore.ServiceWorker/tree/master

ASP.NET Bits

Εγκατάσταση του πακέτου Nuget

dotnet add package WebEssentials.AspNetCore.PWA

Στο πρόγραμμά σας.cs προσθέστε:

builder.Services.AddProgressiveWebApp();

Στη συνέχεια, δημιουργήστε μερικά φαβιόνια που ταιριάζουν με τα παρακάτω μεγέθη Ορίστε. είναι ένα εργαλείο που μπορείτε να χρησιμοποιήσετε για να τα δημιουργήσετε. Αυτά μπορεί να είναι πραγματικά οποιοδήποτε εικονίδιο (Χρησιμοποίησα ένα emoji ~)

Save these in your wwrroot folder as android-chrome-192x192.png and android-chrome-512x512.png (in the example below)

Τότε χρειάζεσαι ένα μανιφέστο.

{
  "name": "mostlylucid",
  "short_name": "mostlylucid",
  "description": "The web site for mostlylucid limited",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512"
    }
  ],
  "display": "standalone",
  "start_url": "/"
}
logo

©2024 Scott Galloway