踩坑

• 需要在IIS服务器添加MIME type,否则请求不到mainifest文件，报404 solution参考链接

• 当你改变了base_href时， angular中app.module文件注册service worker时候需要改变地址：'ngsw-worker.js' 变为 './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',
    }),
    
  

• ios safari浏览器中将PWA应用添加到主屏幕，应用的启动显示图标会不起作用，需要添加以下代码：

  <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">
  

• service worker 浏览器主动更新功能，

    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('系统发现新版本,即将自动更新');
          });
          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();
      }
    }
  

• 解决ios10及以上Safari无法禁止缩放的问题

     <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>
    
  

• 阻止浏览器页面弹簧效果

  在body上加入position: fixed样式

cache api data

在 ngsw-config.json文件中，加入以下代码：

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

]

• 添加页面到主屏幕时，如果想携带queryString, 可以移除从mainifest文件中start_url 和scope属性