Possiblity to make it work on fresh laravel build or a working sample?

[msonowal]

I use the fresh default laravel vite config which can be re-produced by creating a new project with laravel

and install jetstream with inertia stack.

Now try to configure the service worker and plugin,
As per my tries and findings it generates the paths incorrectly which refers to the build folder.

This is my current vite config

import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin'
import vue from '@vitejs/plugin-vue'
import { VitePWA } from 'vite-plugin-pwa'

export default defineConfig({
  plugins: [
    laravel({
      input: [
        'resources/js/app.js',
        'resources/js/user/user.js'
      ],
    }),
    vue({
      template: {
        transformAssetUrls: {
          base: null,
          includeAbsolute: false
        }
      }
    }),
    VitePWA({
      srcDir: 'resources/js/service-worker',
      outDir: 'public',
      filename: 'sw.ts',
      strategies: 'injectManifest',
      injectRegister: 'inline',
      registerType: 'autoUpdate',
      workbox: {
        globPatterns: ['**/*.{ico,png,svg,ttf}']
      },
      devOptions: {
        enabled: true
      }
    })
  ],
  resolve: {
    alias: { './runtimeConfig': './runtimeConfig.browser' } 
},
})

[bursteri]

I have same issue trying to convert a Vite + Vue + Laravel project to PWA

-Following

[avesgit]

same problem what to do?

[userquin]

@msonowal you can use globDirectory on injectManifest to change the build folder: you also need to move globPatterns from workbox to injectManifest, check workbox-build documentation

It seems you are using TypeScript in your custom service worker, add type: 'module' to your pwa devOptions.

[userquin]

Here the reference: https://developer.chrome.com/docs/workbox/reference/workbox-build/#type-RequiredGlobDirectoryPartial

You'll need to also add outDir on pwa options.

[anburocky3]

@userquin How about an fork with laravel + inertiajs integration with Vite-PWA support?

[fredpedersen]

Has anyone got this working? For me, I'm not getting anything injected into the html - no service workers, no manifest...

