Progressive Web Apps

What are PWA Apps?

Progressive Web Apps (PWAs) are web applications that provide a native app-like experience to users. They are designed to work seamlessly across all devices, regardless of the platform. PWAs are built using web technologies like HTML, CSS, and JavaScript, and are designed to be responsive, fast, and easy to use.

PWAs can be installed on a user's device just like native apps, but they don't require users to download and install them from an app store. Instead, PWAs are installed directly from the web, using a simple installation process that requires just a few clicks.

Benefits of PWA Apps

• There are many benefits to using PWA Apps, including:
• Faster loading times: PWAs are designed to be fast and responsive, which means they load quickly even on slow networks.
• Improved user experience: PWAs provide a native app-like experience to users, which can improve engagement and reduce bounce rates.
• Offline functionality: PWAs can work offline, which means users can access content even when they don't have an internet connection.
• No app store requirements: PWAs can be installed directly from the web, which means they don't need to be approved by app stores.
• Lower development costs: PWAs can be built using web technologies, which can be more cost-effective than building native apps for multiple platforms.

Use Cases for PWA Apps

How PWA Apps Differ from Traditional Web and Native Apps

from flask import Flask, render_template, request
from datetime import datetime,timedelta

import sqlite3
import plotly
import plotly.graph_objs as go

app = Flask(__name__)

# a list of possible mood values
mood_values = [
    {'name': 'happy', 'icon': '😊'},
    {'name': 'sad', 'icon': '😢'},
    {'name': 'angry', 'icon': '😠'},
    {'name': 'neutral', 'icon': '😐'}
]

@app.route('/')
def index():
    return render_template('index.html', mood_values=mood_values)

@app.route('/mood', methods=['POST'])
def mood():
    # get the selected mood from the form data
    selected_mood = request.form['mood']
    # save the selected mood to a database with the current date
    conn = sqlite3.connect('mood_tracker.db')
    c = conn.cursor()
    c.execute('CREATE TABLE IF NOT EXISTS mood_values (date DATE, mood TEXT)')
    c.execute('INSERT INTO mood_values VALUES (?, ?)', (datetime.today().strftime('%Y-%m-%d'), selected_mood))
    conn.commit()
    conn.close()

    return 'Selected mood: ' + selected_mood

@app.route('/chart')
def chart():
    # retrieve the mood values from the database
    conn = sqlite3.connect('mood_tracker.db')
    c = conn.cursor()
    c.execute('SELECT date, mood FROM mood_values')
    data = c.fetchall()
    conn.close()

    # group the mood values by day, week, and month
    daily_moods = {}
    weekly_moods = {}
    monthly_moods = {}
    for row in data:
        date = datetime.strptime(row[0], '%Y-%m-%d')
        mood = row[1]
        # group by day
        if date in daily_moods:
            daily_moods[date].append(mood)
        else:
            daily_moods[date] = [mood]
        # group by week
        week_start = date - datetime.timedelta(days=date.weekday())
        if week_start in weekly_moods:
            weekly_moods[week_start].append(mood)
        else:
            weekly_moods[week_start] = [mood]
        # group by month
        month_start = date.replace(day=1)
        if month_start in monthly_moods:
            monthly_moods[month_start].append(mood)
        else:
            monthly_moods[month_start] = [mood]

    # create line chart traces for each mood value
    traces = []
    for mood in mood_values:
        daily_counts = [daily_moods[date].count(mood['name']) if date in daily_moods else 0 for date in sorted(daily_moods.keys())]
        weekly_counts = [weekly_moods[date].count(mood['name']) if date in weekly_moods else 0 for date in sorted(weekly_moods.keys())]
        monthly_counts = [monthly_moods[date].count(mood['name']) if date in monthly_moods else 0 for date in sorted(monthly_moods.keys())]
        daily_trace = go.Scatter(x=list(daily_moods.keys()), y=daily_counts, name = mood['name'] + ' (' + mood['icon'] + ') daily count')
        weekly_trace = go.Scatter(x=list(weekly_moods.keys()), y=weekly_counts, name=mood['name'] + ' (' + mood['icon'] + ') weekly count')
        monthly_trace = go.Scatter(x=list(monthly_moods.keys()), y=monthly_counts, name=mood['name'] + ' (' + mood['icon'] + ') monthly count')
        traces.append(daily_trace)
        traces.append(weekly_trace)
        traces.append(monthly_trace)
    layout = go.Layout(
    title='Mood Tracker',
    xaxis=dict(title='Date'),
    yaxis=dict(title='Mood Count'),
)

# create the line chart figure
    fig = go.Figure(data=traces, layout=layout)

# convert the chart figure to HTML and return it
    chart_html = plotly.offline.plot(fig, include_plotlyjs=False, output_type='div')
    return render_template('chart.html', chart_html=chart_html)

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Mood Tracker</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <h1>Mood Tracker</h1>
    <form action="{{ url_for('mood') }}" method="post">
        {% for mood in mood_values %}
            <button type="submit" name="mood" value="{{ mood['name'] }}">{{ mood['name'] }} {{ mood['icon'] }}</button>
        {% endfor %}
    </form>
</body>
</html>

chart.html

<!DOCTYPE html>
<html>
<head>
    <title>Mood Tracker Chart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- include the Plotly.js library -->
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
    <h1>Mood Tracker Chart</h1>
    <!-- insert the chart HTML here -->
    {{ chart_html|safe }}
</body>
</html>