PWA主要概念理想

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

PWA如何在React.js架構實作

Service Workers

Service workers (client-side proxies that pre-cache key resources) enable PWAs to load instantly and provide an instant, reliable experience for users, regardless of the network state
This is a browser capability to provide an intermediate layer between the Web App and the network, which runs in the background (even when the application is closed). This “network” layer is capable of listening and sending requests, notifications or even capturing connectivity changes
實作PWA是靠web browser內建在背景跑的一個程式
React已經內建好browser的service worker功能，請看src/servicewWorker.js。只需要呼叫serviceWorker.register();就搞定了

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();

線上資源

Workbox
- JavaScript libraries for adding offline support to web apps
Lighthouse
- 確認網頁的確是符合PWA的規則
- Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO and more.
Convert React App into a PWA
From create-react-app to PWA
Build a Realtime PWA with React
GitHub: Create React App