VitePWA({
            registerType: 'autoUpdate',
            injectRegister: 'auto',
            devOptions: {
                enabled: true,
                type: 'module',
            },
            manifest: {
                name: 'My Awesome App',
                short_name: 'MyApp',
                description: 'My Awesome App description',
                theme_color: '#ffffff',
                icons: [
                    {
                        src: 'pwa-192x192.png',
                        sizes: '192x192',
                        type: 'image/png'
                    },
                    {
                        src: 'pwa-512x512.png',
                        sizes: '512x512',
                        type: 'image/png'
                    }
                ]
            }

[userquin]

I'm sorry folks, I dont use laravel.
can you provide folder structure?

[fredpedersen]

Laravel projects are based on this and use the same folder structure https://github.com/laravel/laravel

Static files including js, vue files ect. are all put in the resources directory and then generated into the public/build/ folder by vite.

[userquin]

You can try to add this to pwa options:

plugins: [
  VitePWA({
    outDir: 'public/build',
  })
],

[fredpedersen]

You're kidding! Thank you, that's saved a lot of time.

For anyone else wondering, even though some files get generated in public/build you also need registerSW.js and workbox to be generated there - adding outDir: 'public/build', does that.

It's still not auto injecting the script and manifest for me, but I've gotten around that by manually including them in the blade layout:

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

[userquin]

@fredpedersen provide these pwa options:

plugins: [
  VitePWA({
    outDir: 'public/build',
    scope: '/',
    base: '/',
    /* other options*/
    manifest: {
      id: '/',
      scope: '/',
      /* other options*/
    }
  })
],

[userquin]

@fredpedersen so the root/base for the app is /build? can you change the build/dist folder in laravel?

[anburocky3]

@userquin the root of the app is /public

If the directory is like SERVER://public_html/public the starting point of app will be in /public only. So all favicons, will be located there.

[userquin]

@anburocky3 @fredpedersen can you try using this?

plugins: [
  VitePWA({
    outDir: 'public',
  })
],

EDIT: this way you don't need to switch to manual injection, and you will be able to use VanillaJS virtual module for auto update and auto page reload.

[anburocky3]

You're kidding! Thank you, that's saved a lot of time.

For anyone else wondering, even though some files get generated in public/build you also need registerSW.js and workbox to be generated there - adding outDir: 'public/build', does that.

It's still not auto injecting the script and manifest for me, but I've gotten around that by manually including them in the blade layout:

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

Is there any way that, we can inject the script imports directly to our blade layout?

[anburocky3]

@anburocky3 @fredpedersen can you try using this?

plugins: [
  VitePWA({
    outDir: 'public',
  })
],

I think, it is generating correctly, but it doesn't get inserted into app.blade.php file. We have some directives like @vite() which will import the js for us.

It will be cool, if it auto-imports the necessary scripts in our app.

FYI, this is the layout file: app.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title inertia>{{ config('app.name', 'Laravel') }}</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <!-- Scripts -->
    @routes
    @vite('resources/js/app.ts')
    @inertiaHead
</head>
<body class="antialiased">
    @inertia
</body>
</html>

[userquin]

Check my previous comment, I add EDIT entry: then in your layour you can just use in resources/js/app.ts:

import { registerSW } from 'virtual:pwa-register'
/*other code*/

registerSW({ immediate: true })

[userquin]

For the web manifest you can use this another virtual virtual:pwa-info:

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

if (pwaInfo) {
  const webManifest = pwaInfo.webManifest.linkTag
  console.log(pwaInfo)
  /* add link to head: webManifest  is the link */
}

[userquin]

for example, we use it in SvelteKit layout: https://github.com/vite-pwa/sveltekit/blob/main/examples/sveltekit-ts/src/routes/%2Blayout.svelte

[anburocky3]

Based on suggestion, tried it.
Here is the testing URL: https://jdskitchen.menuworkflow.com/

My Config:

VitePWA({
            registerType: 'autoUpdate',
            devOptions: {
                enabled: true
            },
            // outDir: 'public/build',
            outDir: 'public',
            scope: '/',
            base: '/',
            includeAssets: ['favicon.ico', 'apple-touch-icon.png', 'masked-icon.svg'],
            manifest: {
                id: '/',
                scope: '/',
                name: 'MenuWorkflow',
                short_name: 'MenuWorkflow',
                description: 'Make order workflow ease.',
                theme_color: '#ffffff',
                icons: [
                    {
                        "src": "/img/icons/icon-72x72.png",
                        "sizes": "72x72",
                        "type": "image/png",
                        "purpose": "maskable any"
                    },
                    {
                        "src": "/img/icons/icon-96x96.png",
                        "sizes": "96x96",
                        "type": "image/png",
                        "purpose": "maskable any"
                    },
                    {
                        "src": "/img/icons/icon-128x128.png",
                        "sizes": "128x128",
                        "type": "image/png",
                        "purpose": "maskable any"
                    },
                    {
                        "src": "/img/icons/icon-144x144.png",
                        "sizes": "144x144",
                        "type": "image/png",
                        "purpose": "maskable any"
                    },
                    {
                        "src": "/img/icons/icon-152x152.png",
                        "sizes": "152x152",
                        "type": "image/png",
                        "purpose": "maskable any"
                    },
                    {
                        "src": "/img/icons/icon-192x192.png",
                        "sizes": "192x192",
                        "type": "image/png",
                        "purpose": "maskable any"
                    },
                    {
                        "src": "/img/icons/icon-384x384.png",
                        "sizes": "384x384",
                        "type": "image/png",
                        "purpose": "maskable any"
                    },
                    {
                        "src": "/img/icons/icon-512x512.png",
                        "sizes": "512x512",
                        "type": "image/png",
                        "purpose": "maskable any"
                    }
                ]
            }
        })

Issues found:

1. Manifest not found.
2. Can find the service workers here like this.
   

I mainly use PWA, to add this app in all native platforms. Is there any way, we can show This app is installable, is there any view inbuild into this package?

[userquin]

@anburocky3 where is index.html? if you are using / instead, just add workbox.navigateFallback = '/' to pwa options

[fredpedersen]

From some testing:
import { pwaInfo } from 'virtual:pwa-info' causes the service worker to get stuck on 'trying to install' and it never gets past this.

 id: '/',
scope: '/',

also breaks it, saying trying to install regardless of manual or automatic injection

I now have a running and active service worker with manual injection and with:

outDir: 'public/build',
registerSW: true,
devOptions: {
    enabled: true,
},

But it's throwing the error Uncaught (in promise) non-precached-url: non-precached-url :: [{"url":"index.html"}]

EDIT:
Scratch that it's working with workbox.navigateFallback = '/' as above

[anburocky3]

@anburocky3 where is index.html? if you are using / instead, just add workbox.navigateFallback = '/' to pwa options

I'm using Laravel app, as discussed above, the entry point of the app is in /public

From some testing: import { pwaInfo } from 'virtual:pwa-info' causes the service worker to get stuck on 'trying to install' and it never gets past this.

 id: '/',
scope: '/',

also breaks it, saying trying to install regardless of manual or automatic injection

I now have a running and active service worker with manual injection and with:

outDir: 'public/build',
registerSW: true,
devOptions: {
    enabled: true,
},

But it's throwing the error Uncaught (in promise) non-precached-url: non-precached-url :: [{"url":"index.html"}]

EDIT: Scratch that it's working with workbox.navigateFallback = '/' as above

Can you share the entire config files, so it will be easy to understand.

[userquin]

@anburocky3 add it also on devOptions

[userquin]

@anburocky3 check the build folder and remove public/build/sw.js and public/build/registerSW.js

[userquin]

virtual:pwa-info dts: https://github.com/vite-pwa/vite-plugin-pwa/blob/main/info.d.ts

[userquin]

about virtual:pwa-info you can check if present, if so, you can create the link manually, it was created to use it in meta framework integrations (SvelteKit and Astro)

https://github.com/vite-pwa/astro/blob/main/examples/pwa-prompt/src/layouts/DefaultLayout.astro#L31

[fredpedersen]

Here's the full config at the moment:

VitePWA({
            outDir: 'public',
            scope: '/',
            id: '/',
            registerSW: true,
            devOptions: {
                enabled: true,
            },
            workbox: {
                navigateFallback: '/',
            },
            manifest: {
                name: "Codex",
                short_name: "Codex",
                theme_color: '#ffffff',
                start_url: '/',
                scope: '/',
                id: '/',
                icons: [
                    {
                        src: '/img/icons/android-chrome-192x192.png',
                        sizes: '192x192',
                        type: 'image/png',
                    },
                    {
                        src: '/img/icons/android-chrome-512x512.png',
                        sizes: '512x512',
                        type: 'image/png',
                    },
                    {
                        src: '/img/icons/android-chrome-512x512.png',
                        sizes: '512x512',
                        type: 'image/png',
                        purpose: 'any maskable'
                    }
                ],
            },
        })

The current issue with that config is that it seems to be generating sw.js and workbox at /public but registerSW.js and manifest at public/build. The registerSW.js file references /public/build/sw.js which doesn't exist

[userquin]

so Vite build is changed to public/build folder, revert outDir to public/build and remove sw.js, registerSW.js and workbox-*.js from public folder

[anburocky3]

@fredpedersen type error on this. How did you get rid of it?

With respect, @userquin if we register the registerSW here, we don't need to have registerSW({immediate: true}) in resources/js/app.ts right?

[userquin]

@ibarral maybe this headers preventing cache /app response:

[ibarral]

@userquin I just changed it to "cache-control: public" with no luck either :(

Here is the new URL... the old one has expired:
https://kzhauf0b53.sharedwithexpose.com/app

Thanks a lot!!!

[userquin]

@ibarral I'll review my docs to modify the runtimeCaching plugin and so we can debug it

[ibarral]

@userquin ok thank you very much! I will wait for your feedback ;)

[MatheusRmelo]

I fixed this problem with this manner. I don't know if is best option, but works and now I have PWA installable using vue and laravel in same project.

plugins: [
       ..., // others plugins
VitePWA({
            registerType: 'autoUpdate',
            outDir: 'public',
            buildBase: '/',
            scope: '/',
            manifest: {...} // your manifest to pwa with your icons and names
})

The build finals is look like that, with sw.js in public folder so when build/registerSw.js call /sw.js it gonna find.

And of course it's necessary to put in blade entry of your vue the configutarion to PWA (in head)

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TITLE YOUR APPLICATION</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    <link rel="manifest" href="/build/manifest.webmanifest">
    <script id="vite-plugin-pwa:register-sw" src="/build/registerSW.js"></script>
</head>

[sibalonat]

@MatheusRmelo can you make a working example? I tried to implement this in my project, I think I spend around 5 hours and had no results. I gave up later on and defaulted to https://github.com/silviolleite/laravel-pwa but I wished I could make this work since I think the developer makes good work.

[MatheusRmelo]

@sibalonat Hi, Sorry for late. I did a example in https://github.com/MatheusRmelo/laravel-pwa-with-vue.

[Olie-Chanz]

@sibalonat Hi, Sorry for late. I did a example in https://github.com/MatheusRmelo/laravel-pwa-with-vue.

@MatheusRmelo what could be the reason why registerSW.js is not being built on your example?

[francoism90]

So after many hours of trial and error, I came up with this solution:

VitePWA({
      registerType: 'autoUpdate',
      injectRegister: 'script',
      manifestFilename: '../manifest.webmanifest', // this ugly workaround to get in public root 
      outDir: 'public',
      base: 'public',
      scope: '/',
      buildBase: '/',
      workbox: {
        navigateFallback: '/',
        navigateFallbackDenylist: [/\/[api,admin]+\/.*/],
        maximumFileSizeToCacheInBytes: 4194304,
        globPatterns: ['**/*.{css,js,html,svg,png,ico,txt,woff2}'],
        cleanupOutdatedCaches: true,
        directoryIndex: null, // this prevents fallback to index.html
      },
      manifest: {
        name: 'App',
        short_name: 'App',
        description: 'App',
        theme_color: '#39336c',
        background_color: '#39336c',
        orientation: 'portrait-primary',
        id: '/',
        scope: '/',
        start_url: '/',
        icons: [
          {
            src: '/storage/images/android-chrome-192x192.png',
            sizes: '192x192',
            type: 'image/png'
          },
          {
            src: '/storage/images/android-chrome-512x512.png',
            sizes: '512x512',
            type: 'image/png',
            purpose: 'any maskable'
          }
        ]
      },
    })

On your app.blade.php:

<link rel="manifest" href="/manifest.webmanifest">
<script id="vite-plugin-pwa:register-sw" src="/build/registerSW.js"></script>

@userquin I could enable dev mode, but this doesn't work when you want to deploy, right?

Also I'm I missing something? It seems the build directory is being forced somehow.

Thanks

[userquin]

@francoism90 #467 (comment)

EDIT: about dev, yes, you can ignore dev-dist folder.

[francoism90]

@userquin Thanks, I tried using buildBase: '/build/', but it didn't change anything. Could I provide you with debug info?

Hmm, if one uses dev, it does include developer tools to work, right? I don't think this is wanted for production.

[userquin]

You need to add the http header in your backend to instruct the browser the sw scope is / being served from build folder.

EDIT: a service worker can only intercept resources/request from its base (in your case build). Since the scope is /, the browser will complain, add the header service-worker-allowed: '/' (in any html/js asset) in your backend logic and the browser will be happy (and you ;) )

[francoism90]

@userquin Ah :)

Could you please give a full example:

# pwa
    location /manifest.webmanifest {
        types { } default_type "application/manifest+json webmanifest;";
    }

Should you use try_files, or do you know an efficient solution?

Thanks

[userquin]

No, sorry, I don't use Laravel, I use only Netty or Apache HTTP Server via proxy in dev (Vite/Nuxt + Kotlin Backend): check https://vite-pwa-org.netlify.app/deployment/ , there are some hints and a few servers there

[francoism90]

@userquin Many Thanks for the help, it seems to be working. :)

