Skip to content

Commit

Permalink
fix: mdx broken file
Browse files Browse the repository at this point in the history
  • Loading branch information
@jamerrq
jamerrq committed Mar 15, 2024
1 parent 6265175 commit 713d968
Showing 1 changed file with 102 additions and 175 deletions.
277 changes: 102 additions & 175 deletions src/pages/blog/convert-astro-app-to-pwa.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

<a href='https://youtube.com' target='_blank' rel='noopener'>
<Image
src='/img/blog/youtube-pwa.png'
alt='youtube pwa'
width='860'
height='198'
/>
<a href="https://youtube.com" target="_blank" rel="noopener">
<Image src="/img/blog/youtube-pwa.png" alt="youtube pwa" width="860" height="198"/>
</a>

### Facebook

<a href='https://facebook.com' target='_blank' rel='noopener'>
<Image
src='/img/blog/fb-pwa.png'
alt='facebook pwa'
width='642'
height='138'
/>
<a href="https://facebook.com" target="_blank" rel="noopener">
<Image src="/img/blog/fb-pwa.png" alt="facebook pwa" width="642" height="138"/>
</a>

### Duolingo

<a href='https://duolingo.com' target='_blank' rel='noopener'>
<Image
src='/img/blog/duolingo-pwa.png'
alt='duolingo pwa'
width='870'
height='155'
/>
<a href="https://duolingo.com" target="_blank" rel="noopener">
<Image src="/img/blog/duolingo-pwa.png" alt="duolingo pwa" width="870"
height="155"/>
</a>

### La Velada (implementación propia)

<a href='https://lavelada.es' target='_blank' rel='noopener'>
<Image
src='/img/blog/lavelada-pwa.png'
alt='lavelada pwa'
width='1126'
height='261'
/>
<a href="https://lavelada.es" target="_blank" rel="noopener">
<Image src="/img/blog/lavelada-pwa.png" alt="lavelada pwa" width="1126"
height="261"/>
</a>

- 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
Expand All @@ -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?

Expand Down Expand Up @@ -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

<a href='https://favycon.vercel.app/' target='_blank' rel='noopener'>
Favycon
</a>
<a href="https://favycon.vercel.app/" target="_blank" rel="noopener">Favycon</a>
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 <a
href='https://www.remove.bg/'
target='_blank'
rel='noopener'
>
Remove.bg
</a> to remove the background from your image and <a
href='https://squoosh.app/'
target='_blank'
rel='noopener'
>
Squoosh
</a> to convert your image to `.png` or `.svg` and optimize it.

<a href='https://favycon.vercel.app/' target='_blank' rel='noopener'>
<Image src='/img/blog/favycon.png' alt='favycon' width='967' height='449' />
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 <a href="https://www.remove.bg/"
target="_blank" rel="noopener">Remove.bg</a> to remove the background from your
image and <a href="https://squoosh.app/" target="_blank"
rel="noopener">Squoosh</a> to convert your image to `.png` or `.svg` and
optimize it.

<a href="https://favycon.vercel.app/" target="_blank" rel="noopener">
<Image src="/img/blog/favycon.png" alt="favycon" width="967" height="449"/>
</a>

In the compressed file you download, you will find a folder called `icons`,
Expand Down Expand Up @@ -172,59 +146,59 @@ 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",
},
}

/**
* Configuración del manifiesto para la aplicación.
* Defines the configuration for PWA webmanifest.
*/
export const manifest: Partial<ManifestOptions> = {
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",
},
],
}
```

Expand All @@ -247,78 +221,35 @@ how you can include these tags in your `layout.astro` file:

<!-- Favicons. -->
<!-- 16 -->
<link
rel="icon"
type="image/png"
sizes="16x16"
href="/img/icons/favicon-16x16.png"
/>
<link rel="icon" type="image/png" sizes="16x16" href="/img/icons/favicon-16x16.png" />
<!-- 20 -->
<link
rel="icon"
type="image/png"
sizes="20x20"
href="/img/icons/favicon-20x20.png"
/>
<link rel="icon" type="image/png" sizes="20x20" href="/img/icons/favicon-20x20.png" />
<!-- 24 -->
<link
rel="icon"
type="image/png"
sizes="24x24"
href="/img/icons/favicon-24x24.png"
/>
<link rel="icon" type="image/png" sizes="24x24" href="/img/icons/favicon-24x24.png" />
<!-- 48 -->
<link
rel="icon"
type="image/png"
sizes="48x48"
href="/img/icons/favicon-48x48.png"
/>
<link rel="icon" type="image/png" sizes="48x48" href="/img/icons/favicon-48x48.png" />
<!-- 64 -->
<link
rel="icon"
type="image/png"
sizes="64x64"
href="/img/icons/favicon-64x64.png"
/>
<link rel="icon" type="image/png" sizes="64x64" href="/img/icons/favicon-64x64.png" />
<!-- 128 -->
<link
rel="icon"
type="image/png"
sizes="128x128"
href="/img/icons/favicon-128x128.png"
/>
<link rel="icon" type="image/png" sizes="128x128" href="/img/icons/favicon-128x128.png" />
<!-- 144 -->
<link
rel="icon"
type="image/png"
sizes="144x144"
href="/img/icons/favicon-144x144.png"
/>
<link rel="icon" type="image/png" sizes="144x144" href="/img/icons/favicon-144x144.png" />
<!-- 256 -->
<link
rel="icon"
type="image/png"
sizes="256x256"
href="/img/icons/favicon-256x256.png"
/>
<link rel="icon" type="image/png" sizes="256x256" href="/img/icons/favicon-256x256.png" />
<!-- 512 -->
<link
rel="icon"
type="image/png"
sizes="512x512"
href="/img/icons/favicon-512x512.png"
/>
<link rel="icon" type="image/png" sizes="512x512" href="/img/icons/favicon-512x512.png" />
<link rel="shortcut icon" type="image/x-icon" href="/img/icons/favicon.ico" />

<!-- Sitemap -->
<meta name="msapplication-config" content="/browserconfig.xml" />

<!-- Worker Registration -->
{ !import.meta.env.DEV && (
<script is:inline src="/registerSW.js"></script>
<link rel="manifest" href="/manifest.webmanifest" />
) }
{
!import.meta.env.DEV && (
<script is:inline src="/registerSW.js"></script>
<link rel="manifest" href="/manifest.webmanifest" />
)
}
```

In this example, I have included the necessary tags for the favicons and the
Expand All @@ -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
})
```

Expand All @@ -375,8 +302,8 @@ target="_blank" rel="noopener">GitHub repository</a> or directly on its <a
href="https://lumina-sigma.vercel.app/" target="_blank"
rel="noopener">website</a>.

<a href='https://lumina-sigma.vercel.app/' target='_blank' rel='noopener'>
<Image src='/img/blog/lumina.png' alt='lumina' width='1366' height='726' />
<a href="https://lumina-sigma.vercel.app/" target="_blank" rel="noopener">
<Image src="/img/blog/lumina.png" alt="lumina" width="1366" height="726"/>
</a>

Thanks for reading! I hope this tutorial has been helpful to you.
Expand Down

0 comments on commit 713d968

Please sign in to comment.