Skip to content
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

docs: Improve laravel docs with examples #24

Open
wants to merge 1 commit into
base: userquin/include-integrations-section
Choose a base branch
from
Open

docs: Improve laravel docs with examples #24

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
40 changes: 26 additions & 14 deletions integrations/laravel.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ We assume you're using `laravel-vite-plugin` to integrate your Laravel applicati
## Installation

Install `vite-plugin-pwa` plugin as dev dependency using `npm` or `yarn` or `pnpm`:

```shell
npm i vite-plugin-pwa -D
yarn add vite-plugin-pwa -D
Expand All @@ -18,26 +19,30 @@ pnpm add -D vite-plugin-pwa
## Configuration

You need to add `vite-plugin-pwa` to your `vite.config.js` file:

```ts
import { VitePWA } from 'vite-plugin-pwa'

export default {
plugins: [
VitePWA({ /* PWA options */ })
]
VitePWA({
/* PWA options */
}),
],
}
```

Since `laravel-vite-plugin` is configuring Vite to use `public/build` folder as root build folder, you need to configure `vite-plugin-pwa` to change the path to include `/build/` in your Laravel base path (by default `/`):

```ts
import { VitePWA } from 'vite-plugin-pwa'

export default {
plugins: [
VitePWA({
buildBase: '/build/' // <== this is the default value, since base will be `/`
})
]
buildBase: '/build/', // <== this is the default value, since base will be `/`
}),
],
}
```

Expand All @@ -46,13 +51,17 @@ export default {
Please read [Register Service Worker](/guide/register-service-worker) section for more information.

We suggest you to use `virtual:pwa-register` (VanillaJS) virtual module to register the service worker in your Laravel application, include this code in your `resources/js/app.js` file:

```ts
import { registerSW } from 'virtual:pwa-register';
import { registerSW } from 'virtual:pwa-register'

registerSW({ /* options */ });
registerSW({
/* options */
})
```

If you're using TypeScript, you may also need to register `vite-plugin-pwa/cleint` in your `tsconfig.json` file:

```json
{
"compilerOptions": {
Expand All @@ -64,27 +73,29 @@ If you're using TypeScript, you may also need to register `vite-plugin-pwa/clein
## Registering Web Manifest

To register the PWA web manifest in your Nuxt 3 application, `vite-plugin-pwa` exposes `virtual:pwa-info` virtual module you can use to write the web manifest:

```ts
/// <reference types="vite-plugin-pwa/info" />

import { pwaInfo } from 'virtual:pwa-info';
import { pwaInfo } from 'virtual:pwa-info'

if (pwaInfo) {
const href = pwaInfo.webManifest.href;
const href = pwaInfo.webManifest.href
/* add link to head: href is the link */
const linkElement = document.createElement("link");
linkElement.setAttribute("rel", "manifest");
linkElement.setAttribute("href", href);
const linkElement = document.createElement('link')
linkElement.setAttribute('rel', 'manifest')
linkElement.setAttribute('href', href)
if (pwaInfo.webManifest.useCredentials) {
linkElement.setAttribute("crossorigin", 'use-credentials');
linkElement.setAttribute('crossorigin', 'use-credentials')
}
document.head.appendChild(linkElement);
document.head.appendChild(linkElement)
}
```

If you're ont using TypeScript, you can omit the `/// <reference types="vite-plugin-pwa/info" />` line.

If you're using TypeScript, you may also need to register `vite-plugin-pwa/info` in your `tsconfig.json` file:

```json
{
"compilerOptions": {
Expand All @@ -94,6 +105,7 @@ If you're using TypeScript, you may also need to register `vite-plugin-pwa/info`
```

or include a `vite-env.d.ts` file in your root or source folder:

```ts
/// <reference types="vite/client" />
/// <reference types="vite-plugin-pwa/info" />
Expand Down