Full solution:

// nginx/sites/my-site.conf

# service workers
    add_header Service-Worker-Allowed /;

    # pwa
    location /manifest.webmanifest {
        types { } default_type "application/manifest+json webmanifest;";
        return 301 $scheme://$http_host/build/manifest.webmanifest;
    }

The vite.config.js:

VitePWA({
      registerType: 'autoUpdate',
      injectRegister: 'script',
      outDir: 'public/build',
      base: 'public',
      buildBase: '/build/',
      scope: '/',
      workbox: {
        cleanupOutdatedCaches: true,
        directoryIndex: null,
        globPatterns: ['**/*.{css,js,html,svg,png,ico,txt,woff2}'],
        maximumFileSizeToCacheInBytes: 4194304,
        navigateFallback: null,
        navigateFallbackDenylist: [/\/[api,admin,livewire]+\/.*/],
      },
      manifest: {
        name: 'app',
        short_name: 'app',
        description: 'app',
        theme_color: '#39336c',
        background_color: '#39336c',
        orientation: 'portrait-primary',
        id: '/',
        scope: '/',
        start_url: '/',
        icons: [
          {
            src: '/storage/images/android-chrome-192x192.png',
            sizes: '192x192',
            type: 'image/png',
          },
          {
            src: '/storage/images/android-chrome-512x512.png',
            sizes: '512x512',
            type: 'image/png',
            purpose: 'any maskable',
          },
        ],
      },
    }),

