ini bali : this is bali Progressive Web AMP (Story)

Iya, you read that right. An AMP Story running as a PWA. Sick.

"Ini Bali" means "this is Bali". AMP means mobile first. AMP Story means Snapchat/IG style story. PWA means more control over browser caching, an installable app, and can run offline if needed.

---

Live Version

---

Based on the Build a Progressive Web AMP Code Lab

---

Give it a Try

1. Bring up the ini bali Progressive Web App AMP story in your fave browser, then kill your network connection. Reload the page.
2. Bring up ini bali using Google Chrome on your desktop or laptop. When you see the + icon in your address bar, click it to install on your desktop. Try running ini bali with and without internet.
3. Bring up ini bali on Safari on you iPhone. Press the share icon. Swipe up and press on Add to Home Screen. Run the app with and without internet on your iPhone.

---

About AMP and PWA

Accelerated Mobile Page by Google and Twitter

Progressive Web Apps by Google

---

Screen Grabs

Installing ini bali via Safari on iOS

1. Click the share icon.
2. Swipe up.
3. Select Add to Home Screen.

---

Browser Caching Benchmarks

Click on image for larger version, if available. Then, click the Download button to view the full size.

No Browser Caching Going On

No HTTP browser caching. If there were, we would see some zero load times and see some from cache messages in the size column.

---

Obviously, no application caching (not a PWA).

---

HTTP browser caching enabled. We can see some zero load times and see some memory cache messages in the size column. Zero load times are sweet.

---

Pre-caching static files. Definitely a PWA.

---

Runtime (dynamic) caching. Definitely a PWA.

---

Performance Benchmarks

Pretty stoked with these initial results. This is out of the box with no performance tuning save standard image scaling and compression.

Edit 13 November 2019: Now getting a 90 on mobile and 100 on desktop. This is after further scaling the four images for the collage page, yet adding one new story page. I'll take it!

Edit 10 April 2020: Added latest mobile PageSpeed score (highest yet). I'll probably stop performance tuning here.

Initial Google PageSpeed Insights Mobile

---

Initial Google PageSpeed Insights Desktop

---

Google PageSpeed Insights Mobile After More Image Optimisation but Adding One New Page

---

Google PageSpeed Insights Desktop After More Image Optimisation but Adding One New Page

---

Latest PageSpeed mobile score after latest and probably final performance tweaks.

---

I'll Drink to That ;-)

caughtmyeye.cc