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.

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

Create Laravel.md #470

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Changes from all commits
Commits
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
60 changes: 60 additions & 0 deletions docs/frameworks/Laravel.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
---
title: Laravel/Vite | Frameworks
---

# Laravel/Vite

Laravel configures Vite to build assets to the `/public/build` folder. This causes problems for the generated webapp files such as `manifest.webmanifest` and `sw.js`, because the scope (the URL that the PWA is defined as being within) is limited to the location of the manifest file and service worker in most browsers. This would mean your webapp could only be located in http://example.com/build/.

We can get around this by sending an additional header when the client loads the generated `sw.js` file. This allows us to redefine the maximum scope of our web app. For example, using Nginx:
```
location ~* sw\.js$ {
add_header 'Service-Worker-Allowed' '/';
try_files $uri = 404;
}
```

Then edit the configuration of this plugin to ensure all referenced URLs are relative to the `public/build` folder and set the scope to '/':
```
VitePWA({
outDir: 'public/build/',
buildBase: '/build/',
scope: '/',
id: '/',
})
```

We will also make the plugin generate `registerSW.js` file which we can use to register the service worker:
```ts
VitePWA({
...
registerSW: true,
})
```

This generates a `registerSW.js` file which we should include along with the `manifest.webmanifest` file in any page which will be part of the PWA. You can edit the layout file to include:
```
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can use both virtual modules, you dont need to add them manually.

Add how to use both virtual modules and move this as an opcional

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I never got that working I'm afraid. Feel free to edit.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

upps, the docs here are deprecated, we should move this to docs repo

<link rel="manifest" href="/build/manifest.webmanifest">
<script src="/build/registerSW.js"></script>
```

The plugin will by default also try to cache `index.html` by default. Because laravel is dynamically generating it's files using the Blade system we don't have an `index.html` file in the `public` folder. We can let the plugin know not to try and cache this using:
```ts
VitePWA({
...
workbox: {
navigateFallback: null,
},
})
```


Then add the manifest and any other configuration as described elsewhere:
```ts
VitePWA({
...
manifest: {
...
}
})
```