Billboz/pwa-bookit-sample

A sample showing how some PWA features can be applied to a PETAL stack Elixir, LiveView web application.

PWA

LiveView configured as a Progressive Web Application.

To start your Phoenix server:

• Install dependencies with mix deps.get
• Install Node.js dependencies with npm install inside the assets directory
• Start Phoenix endpoint with mix phx.server

Now you can visit localhost:4000 from your browser.

Ready to run in production? Please check our deployment guides.

Project Notes

Created the project using:

mix phx.new pwa --live --no-ecto

Generated LiveView resource pages

mix phx.gen.live Books Book books title:string author:string

Resources

Project

• Sample repo
  • 2 branches
• Commit adding TailwindCSS and Alpine.js
• Podcast: #021 Tailwind CSS, Alpine.js and LiveView with Patrick Thompson - Show notes has lots of great Tailwind and Alpine resources.

PWA Resources

• 8 Tips to Make Your Website Feel Like an iOS App - YouTube video
• 8 Tips to Make Your Website Feel Like an iOS App - Blog form
• MDN env(safe-area-inset-*)
• Google's Progressive Web Apps guide

Understanding the State of the Art

Deals with platform differences and things like Push Notifications.

• The state of PWA support on mobile and desktop in 2020
• Progressive Web Apps: Core Features, Architecture, Pros and Cons
• What are Progressive Web Application Push Notifications?