And this in app.blade.php:

<link rel="manifest" href="/build/manifest.webmanifest">
<script id="vite-plugin-pwa:register-sw" src="/build/registerSW.js"></script>

[userquin]

You need an html page in the dist folder if using offline support (SW precaching): check point 6.6 here https://vite-pwa-org.netlify.app/guide/cookbook.html#vite-plugin-pwa-closebundle-hook

Since html pages being served by the backend workbox will not find it: try adding additionalManifestEntries in workbox option with a random number in the revision:

workbox.additionalManifestEntries = [{ url : '/', revision: `${Date.now()}` }]

EDIT: your backend should return the entry point when requesting /

[francoism90]

@userquin My first goal was to make it installable. Which seems to be possible now.

Hmm, doesn't the DirectoryIndex null solve this issue? Didn't know you could manually add records. :)

I kinda new to offline support. It would be great if assets could be cached, however it seems even be possible to 'save' a video stream to the client, which is really cool.

Thanks for the help, really appreciate it.

[userquin]

upps, sorry, you've navigationFallback disabled, IIRC the PWA will not be installable (too many options out there), just try it (check if the install button appears in the url address)

[francoism90]

@userquin Yep, it works.

The amount of options are really overwhelming when you need to generate the code yourself. I'm really glad your package exists. :)

