vue-vben-admin icon indicating copy to clipboard operation
vue-vben-admin copied to clipboard

Bring back the PWA

Open doraemonxxx opened this issue 1 year ago • 2 comments

Subject of feature

PWA feature

Problem

In version 2.0.0-rc.6 (2020-10-28), The PWA is supported but then current version does not . What's the reason for removing the PWA(vite plugin). Thanks

Expected behaviour

Support PWA for better UX

doraemonxxx avatar Jan 20 '24 12:01 doraemonxxx

@doraemonxxx

For example, use workbox v7 for offline cache only

Then you can load app offline when https

# install cli tool
npm i workbox-cli -g

# create offline libs,like "./public/workbox-v7.0.0"
workbox copyLibraries ./public

add sw.js to ./public

importScripts('./workbox-v7.0.0/workbox-sw.js');

const { registerRoute } = workbox.routing;
const { CacheFirst, StaleWhileRevalidate, NetworkFirst } = workbox.strategies;

// CacheFirst(filename with uniquely hash suffix)
registerRoute(
  ({ url }) =>
    /\/[^\/]+-[a-zA-Z0-9\-_]{8}\.[a-z]+$/.test(url.pathname) || // build files
  new CacheFirst(),
);

// StaleWhileRevalidate
registerRoute(
  ({ url }) =>
    /^\/(index\.html)?$/.test(url.pathname) || // app entry
    /^\/_app.config\.js/.test(url.pathname) || // app config
    /\.ico$/.test(url.pathname) || // ico
    /^\/(logo\.png)$/.test(url.pathname), // logo
  new StaleWhileRevalidate(),
);

// NetworkFirst
registerRoute(
  ({ url, request }) => request.method === 'GET' && /^\/(basic-api)\//.test(url.pathname), // get request
  new NetworkFirst(),
);

add script to ./index.html

    <script type="module">
      if ('serviceWorker' in navigator) {
        window.addEventListener('load', () => {
          navigator.serviceWorker
            .register('./sw.js')
            .then((registration) => {
              console.log('Service Worker registered:', registration);
            })
            .catch((registrationError) => {
              console.log('Service Worker registration failed:', registrationError);
            });
        });
      }
    </script>

xachary avatar Jan 24 '24 01:01 xachary

care to share why use the workbox instead of vite-plugin-pwa? thanks

doraemonxxx avatar Jan 27 '24 13:01 doraemonxxx

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days

anncwb avatar Apr 09 '24 01:04 anncwb

Closing this issue as it has become stale and there is no opportunity for further discussion. Thank you.

doraemonxxx avatar Apr 09 '24 05:04 doraemonxxx