Skip to content

Try to start PWA #23

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 4 commits into
base: main
Choose a base branch
from
Draft

Try to start PWA #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4442b28
Try to start PWA
manuelsanchez2 May 29, 2024
a2aed4f
Merge branch 'main' into feature/addPWA
manuelsanchez2 May 30, 2024
df556f9
Add latest version
manuelsanchez2 May 30, 2024
86a504c
Add also img
manuelsanchez2 May 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3,369 changes: 2,101 additions & 1,268 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@
"@builder.io/qwik": "1.5.5",
"@builder.io/qwik-city": "latest",
"@playwright/test": "^1.44.1",
"@qwikdev/pwa": "^0.0.4",
"@types/better-sqlite3": "^7.6.10",
"@types/eslint": "7.28.0",
"@types/node": "^20.12.12",
Expand Down
20 changes: 17 additions & 3 deletions public/manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,23 @@
{
"$schema": "https://json.schemastore.org/web-manifest-combined.json",
"name": "qwik-project-name",
"short_name": "Welcome to Qwik",
"name": "collabender",
"short_name": "Collabender",
"start_url": ".",
"display": "standalone",
"background_color": "#fff",
"description": "A Qwik project app."
"theme_color": "#fff",
"description": "A collaborative calendar app you cannot miss.",
"screenshots": [
{
"src": "/screenshot.png",
"type": "image/png",
"sizes": "862x568"
},
{
"src": "/screenshot.png",
"type": "image/png",
"sizes": "862x568",
"form_factor": "wide"
}
]
}
Binary file added public/screenshot.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 8 additions & 1 deletion src/components/router-head/router-head.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { component$ } from '@builder.io/qwik'
import { useDocumentHead, useLocation } from '@builder.io/qwik-city'
import * as pwaHead from '@qwikdev/pwa/head'

/**
* The RouterHead component is placed inside of the document `<head>` element.
Expand All @@ -17,7 +18,7 @@ export const RouterHead = component$(() => {
/>
<link rel="canonical" href={loc.url.href} />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
{/* <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> */}

{head.meta.map((m) => (
<meta key={m.key} {...m} />
Expand All @@ -30,6 +31,12 @@ export const RouterHead = component$(() => {
{head.styles.map((s) => (
<style key={s.key} {...s.props} dangerouslySetInnerHTML={s.style} />
))}
{pwaHead.meta.map((l) => (
<meta key={l.key} {...l} />
))}
{pwaHead.links.map((l) => (
<link key={l.key} {...l} />
))}
</>
)
})
34 changes: 31 additions & 3 deletions src/routes/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,17 +166,45 @@ export default component$(() => {
''
)}
</main>
<footer>Version {APP_VERSION}</footer>
<footer class="my-6 text-center">Version {APP_VERSION}</footer>
</>
)
})

export const head: DocumentHead = {
title: 'Calendar App con Qwik',
title: 'Calendar App with Qwik',
meta: [
{
name: 'description',
content: 'Crea una app de calendario compartida con Qwik!',
content: 'Collaborative calendar app with Qwik',
},
{
name: 'keywords',
content: 'time management, shared time management app, calendar app',
},
{
name: 'author',
content: 'manuelsanchezweb',
},
{
name: 'og:image',
content: 'https://qwik-calendar.vercel.app/thumbnail.png',
},
{
name: 'twitter:image',
content: 'https://qwik-calendar.vercel.app/thumbnail.png',
},
{
name: 'twitter:card',
content: 'summary_large_image',
},
{
name: 'twitter:title',
content: 'Calendar App with Qwik',
},
{
name: 'twitter:description',
content: 'Collaborative calendar app with Qwik',
},
],
}
11 changes: 4 additions & 7 deletions src/routes/service-worker.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,9 @@
* Qwik uses a service worker to speed up your site and reduce latency, ie, not used in the traditional way of offline.
* You can also use this file to add more functionality that runs in the service worker.
*/
import { setupServiceWorker } from '@builder.io/qwik-city/service-worker';
import { setupServiceWorker } from '@builder.io/qwik-city/service-worker'
import { setupPwa } from '@qwikdev/pwa/sw'

setupServiceWorker();
setupServiceWorker()

addEventListener('install', () => self.skipWaiting());

addEventListener('activate', () => self.clients.claim());

declare const self: ServiceWorkerGlobalScope;
setupPwa()
7 changes: 6 additions & 1 deletion vite.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,15 @@ import { defineConfig } from 'vite';
import { qwikVite } from '@builder.io/qwik/optimizer';
import { qwikCity } from '@builder.io/qwik-city/vite';
import tsconfigPaths from 'vite-tsconfig-paths';
import { type PWAOptions, qwikPwa } from "@qwikdev/pwa";

// const config: PWAOptions | undefined = process.env.CUSTOM_CONFIG === "true"
// ? { config: true }
// : undefined;

export default defineConfig(() => {
return {
plugins: [qwikCity(), qwikVite(), tsconfigPaths()],
plugins: [qwikCity(), qwikVite(), tsconfigPaths(), qwikPwa()],
preview: {
headers: {
'Cache-Control': 'public, max-age=600',
Expand Down