diff --git a/src/pages/blog/convert-astro-app-to-pwa.mdx b/src/pages/blog/convert-astro-app-to-pwa.mdx
index c3c6180..4fe8171 100644
--- a/src/pages/blog/convert-astro-app-to-pwa.mdx
+++ b/src/pages/blog/convert-astro-app-to-pwa.mdx
@@ -8,56 +8,40 @@ import { Image } from 'astro:assets'
import Code from '@components/main/code.astro'
import { pwaSeoConfig } from '@data/codes.ts'
+
## First of all, what is a PWA?
If you've been browsing the web frequently lately, you've probably come across
the following type of tooltip on some popular pages:
+
### YouTube
-
-
+
+
### Facebook
-
-
+
+
### Duolingo
-
-
+
+
### La Velada (implementación propia)
-
-
+
+
-- See https://github.com/midudev/la-velada-web-oficial/pull/389
+* See https://github.com/midudev/la-velada-web-oficial/pull/389
A Progressive Web App (PWA) is a type of web application that is designed to
work on any platform and device, regardless of the browser or operating system
@@ -71,16 +55,17 @@ accessed through a web browser just like any other website.
While PWAs are not a perfect solution for all applications, they have some
advantages that make them attractive for certain use cases:
+
- **Faster load times**: PWAs load quickly, even on slow connections.
- **Offline operation**: PWAs can work without an internet connection, but this
- depends on how the application logic has been implemented.
+ depends on how the application logic has been implemented.
- **Automatic updates**: PWAs update automatically, which means that users will
- always have the latest version of the application without needing to download
- or install updates.
+ always have the latest version of the application without needing to download
+ or install updates.
- **Lower data consumption**: PWAs consume less data than native applications,
- which can be useful for users with limited data plans.
+which can be useful for users with limited data plans.
- **Compatibility**: PWAs are compatible with most modern browsers, which means
- that users don't need to download a specific application for each platform.
+ that users don't need to download a specific application for each platform.
## How can I convert my Astro app into a PWA?
@@ -117,30 +102,19 @@ a favicon in different sizes. To be more specific, you will need these sizes:
As you can see, you will need a lot of different sizes. But fortunately, there
is
a tool that allows you to generate all these sizes automatically, with
-
-
- Favycon
-
+Favycon
you only need an image of 512x512 (or larger) and the tool will generate all the
-necessary sizes for you. Make sure to check the "PWA" option so that the tool generates
-the necessary sizes for a PWA. The image should preferably be in `.png` or `.svg`
-format with a transparent background; if your image does not meet these requirements,
-you can use tools like
- Remove.bg
- to remove the background from your image and
- Squoosh
- to convert your image to `.png` or `.svg` and optimize it.
-
-
-
+necessary sizes for you. Make sure to check the "PWA" option so that the tool
+generates the necessary sizes for a PWA. The image should preferably be in
+`.png` or `.svg` format with a transparent background; if your image does not
+meet these requirements, you can use tools like Remove.bg to remove the background from your
+image and Squoosh to convert your image to `.png` or `.svg` and
+optimize it.
+
+
+
In the compressed file you download, you will find a folder called `icons`,
@@ -172,27 +146,27 @@ include the SEO configuration for my application:
**`seoConfig.ts`**
```typescript
-import type { ManifestOptions } from 'vite-plugin-pwa'
+import type { ManifestOptions } from "vite-plugin-pwa"
/**
* Configuración de SEO para la aplicación.
* SEO configuration for the application.
*/
export const seoConfig = {
- baseURL: 'https://jamerrq.deno.dev/', // Production URL.
- description:
- 'Desarrollador de software con experiencia en desarrollo web y aplicaciones backend.',
- type: 'website',
- image: {
- url: 'https://jamerrq.deno.dev/og-image2.png',
- alt: 'jamerrq.dev',
- width: 730,
- height: 382
- },
- siteName: 'jamerrq.dev',
- twitter: {
- card: 'summary_large_image'
- }
+ baseURL: "https://jamerrq.deno.dev/", // Production URL.
+ description:
+ "Desarrollador de software con experiencia en desarrollo web y aplicaciones backend.",
+ type: "website",
+ image: {
+ url: "https://jamerrq.deno.dev/og-image2.png",
+ alt: "jamerrq.dev",
+ width: 730,
+ height: 382,
+ },
+ siteName: "jamerrq.dev",
+ twitter: {
+ card: "summary_large_image",
+ },
}
/**
@@ -200,31 +174,31 @@ export const seoConfig = {
* Defines the configuration for PWA webmanifest.
*/
export const manifest: Partial = {
- name: 'jamerrq.dev',
- short_name: 'jamerrq.dev',
- description:
- 'Desarrollador de software con experiencia en desarrollo web y aplicaciones backend.',
- theme_color: '#0F0F0F',
- background_color: '#0F0F0F',
- display: 'fullscreen',
- icons: [
- {
- src: '/img/icons/favicon-192x192.png',
- sizes: '192x192',
- type: 'image/png'
- },
- {
- src: '/img/icons/favicon-512x512.png',
- sizes: '512x512',
- type: 'image/png'
- },
- {
- src: '/img/icons/favicon-512x512.png',
- sizes: '512x512',
- type: 'image/png',
- purpose: 'any maskable'
- }
- ]
+ name: "jamerrq.dev",
+ short_name: "jamerrq.dev",
+ description:
+ "Desarrollador de software con experiencia en desarrollo web y aplicaciones backend.",
+ theme_color: "#0F0F0F",
+ background_color: "#0F0F0F",
+ display: "fullscreen",
+ icons: [
+ {
+ src: "/img/icons/favicon-192x192.png",
+ sizes: "192x192",
+ type: "image/png",
+ },
+ {
+ src: "/img/icons/favicon-512x512.png",
+ sizes: "512x512",
+ type: "image/png",
+ },
+ {
+ src: "/img/icons/favicon-512x512.png",
+ sizes: "512x512",
+ type: "image/png",
+ purpose: "any maskable",
+ },
+ ],
}
```
@@ -247,78 +221,35 @@ how you can include these tags in your `layout.astro` file:
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-{ !import.meta.env.DEV && (
-
-
-) }
+{
+ !import.meta.env.DEV && (
+
+
+ )
+}
```
In this example, I have included the necessary tags for the favicons and the
@@ -338,24 +269,20 @@ for you. Below is an example of how you can do this:
```typescript
export default defineConfig({
// ... other config
- vite: {
- plugins: [
- VitePWA({
- registerType: 'autoUpdate',
- manifest,
- workbox: {
- globDirectory: 'dist',
- globPatterns: [
- '**/*.{js,css,svg,png,jpg,jpeg,gif,webp,woff,woff2,ttf,eot,ico}'
- ],
- // Don't fallback on document based (e.g. `/some-page`) requests
- // This removes an errant console.log message from showing up.
- navigateFallback: null
- }
- })
- ]
- }
- // ... other config
+ vite: {
+ plugins: [VitePWA({
+ registerType: "autoUpdate",
+ manifest,
+ workbox: {
+ globDirectory: "dist",
+ globPatterns: ["**/*.{js,css,svg,png,jpg,jpeg,gif,webp,woff,woff2,ttf,eot,ico}"],
+ // Don't fallback on document based (e.g. `/some-page`) requests
+ // This removes an errant console.log message from showing up.
+ navigateFallback: null
+ }
+ })],
+ },
+ // ... other config
})
```
@@ -375,8 +302,8 @@ target="_blank" rel="noopener">GitHub repository or directly on its website.
-
-
+
+
Thanks for reading! I hope this tutorial has been helpful to you.