Upgrade to Pro — share decks privately, control downloads, hide ads and more …

PWA RTA in Japan 2020

Okuto Oyama
February 01, 2020

PWA RTA in Japan 2020

PWA Night Conference 2020 発表資料

Okuto Oyama

February 01, 2020

More Decks by Okuto Oyama

Other Decks in Technology


  1. create-react-app import * as serviceWorker from './serviceWorker '; // 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: https://bit.ly/CRA-PWA serviceWorker.register(); https://pwa-react-yamanoku.netlify.com/
  2. vue-cli Vue CLI v4.1.2 ? Please pick a preset: (Use

    arrow keys) ❯ vue-cli-preset (babel, pwa, eslint) default (babel, eslint) Manually select features ✨ Creating project in ~/xxxxx/vue-pwa. Initializing git repository... ⚙ Installing CLI plugins. This might take a while... https://pwa-vue-yamanoku.netlify.com/
  3. anguler-cli $ @angular/cli new ? What name would you like

    to use for the new workspace and initial project? angular-pwa ? Would you like to add Angular routing? Yes ? Which stylesheet format would you like to use? CSS https://pwa-angular-yamanoku.netlify.com/
  4. anguler-cli $ @angular/cli add @angular/pwa Installing packages for tooling via

    npm. Installed packages for tooling via npm. $ @angular/cli build --service-worker --prod https://pwa-angular-yamanoku.netlify.com/
  5. preact-cli > Your next Preact PWA starts in 30 seconds.

    https://github.com/preactjs/preact-cli preact create default preact-pw 60.11s user 26.88s system 99% cpu 1:27.52 total https://pwa-preact-yamanoku.netlify.com/
  6. package.json { "private": true, "scripts": { "build": "pwa build", "start":

    "sirv build -s", "watch": "pwa watch" }, "dependencies": { "ganalytics": "^3.0.0", "sirv-cli": "^0.4.0" }, "devDependencies": { "@pwa/cli": "latest", "@pwa/plugin-offline": "latest" }, }
  7. 完走した感想 まとめ • モダンフレームワークの構築ツールではVue.jsが CLI上で完結して簡易的。 • React.jsはServiceWorkerの設定が必要。 • Angularはビルド時のオプションが必要。 •

    Preactの構築ツールがPWA RTA内では最速。 多分これが一番早いと思います。 • Universal PWA BuilderはRTA希望の星となる か? • https://www.pwabuilder.com/ すごい