我是渐进式Web应用程序的新手。我为我的React PWA(渐进式网络)应用程序完成了this很棒的教程和设置。
现在这是我的 serviceworker.js 文件
const isLocalhost = Boolean(
window.location.hostname === 'localhost' ||
window.location.hostname === '[::1]' ||
window.location.hostname.match(
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
)
);
export default function register() {
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
if (publicUrl.origin !== window.location.origin) {
return;
}
window.addEventListener('load', () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
if (isLocalhost) {
checkValidServiceWorker(swUrl);
navigator.serviceWorker.ready.then(() => {
});
} else {
registerValidSW(swUrl);
}
});
}
}
function registerValidSW(swUrl) {
navigator.serviceWorker
.register(swUrl)
.then(registration => {
registration.onupdatefound = () => {
const installingWorker = registration.installing;
installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed') {
if (navigator.serviceWorker.controller) {
console.log('New content is available; please refresh.');
} else {
console.log('Content is cached for offline use.');
}
}
};
};
})
.catch(error => {
console.error('Error during service worker registration:', error);
});
}
function checkValidServiceWorker(swUrl) {
fetch(swUrl)
.then(response => {
if (
response.status === 404 ||
response.headers.get('content-type').indexOf('javascript') === -1
) {
navigator.serviceWorker.ready.then(registration => {
registration.unregister().then(() => {
window.location.reload();
});
});
} else {
registerValidSW(swUrl);
}
})
.catch(() => {
console.log(
'No internet connection found. App is running in offline mode.'
);
});
}
export function unregister() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready.then(registration => {
registration.unregister();
});
}
}
但是无法理解它是如何工作的?任何人都可以在这里帮助进行什么注册,注销和其他功能吗?
请帮助!!!
答案 0 :(得分:2)
服务工作者是网络工作者的一种。本质上是 与主浏览器线程分开运行的JavaScript文件, 拦截网络请求,从中缓存或检索资源 缓存,并传递推送消息。
从上面的示例代码中,您正在使用react框架通过create-react-app
构建PWA。通过允许开发人员构建很少或没有构建配置的React应用程序,它将消除所有这些问题。
致Build a realtime PWA with React:
服务人员代码基本上为以下人员注册了服务人员 React应用。我们首先检查是否通过
isLocalhost
const值从本地主机提供应用程序,该值将返回真实值或虚假值。register()
函数有助于注册 只有在生产模式和 如果浏览器支持Service worker。
registerValidSW()
函数将注册有效的服务程序,并负责状态(如果已安装)。
checkValidServiceWorker()
将检查是否可以找到服务人员。这将确保服务工作者存在,并且我们确实在获取JS文件。
unregister()
函数 帮助注销服务人员。