Fix service worker

client/src/app/app.module.ts

@@ -1,7 +1,9 @@
 import 'focus-visible'
+import { environment } from 'src/environments/environment'
 import { APP_BASE_HREF, registerLocaleData } from '@angular/common'
 import { NgModule } from '@angular/core'
 import { BrowserModule } from '@angular/platform-browser'
+import { ServiceWorkerModule } from '@angular/service-worker'
 import { ServerService } from '@app/core'
 import localeOc from '@app/helpers/locales/oc'
 import { MetaLoader, MetaModule, MetaStaticLoader, PageTitlePositioning } from '@ngx-meta/core'
@@ -11,7 +13,7 @@ import { CoreModule } from './core'
 import { EmptyComponent } from './empty.component'
 import { HeaderComponent, SearchTypeaheadComponent, SuggestionComponent } from './header'
 import { HighlightPipe } from './header/highlight.pipe'
-import { NotificationComponent, LanguageChooserComponent, MenuComponent } from './menu'
+import { LanguageChooserComponent, MenuComponent, NotificationComponent } from './menu'
 import { ConfirmComponent } from './modal/confirm.component'
 import { CustomModalComponent } from './modal/custom-modal.component'
 import { InstanceConfigWarningModalComponent } from './modal/instance-config-warning-modal.component'
@@ -49,6 +51,7 @@ registerLocaleData(localeOc, 'oc')
 
   imports: [
     BrowserModule,
+    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
 
     CoreModule,
     SharedMainModule,

client/src/main.ts

@@ -11,11 +11,6 @@ if (environment.production) {
 const bootstrap = () => platformBrowserDynamic()
   .bootstrapModule(AppModule)
   .then(bootstrapModule => {
-    if ('serviceWorker' in navigator && environment.production) {
-      navigator.serviceWorker.register('/ngsw-worker.js')
-        .catch(err => console.error('Cannot register service worker.', err))
-    }
-
     if (!environment.production) {
       const applicationRef = bootstrapModule.injector.get(ApplicationRef)
       const componentRef = applicationRef.components[0]

client/src/manifest.webmanifest

@@ -1,4 +1,7 @@
 {
+  "name": "PeerTube",
+  "short_name": "PeerTube",
+  "start_url": "/",
   "background_color": "#fff",
   "theme_color": "#fff",
   "description": "A federated video streaming platform using P2P",
@@ -40,8 +43,5 @@
       "sizes": "512x512",
       "type": "image/png"
     }
-  ],
-  "name": "PeerTube",
-  "short_name": "PeerTube",
-  "start_url": "/"
+  ]
 }

client/src/ngsw-config.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "../node_modules/@angular/service-worker/config/schema.json",
   "index": "/index.html",
   "assetGroups": [
     {

scripts/build/client.sh

@@ -69,8 +69,7 @@ else
     npm run ng build -- --localize=false --output-path "dist/$defaultLanguage/" --deploy-url "/client/$defaultLanguage/" --prod --stats-json $additionalParams
 fi
 
-mv "./dist/$defaultLanguage/manifest.webmanifest" "./dist/manifest.webmanifest"
-mv "./dist/$defaultLanguage/ngsw-worker.js" "./dist/"
+cp "./dist/$defaultLanguage/manifest.webmanifest" "./dist/manifest.webmanifest"
 
 cd ../ && npm run build:embed && cd client/
 

server/controllers/client.ts

@@ -1,9 +1,10 @@
 import * as express from 'express'
 import { constants, promises as fs } from 'fs'
+import { readFile } from 'fs-extra'
 import { join } from 'path'
 import { CONFIG } from '@server/initializers/config'
-import { buildFileLocale, getCompleteLocale, is18nLocale, LOCALE_FILES } from '@shared/core-utils/i18n'
 import { HttpStatusCode } from '@shared/core-utils'
+import { buildFileLocale, getCompleteLocale, I18N_LOCALES, is18nLocale, LOCALE_FILES } from '@shared/core-utils/i18n'
 import { root } from '../helpers/core-utils'
 import { STATIC_MAX_AGE } from '../initializers/constants'
 import { ClientHtml, sendHTML, serveIndexHTML } from '../lib/client-html'
@@ -46,22 +47,8 @@ const testEmbedController = (req: express.Request, res: express.Response) => res
 clientsRouter.use('/videos/test-embed', testEmbedController)
 clientsRouter.use('/video-playlists/test-embed', testEmbedController)
 
-// Static HTML/CSS/JS client files
-const staticClientFiles = [
-  'ngsw-worker.js',
-  'ngsw.json'
-]
-
-for (const staticClientFile of staticClientFiles) {
-  const path = join(root(), 'client', 'dist', staticClientFile)
-
-  clientsRouter.get(`/${staticClientFile}`, (req: express.Request, res: express.Response) => {
-    res.sendFile(path, { maxAge: STATIC_MAX_AGE.SERVER })
-  })
-}
-
 // Dynamic PWA manifest
-clientsRouter.get('/manifest.webmanifest', asyncMiddleware(generateManifest))
+clientsRouter.get(/\/client\/[^/]+\/manifest.webmanifest/, asyncMiddleware(generateManifest))
 
 // Static client overrides
 // Must be consistent with static client overrides redirections in /support/nginx/peertube
@@ -149,7 +136,7 @@ async function generateVideoChannelHtmlPage (req: express.Request, res: express.
 
 async function generateManifest (req: express.Request, res: express.Response) {
   const manifestPhysicalPath = join(root(), 'client', 'dist', 'manifest.webmanifest')
-  const manifestJson = await fs.readFile(manifestPhysicalPath, 'utf8')
+  const manifestJson = await readFile(manifestPhysicalPath, 'utf8')
   const manifest = JSON.parse(manifestJson)
 
   manifest.name = CONFIG.INSTANCE.NAME