工程開發 Engineering > :hamburger: 前端架構 Front-End Stack > PWA前端架構 Progressive Web Application

繁體 | 简体 | English


PWA主要概念理想

  1. 資源下線offline模式
    1. static site assets會自動被cache,下一次開起就超快
    2. 遠離wifi時app還是可以使用
  2. 開起時顯示splash screen
  3. 支援push notifications
  4. 網頁可以在手機首頁home screen下載一個app icon
  5. 網頁設計基本上會長的像手機app一樣


PWA如何在React.js架構實作

Service Workers

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.register();

線上資源