Opbygning af en offline-først-applikation med Node.js og SQLite

Åbn nu package.json fil og tilføj startscriptet.

"start": "node index.js"
 

På dette tidspunkt har vi konfigureret vores applikation. Men vi kan ikke køre vores applikation, når serveren ikke kører, eller når der ikke er nogen netværksforbindelse til produktion. Lad os sætte det op i næste afsnit.

Optimering af applikation

Vi skal gøre vores applikation kompatibel med alle skærmstørrelser. Vi tilføjer også en temafarve ved at tilføje markeringen nedenfor i hovedafsnittet i vores index.html fil.

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#16a0d6e7"/>
 

Opret et manifest

Vi skal beskrive vores app, og hvordan den skal opføre sig, når den er installeret på brugerens enhed. Det kan vi gøre ved at skabe et manifest.

Opret et manifest fil i projektets rodbibliotek og tilføj følgende konfigurationer:

{
    "name": "Blogger"
    "short_name": "Blogger"
    "start_url": "/",
    "display": "standalone",
    "background_color": "#0e9c95",
    "theme_color": "#16a0d6e7",
    "orientation": "portrait",
    "icons": []
}
 

I vores manifest definerede vi følgende konfigurationer:

• navn :Dette definerer appens visningsnavn.
• short_name :Dette definerer det navn, der vil blive vist under app-ikonet, når det er installeret.
• start_url :Dette fortæller browseren programmets rod-URL.
• skærm :Dette fortæller browseren, hvordan appen skal vises.
• baggrundsfarve: Dette definerer baggrundsfarven for programmet, når det er installeret.
• tema_farve: Dette definerer farven på statuslinjen.
• retning: Dette definerer den retning, der skal bruges under appvisningen.
• ikoner: Dette definerer de ikoner eller billeder i forskellige størrelser, der skal bruges som vores app-hjemmeikoner.

At oprette vores startskærmsikoner manuelt kan være en meget kompliceret opgave, men ikke at bekymre dig. Vi vil drage fordel af et tredjepartsmodul kendt som pwa-asset-generator til at generere ikoner i forskellige størrelser fra vores hovedappikon inde i den offentlige mappe med kommandoen nedenfor:

#change directory to the public folder
cd public
#generate icons
npx pwa-asset-generator logo.png icons
 

Ovenstående kommando vil skabe et ikon mappe inde i den offentlige mappe med mange ikoner til vores applikation sammen med nogle JSON på terminalen, som vi vil indsætte i vores ikon-array i manifestet.

Ikonarrayet i vores manifest skulle se sådan ud:

