PWA checklist app

2019/05/10 Okachi.js で行われたトークのスライドです。
スライドとしては短いですが、どうなったら PWA なのかみたいなことをいくつかのチェックツールやチェックリストを出しながらお話ししました。

Transcript

1. PWA checklist app PWA をチェックするリストを見てみましょう
 2019/05/10 Okachi.js
 
 KAZUHIRO HARA
 @kara_d

2. https://kansock.industries 
 KAZUHIRO HARA 原 一浩 (@kara_d)
 Web サイトデザインの観測・ビッグデータのビジュアライズ 
 および、複雑な UI デザインがメイン領域 
 屋号は、カンソク (観測) からきてます 

3. もくじ
 1. PWA に必要な manifest.json について
 2. Lighthouse
 3. PWABuilder
 4. Progressive Web App Checklist
 5. その他のリソース

4. kansock.industries の manifest.json
 https://kansock.industries/manifest.json 
 { "short_name": "KANSOCK.I", "name": "KANSOCK.INDUSTRIES", "icons": [ ... ], "splash_pages": null, "start_url": "/", "display": "standalone", "theme_color": "#000000", "background_color": "#ffffff" }
5. Lighthouse
 • Lighthouse を使ってサイトをチェックしてみる (Next.js + MDX + TypeScript + Bulma + PWA) 
 ◦ https://kansock.industries/ja/articles/20190421_01/ 

6. PWABuilder
 • PWABuilder にて、PWA の Manifest などをチェックする
 ◦ https://kansock.industries/ja/articles/20190506_01/ 

7. Progressive Web App Checklist
 • Progressive Web App Checklist | Web | Google Developers
 ◦ https://developers.google.com/web/progressive-web-apps/checklist 

8. その他のリソース
 • PWA Checklist 2019 - DEV Community
 ◦ https://dev.to/uyouthe/pwa-checklist-2019-25j4 
 • プログレッシブウェブアプリチェックリスト
 ◦ https://gist.github.com/xl1/b8b9ef9ada5657b9b268c76e625fc5ee 
 • PWA Minimus: A minimal PWA checklist - mobiForge
 ◦ https://mobiforge.com/design-development/pwa-minimus-a-minimal-pwa-checklist 
 • The SEO Checklist For PWAs
 ◦ https://www.authoritylabs.com/the-seo-checklist-for-pwas/ 

9. END 
 KAZUHIRO HARA
 @kara_d
 https://kansock.industries