adding pwa supoort (I have done it )

[sanabel-al-firdaws]

What version of starlight are you using?

0.15.1

What is your idea?

Adding Progressive Web Apps As A Feature would be awosome ! I got it set up in less than an hour on my project

steps to do so

I just installed the vite plugin pwa

i didn't know how to override the head or page components so i overrided the theme provider components

you add the link to the manifest and you register the service worker here and thats it

followed this guide

https://astro-pwa-recipe.vercel.app/

my app works offline now and is installable

Why is this feature necessary?

Progressive Web Apps allow for bigger reach

for example an Astro docs Pwa can be shipped to app stores imagine looking in the docs on your phone etc

Do you have examples of this feature in other projects?

https://astro-pwa-recipe.vercel.app/

(don't use the astro starter pwa cuz this dev says its old astro 2.0)

Participation

• I am willing to submit a pull request for this feature.

[delucis]

That's cool! I wonder if it could be published as a Starlight plug-in? I think it should be possible to do using the existing plugin API if your were interested.

[sanabel-al-firdaws]

I would love to add a pwa and theme change plugin but i am a spaghitty coder

my github pages website

currently known issues are

1. pagefind runs after workbox so idk how i can cache the pagefind folder so searching offline shows no results(maybe a good thing for keeping it small)

2. it caches the entire website on my extremly small website its at 2mb

[sanabel-al-firdaws]

Also about the Theme Change Feature of having mutiple themes its extremly easy to make

1. install theme-change

2. override theme provider component with theme-change code (check the repo for the astro guide)

3. you have to make a copy of the Select.Astro component ThemeSelect.astro in your src/component then you import it in your override for ThemeProvider.astro

4. the copy of Select.astro must have data-choose-theme attribute so Add it in your ThemeSelect.astro

5. change theme provider select values to mirror your themes of choice

6. add your css variables in the custom css file

thats it i think Also I have discovered a "bug" i thought it was my fault but apperantly my laptop still has a" flash of undefined content " but my phone dosen't they both run the latest version of edge

Fixed it i installed chrome latest version and now the problem ia fixed!!

[HiDeoo]

Thanks to @sanabel-al-firdaws, there is now a public template to get started with Starlight as a PWA. You can find it here.

[sanabel-al-firdaws]

yes, also pagefind is working fully offline now in that template 👌had to make sed run after the build step to delete one line in pagefind