From 713d9687d5c7cdef999e53797458a59ce8fb99cb Mon Sep 17 00:00:00 2001 From: jamerrq Date: Fri, 15 Mar 2024 17:28:12 -0500 Subject: [PATCH] fix: mdx broken file --- src/pages/blog/convert-astro-app-to-pwa.mdx | 277 +++++++------------- 1 file changed, 102 insertions(+), 175 deletions(-) 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 - - youtube pwa + +youtube pwa ### Facebook - - facebook pwa + +facebook pwa ### Duolingo - - duolingo pwa + +duolingo pwa ### La Velada (implementación propia) - - lavelada pwa + +lavelada pwa -- 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. - - - favycon +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. + + +favycon 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. - - lumina + +lumina Thanks for reading! I hope this tutorial has been helpful to you.