I am trying to implement PWA with firebase cloud messaging push notifications (front-end only, for testing...). The problem is there are no specific instructions on how to implement it.
For push notifications to work, I can't use the default service worker provided by npx create-react-app ./my-app --template cra-template-pwa
because we need to have firebase-messaging-sw.js
in ./my-app/public
. Since there can only be one service worker per app, all my coding for offline behavior must also go firebase-messaging-sw.js
In a talk by Jonathan Mills, he implemented PWA using service worker in public folder. Here is the code he used:
const CACHE_NAME = 'DevReach';
// Version 0.6.5
self.addEventListener('install', (e) => {
e.waitUntil(
caches.open(CACHE_NAME).then((cache) => {
return cache
.addAll(['/', '/index.html', '/json/data.json', 'static/js/bundle.js'])
.then(() => self.skipWaiting());
})
);
});
The problem is when I build my app, there is no file at static/js/bundle.js
. Caching only index.html
doesn't do me any good since the body of index.html
will be empty, and react will inject the code needed to show the content.
The application code can be viewed at GitHub repo for the project.
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…