Hit the pit

• Add the MIME type to the IIS server. Otherwise, the mainifest file will not be requested

• When you change the base_href, angular app.module files that register service workers need to change the address: ‘ngsw-worker.js’ to ‘./ngsw-worker.js’

     ServiceWorkerModule.register('./ngsw-worker.js', {
      enabled: environment.production,
      // Register the ServiceWorker as soon as the app is stable
      // or after 30 seconds (whichever comes first).
      registrationStrategy: 'registerWhenStable:30000',
    }),
    
  Copy the code

• When you add the PWA app to the home screen of the ios Safari browser, the app startup icon will not work, so you need to add the following code:

  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="default">
  <meta name="apple-mobile-web-app-title" content="refract">
  <link rel="apple-touch-icon" href="./assets/icons/icon-152x152.png">
  Copy the code

• Service worker browser active update function,

  export class UpdateService { constructor(public updates: SwUpdate, private message: NzMessageService) { if (updates.isEnabled) { interval(6 * 60 * 60).subscribe(() => updates.checkForUpdate().then(() => console.log('checking for updates')) ); updates.available.subscribe((event) => { console.log('current version is', event.current); console.log('available version is', event.available); This.message. info(' system found new version, will update automatically '); }); updates.activated.subscribe((event) => { console.log('old version was', event.previous); console.log('new version is', event.current); }); } } public checkForUpdates(): void { this.updates.available.subscribe((event) => this.promptUser()); } private promptUser(): void { this.updates.activateUpdate().then(() => { timer(3000).subscribe((x) => { document.location.reload(); console.log('updating to new version'); }); }); } } export class AppComponent { isCollapsed = false; constructor( private updateService: UpdateService, ) { this.updateService.checkForUpdates(); }}Copy the code

• Fixed an issue where Safari could not disable zooming for ios10 and up

  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0; name="viewport" /> <script> window.onload=function () { document.addEventListener('touchstart',function (event) { if(event.touches.length>1){ event.preventDefault(); }}); var lastTouchEnd=0; document.addEventListener('touchend',function (event) { var now=(new Date()).getTime(); if(now-lastTouchEnd<=300){ event.preventDefault(); } lastTouchEnd=now; },false); document.addEventListener('gesturestart', function (event) { event.preventDefault(); }); } </script>Copy the code

• Prevents browser page spring effects

  Add position: Fixed to the body

cache api data

In the ngsw-config.json file, add the following:

"dataGroups": [
{
  "name": "api",
  "urls": ["/api"],
  "cacheConfig": {
    "maxSize": 100,
    "maxAge": "3d",
    "timeout": "2m",
    "strategy": "freshness"
  }
}
Copy the code

]

• When adding a page to the main screen, if you want to carry a queryString, you can remove the start_URL and scope attributes from the mainifest file