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

Jump to bottom

Off-line support with auto generated service worker #853

Closed
quantuminformation opened this issue Sep 23, 2020 · 5 comments
Closed

Off-line support with auto generated service worker #853

quantuminformation opened this issue Sep 23, 2020 · 5 comments

Comments

@quantuminformation
Copy link

Is your feature request related to a problem? Please describe.
One of my apps needs off-line support
Describe the solution you'd like
Auto generated service worker based on the assets
@underfin
Copy link
Member

Can you have a try with rollup-plugin-workbox?

@JonasKruckenberg JonasKruckenberg mentioned this issue Oct 5, 2020
Closed
@JonasKruckenberg
Copy link

What you can do while the writeBundle hook is still unsupported, is to create an empty placeholder file public/sw.js and import that from your index.html file.
Something like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
    <script src="/sw.js"></script> <!-- Import the placeholder file --> 
  </body>
</html>

And the call the workbox-cli after vite build has finished.

"scripts": {
    "build": "vite build && workbox generateSW"
  }

For this to work though you need to have the workbox-cli installed and a workbox-config.js file. You can generate one with workbox wizard. There you have to make sure to override the placeholder file from above like so:

module.exports = {
  globDirectory: 'dist/',
  globPatterns: ['**/*.{js,css,ico,html}'], // add all .js,.css,.ico and .html files to the service workers manifest
  swDest: 'dist/sw.js', // This is the important part

It is awkward yes, but currently the only working solution that I could find.

@quantuminformation
Copy link
Author

End the end we just made a local copy for the use case and hard installed it.

@kmacute
Copy link

kmacute commented Oct 9, 2020 •
edited
Loading

Did tried your config, my html having ended like this.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  <link rel="stylesheet" href="/_assets/style.343661e4.css">
</head>
  <body>
    <div id="root"></div>
    
     <!-- Import the placeholder file --> 
  <script type="module" src="/_assets/index.f3c20df5.js"></script>
</body>
</html>

The <script src="/sw.js"></script> did not included to the dist html. Please help

@yyx990803
Copy link
Member

This is out of scope for Vite.

@github-actions github-actions bot locked and limited conversation to collaborators Jul 16, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@quantuminformation @yyx990803 @underfin @JonasKruckenberg @kmacute