"icons": [
    {
      "src": "public/icons/manifest-icon-192.maskable.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "public/icons/manifest-icon-192.maskable.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "public/icons/manifest-icon-512.maskable.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "public/icons/manifest-icon-512.maskable.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
 

Kommandoen genererede også markup-links til de genererede ikoner.

Kopiér og indsæt markeringen i hovedsektionen af ​​markeringen i public/index.html fil.

Konfigurationsservicemedarbejdere

Med vores manifest oprettet, lad os konfigurere servicemedarbejderne. En service worker er et stykke JavaScript-kode, som din browser kører i baggrunden i en separat tråd for at håndtere cachen for aktiver og data, som du gemmer til fremtidige anmodninger for at aktivere offline-understøttelse af din applikation.

Så opret en blogger.serviceWorker.js fil i offentligheden folder. For servicearbejderen er der mange hændelser (push, aktiver, installer, hent, besked, synkronisering), men til demonstrationen i denne vejledning dækker vi installer, aktiver, og hent begivenheder. Før det skal vi oprette et array til at gemme alle de aktiver, vi brugte i vores applikation.

const assets = [
  "/",
  "css/style.css",
  "js/app.js",
  "/images/blog1.jpg",
  "/images/blog2.jpg",
  "/images/blog3.jpg,"
];
 

Derefter lytter vi til installationen begivenhed for at registrere og gemme vores statiske filer i browserens cache. Denne proces tager noget tid at fuldføre. For at springe ventetiden over, bruger vi skipWaiting().

const BLOGGER_ASSETS = "blogger-assets";
self.addEventListener("install", (installEvt) => {
  installEvt.waitUntil(
    caches
      .open(BLOGGER_ASSETS)
      .then((cache) => {
        cache.addAll(assets);
      })
      .then(self.skipWaiting())
      .catch((e) => {
        console.log(e);
      })
  );
});
...
 

Derefter skal vi rydde cachen for at fjerne de gamle aktiver, hver gang servicearbejderen opdateres. Til det lytter vi til aktiver kodestykke nedenfor:

...
self.addEventListener("activate", function (evt) {
  evt.waitUntil(
    caches
      .keys()
      .then((keysList) => {
        return Promise.all(
          keysList.map((key) => {
            if (key === BLOGGER_ASSETS) {
              console.log(`Removed old cache from ${key}`);
              return caches.delete(key);
            }
          })
        );
      })
      .then(() => self.clients.claim())
  );
});
 

I ovenstående kodestykke bruger vi waitUntil metode på servicemedarbejderen. Denne metode venter på, at handlingen er færdig, og derefter tjekker vi, om de aktiver, vi forsøger at rydde, er aktiver i vores nuværende app, før vi sletter dem.

Dernæst har vi brug for filerne gemt i vores cache for at bruge dem.

self.addEventListener("fetch", function (evt) {
  evt.respondWith(
    fetch(evt.request).catch(() => {
      return caches.open(BLOGGER_ASSETS).then((cache) => {
        return cache.match(evt.request);
      });
    })
  );
})
 

Når der kommer en anmodning på siden, vil PWA tjekke vores cache og læse fra den, hvis der er data i cachen i stedet for at gå til netværket. Brug derefter svarer med metode, tilsidesætter vi browserens standard og får vores begivenhed til at returnere et løfte. Når cachen er færdig, kan vi returnere cachen svarende til evt.request. Når cachen er klar, kan vi returnere den cache, der matcher evt.request.

Vi har med succes oprettet vores servicemedarbejder. Lad os nu gøre det tilgængeligt i vores applikation.

Registrer Service Worker

Lad os nu registrere vores servicemedarbejder i vores public/js/app.js fil med nedenstående kodestykke:

...
if ("serviceWorker" in navigator) {
  window.addEventListener("load", function () {
    navigator.serviceWorker
      .register("/blogger.serviceWorker.js")
      .then((res) => console.log("service worker registered"))
      .catch((err) => console.log("service worker not registered", err));
  });
}
 

Her tjekker vi, om vores applikations browser understøtter servicearbejdere (selvfølgelig understøtter ikke alle browsere servicearbejdere), og registrer derefter vores servicearbejderfil.

Kør nu applikationen med kommandoen nedenfor:

npm start
 

Gå til localhost:8000 i din browser for at få adgang til appen.

Google Lighthouse Check

Lad os nu tjekke, om vi konfigurerer vores PWA korrekt ved hjælp af et Google Lighthouse-tjek. Højreklik på din browser og vælg "inspicer". På inspektionsfanerne skal du vælge fyrtårn og klikke på generer rapport. Hvis alt gik godt med din applikation, skulle du se et output som det på skærmbilledet nedenfor:

Vi har med succes oprettet vores første ansøgning. Du kan også stoppe serveren for at teste applikationen i offlinetilstand.

Konklusion

Progressive Web Apps (PWA) bruger moderne API'er til at give forbedrede muligheder, pålidelighed og installerbarhed med en enkelt kodebase. De giver din slutbruger mulighed for at bruge din applikation, uanset om de har en internetforbindelse eller ej. Du skal være velkommen til at fordele depotet og tilføje yderligere funktioner til projektet. Held og lykke!