iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 25
1
Modern Web

Angular Firebase 入門與實做系列 第 25

[Angular Firebase 入門與實做] Day-24 Progressive Web App with Firebase 2

每日一句來源:Daily English

No spring nor summer beauty hath such grace, as I have seen in one autumnal face. --無論是春天的俏,還是夏天的美,都沒有秋天的這份優雅。(John Donne)

昨天我們了解了基本的PWA的方式,但是當使用著的檔案cache了之後我們該如何更新?總不能叫使用者清除cache來更新吧,所以Angular有提供更新的方法。我們來實做看看

我們可以根據官方文件知道可以透過SwUpdate來操作更新檔案,以下實作

export class AppComponent {

  private hasNew = false;
  
  constructor(
    private _auth: AuthService,
    // 這裡注入
    updates: SwUpdate,
    private _alc: AlertConfirmService) {
    // 我們這裡可以自己標記版本
    console.log('App working! 1.2.1');

    // 當有可用更新時
    if (_swUpdate.isEnabled) {
      // 如果沒有更新他會馬上進 then,如果有,他會進下面的監聽,當下載完成的時候才會進then
      _swUpdate.checkForUpdate().then(e => {
        console.log('版本檢查完畢!');
        this.hasNew = true;
      });
      _swUpdate.available.pipe(
          takeWhile(() => this.hasNew) // 當檢查完畢利用takeWhile來完成監聽
        ).subscribe(event => {
        console.log('current version is', event.current);
        console.log('available version is', event.available);
        this._alc.alert('新版本應用已更新!')
          .ok(() => {
            _swUpdate.activateUpdate()
              .then(() => {
                document.location.reload();
              });
          });
      });
    }
}

就這樣~!我們就能當我們的APP有更新的時候,我們可以讓使用者更新檔案!

本日小節

今天我們為PWA加入更新的功能,讓使用者能透過SwUpdate來更新檔案,可以說Angular想得很周到啊!連這些部分都有想到,真的覺得未來在實作上真的是越來越方便了。


上一篇
[Angular Firebase 入門與實做] Day-23 Progressive Web App with Firebase
下一篇
[Angular Firebase 入門與實做] Day-25 搜尋引擎優化SEO Rendertron
系列文
Angular Firebase 入門與實做31

尚未有邦友留言

立即登入留言