UNPKG

next-pwa-pack

Version:

PWA cache provider for Next.js/React apps (service worker, manifest, offline page, SPA cache, offline)

2 lines 2.85 kB
"use client"; import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";import{useState}from"react";import{clearAllCache,reloadServiceWorker,updatePageCache,unregisterServiceWorkerAndClearCache,disablePWACache,enablePWACache}from"./pwaActions";import{usePWAStatus}from"./usePWAStatus";const toastStyle={position:"fixed",bottom:16,left:"50%",transform:"translateX(-50%)",background:"#333",color:"#fff",padding:"10px 20px",borderRadius:8,boxShadow:"0 2px 8px rgba(0,0,0,0.2)",zIndex:1e4,fontSize:15,pointerEvents:"none",opacity:.95,transition:"opacity 0.2s"},devPanelStyle={position:"fixed",bottom:16,left:16,zIndex:9999,display:"flex",alignItems:"flex-end"},buttonStyle=(e,t)=>({background:e,color:t||"white",width:"100%",marginBottom:6,borderRadius:8,fontWeight:"bold",padding:"2px 5px"}),indicatorStyle=e=>({width:18,height:18,borderRadius:"50%",background:e?"#4caf50":"#f44336",border:"2px solid #fff",boxShadow:"0 0 4px rgba(0,0,0,0.2)",cursor:"pointer",transition:"background 0.2s"}),popupStyle={position:"relative",left:28,bottom:0,background:"#222",color:"#fff",borderRadius:8,padding:12,minWidth:180,boxShadow:"0 2px 8px rgba(0,0,0,0.2)",fontSize:14,width:200};export default function DevPWAStatus(){const{online:e,hasUpdate:t,update:a}=usePWAStatus(),[o,n]=useState(!1),[l,i]=useState(null),r=e=>{i(e),setTimeout((()=>i(null)),2e3)},d=async()=>{await clearAllCache(),r("Cache cleared")};return _jsxs(_Fragment,{children:[l&&_jsx("div",{style:toastStyle,children:l}),_jsxs("div",{style:devPanelStyle,onMouseEnter:()=>n(!0),onMouseLeave:()=>n(!1),children:[_jsx("div",{style:indicatorStyle(e),title:e?"Online":"Offline"}),o&&_jsxs("div",{style:popupStyle,children:[_jsx("div",{style:{marginBottom:8,fontWeight:600},children:"PWA Dev Tools"}),!e&&_jsx("div",{style:{color:"#f44336",marginBottom:8},children:"Offline mode"}),t&&_jsx("button",{onClick:a,style:buttonStyle("#ff9800"),children:"Update app (new SW)"}),_jsx("button",{onClick:d,style:buttonStyle("#818181"),children:"Clear all cache"}),_jsx("button",{onClick:async()=>{await reloadServiceWorker(),r("SW reloading..."),setTimeout((()=>window.location.reload()),1e3)},style:buttonStyle("#dfdb01","#000"),children:"Reload SW"}),_jsx("button",{onClick:async()=>{updatePageCache(),r("Page cache updated")},style:buttonStyle("#4caf50"),children:"Update page cache"}),_jsx("button",{onClick:async()=>{await unregisterServiceWorkerAndClearCache(),await d(),r("SW removed and cache cleared. Reload the page.")},style:buttonStyle("#f44336"),children:"Delete SW and all cache"}),_jsx("button",{onClick:()=>{disablePWACache(),r("PWA cache disabled (until reload or enable)")},style:buttonStyle("#607d8b"),children:"Disable PWA cache"}),_jsx("button",{onClick:()=>{enablePWACache(),r("PWA cache enabled")},style:buttonStyle("#2196f3"),children:"Enable PWA cache"})]})]})]})}