Today’s goals:

• Discuss the differences between websites and mobile applications (apps)
• Learn about progressive web apps

 Today’s featured site:

• http://appvswebsite.com/ – It’s not just about money; pretend you have a big budget to see some of the differences between mobile apps and websites

  App vs website

1. What are your favorite apps and why you like them so much?
2. Can you name a mobile app that doesn’t also have a website? Can you name a website that also has a mobile app?
3. Think about how you use your phone to do certain things. What apps do you use the most? Why? When do you use the browser? Why?
4. How do you open an app? How do you go to a website?
5. How do you navigate an app? How about a website?
6. What is the difference between an app and a website?
7. How much time do people spend in mobile apps vs browsing the internet on their phones?
8. How do you choose what to make- an app or a website?
9. What is a native app? A hybrid app? A web app?
10. What are the 2 dominant mobile app platforms?

 Progressive Web Apps

• Important vocabulary: website (webpage viewed in browser), native apps (mobile apps created for smartphones and downloaded to device- ex. Apple, Android)
• Let’s first watch this video  that explains PWAs (up until 4:02) and this video  that shows us a PWA(3:18-3:51)
• What are progressive web apps (PWAs)? How would you describe them? Let’s also see MDN’s definition .
• Why would developers consider building them vs a mobile (or native) app?
• How are they built? HTML, CSS, JavaScript, service workers, and APIs. Google has a handy code lab to help you get started: https://codelabs.developers.google.com/codelabs/your-first-pwapp/#0.
• Examples: Let’s open these in the browser on both our computers and our phones- https://app.starbucks.com/, https://2048-opera-pwa.surge.sh/, https://www.pinterest.com/, https://paperplanes.world/, and https://www.yummly.com/. What do you notice?
• Key concepts: PWAs run in the browser (don’t need to download in the app store); they have app-like functions (push notifications, caching, offline capabilities); they are mobile-friendly