[sfreytag]

Thanks everyone for the epic amount of information and debugging in this thread. For those using Sail, I was able to add the Service-Worker-Allowed header by overriding laravel/framework/Illuminate/Foundation/Resources/server.php by adding a file called server.php in my Laravel project root with the content below. SW and offline support seem to be working fine.

<?php

$publicPath = getcwd();

$uri = urldecode(
    parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH) ?? ''
);

// This file allows us to emulate Apache's "mod_rewrite" functionality from the
// built-in PHP web server. This provides a convenient way to test a Laravel
// application without having installed a "real" web server software here.

if ($uri !== '/' && $uri != '/build/sw.js' && file_exists($publicPath.$uri)) {
    return false;
}

if ($uri == '/build/sw.js') {
    header('Service-Worker-Allowed: /');
    header('Content-Type: text/javascript');
    echo file_get_contents(__DIR__ . '/public/build/sw.js');
    exit;
}

require_once $publicPath.'/index.php';

[sfreytag]

I found that the static icons in the Laravel public folder and those specified in manifest.icons were not working offline. This is also because of the mismatch between Vite's publicDir, Laravel's definition of the public dir and the buildBase config. The obvious example is the favicon. It should be added to the SW precache with the VitePWA config option includeAssets: ['favicon.ico']. This would then be found by VitePWA relative to the Vite publicDir. But laravel/vite-plugin sets publicDir to false, because Laravel does not have this concept. I can override it in my config by adding publicDir: 'public' to the Vite config. VitePWA now finds the favicon (and everything else in the public folder!), adds it to the sw.js pre-cache, but caches it with the buildBase in the path, as /build/favicon.ico. When I go offline and the page requests just favicon.ico it therefore does not load.

To solve this, I don't want to suggest more work with baseBuild, which is otherwise working well. I thought it made more sense to think of the icons as additionalManifestEntries to be fetched separately:

workbox: {
    additionalManifestEntries: [
        { url: '/favicon.ico', revision: `${Date.now()}` }
    ]
}

and that worked fine.

[rzuzo]

Hi guys, are there any definitive working config for a laravel + vue3 (ts) + vite setup resulting from this thread? Any of you got the complete pwa experience working with offline support and app installation?

Thanks to everybody that has added their setups here but I am currently lost on what is the correct config to use. I would appreciate any help from the people that got it to work!
Thanks and cheers!

[francoism90]

@rzuzo It should work with the Vue + Vite examples given already.

Did you actually try something?

[sfreytag]

It works for me too. I was about to add my vite.config.ts here, but I realised there's a bit more going on. So I've set up a demo repo to share what I did - I've put it here and will work on it now: https://github.com/sfreytag/laravel-vite-pwa

[sfreytag]

I think I am done - have added a few docs to the README to explain, but as a quickstart here's the diff between the vanilla Laravel 10 install and the current HEAD, showing all the things added to achieve Vite + vite-plugin-pwa + Vue + Typescript with offline support and install prompts, etc - https://github.com/sfreytag/laravel-vite-pwa/compare/a59497..HEAD

[iamrangoo]

You guys are all legends. Thank you so much!

[userquin]

I think I am done - have added a few docs to the README to explain, but as a quickstart here's the diff between the vanilla Laravel 10 install and the current HEAD, showing all the things added to achieve Vite + vite-plugin-pwa + Vue + Typescript with offline support and install prompts, etc - https://github.com/sfreytag/laravel-vite-pwa/compare/a59497..HEAD

Feel free to send a PR to the docs repo: maybe adding a new page in the frameworks folder called laravel.md (don't use upper case chars in the filename)