默认情况下,Create-react-app CRA的工作方式是在开发人员模式下不存在ServiceWorker,并且任何以前安装的sw都将被虚拟人替换。
首先,将src/index.js
中的 serviceWorker.unregister()
替换为 serviceWorker.register()
接下来,我们修改src/serviceWorker.js
文件中的register()
功能,
删除条件:
process.env.NODE_ENV === 'production'
这样,不仅仅以prod模式加载服务工作者。
默认情况下,在http:// localhost:3000 / service-worker.js上将动态生成的虚拟文件提供给dev-mode 。 要解决此问题,请将在dev-mode中指定的文件名更改为custom-sw.js。
const swFileName = process.env.NODE_ENV ==='生产'
?'service-worker.js'
:'custom-sw.js'const
swUrl =`$ {process.env.PUBLIC_URL} / $ {swFileName}`;
现在让我们创建的一个服务人员的公共文件夹,将听取推事件和显示通知。 custom-sw.js
self.addEventListener('push', function(event) {
// console.log('[Service Worker] Push Received.');
// console.log(`[Service Worker] Push had this data: "${event.data.text()}"`);
const msg = event.data.json()
const title = '新帖提醒 - 那个Loc';
const options = {
body:msg.title,
tag:msg.href,
icon:'not.png',
};
event.waitUntil(self.registration.showNotification(title, options));
});
self.addEventListener('notificationclick', function(event) {
// console.log('[Service Worker] Notification click Received.');
href = event.notification.tag.length<8 ? `https://www.hostloc.com/thread-${event.notification.tag}-1-1.html` :event.notification.tag
event.notification.close();
event.waitUntil(
clients.openWindow(href)
);
});
现在,在您喜欢的浏览器中启用启用“重新加载时更新”选项或等效选项的情况下打开DevTools,然后重新加载页面。结果,应该安装custom-sw.js。
在这种情况下,Create React App会编译build文件夹中的文件,并在其中放置一个默认服务工作程序,其中包含对现代应用程序有用的东西。如果我们决定保留它们并只添加我们的推送功能,则需要对构建过程进行一些修改。CRA中有用于服务人员构建的工作箱。而且,即使您的目的只是添加一些自定义代码,也没有内置的方法可以对其进行修改。如果您还没有准备好主动地投入到CRA上下文中的Workbox配置研究中,我认为此软件包是最方便的方法。
首先,添加一个新的depenendecy:
yarn add cra-append-sw
之后,我们需要在package.json中扩展build-script,在其中添加一个新命令,该命令在main进程之后执行,这样整个行将如下所示:
react-scripts build && cra-append-sw --skip-compile ./public/custom-sw.js
结果,custom-sw.js的内容将附加在build / service-worker.js文件的末尾。
最后,关于显示订阅请求的策略的一般建议。 如果用户拒绝了这样的请求,您将没有第二次机会提供订阅,直到用户取消浏览器设置中的禁止(他们不太可能想要这样做)。因此,请明智地利用此机会选择合适的时间:用户首次访问您的网站绝对不是这种情况。如果您想使用户烦恼很多次,请首先显示带有订阅要约的自定义对话框。并且只有在用户同意的情况下,才显示真实的。