Switch Weather Data Handling to Use Forecast Endpoint Fully (Offline Support)

[prem-k-r]

We have been using WeatherAPI’s forecast endpoint for a long time:

https://api.weatherapi.com/v1/forecast.json
?key=${apiKey}
&q=${currentUserLocation}
&days=1
&aqi=no
&alerts=no
&lang=${lang}

This endpoint already provides:

• Current weather data (updates every 15 minutes)
• Hourly forecast for today (00:00–23:00)

Current behavior:

• Only the current weather data is being used.
• Data retention:
  • 7.25 minutes when the user provides their own API key
  • 16 minutes otherwise
• Forecast data returned by the API is ignored.

Proposed change:

• Store additional data from the same API response
  • Persist today’s hourly forecast data along with current conditions.
• Enable offline support
  • When offline, fall back to the stored forecast data instead of showing no weather.

Offline behavior example:

• User fetches weather data once today while online.
• Later, the user goes offline and opens the browser at 10:40 AM.
• The extension should display the 10:00 hourly forecast data.
• The same logic applies throughout the day:
  any time between HH:00:00 and HH:59:59, show the forecast for that hour.

[coderabbitai]

📝 CodeRabbit Plan Mode

Generate an implementation plan and prompts that you can use with your favorite coding agent.

✅ Successfully generated implementation plan.

💡 Use @coderabbitai <feedback> to replan

Examples

• Example 1
• Example 2

---

🔗 Similar Issues

Related Issues

• Migration: Move from localStorage to browser/chrome.storage (with sync support) #108

👤 Suggested Assignees

• prem-k-r

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord!

[coderabbitai]

Coding Plan

Approach

Extend the existing WeatherAPI forecast endpoint usage to store and utilize the hourly forecast data that's already being fetched. When offline or when API requests fail, fall back to displaying the appropriate hourly forecast for the current hour instead of showing no weather data.

Observations

The extension uses WeatherAPI's forecast endpoint (with days=1) and currently extracts only current weather conditions. Data is cached in localStorage with JSON serialization and time-based expiration (7.25 minutes for user API keys, 16 minutes otherwise). The weather module uses filtered data storage patterns, has GPS and IP-based location detection, and relies on page reloads for location changes. Error handling currently logs to console without providing fallback UI. The codebase already has navigator.onLine detection in other modules (quotes.js) that can be leveraged.

Assumptions

Assumption 1: Should hourly forecast data from yesterday be used if the browser is opened offline the next day?

Options Considered:

• Use hourly forecast regardless of date (simpler implementation)
• Validate that stored forecast is for today before using it (more accurate)

Chosen Option: 2

Rationale: Validating the date ensures users don't see misleading weather data from previous days and aligns with the principle of data accuracy over convenience.

💡 User Tips

Regenerate the plan with different choices with @coderabbitai <feedback>.

Implementation Steps

Phase 1: Extend Data Storage to Include Hourly Forecast

Modify the weather data storage pattern to persist the hourly forecast array alongside current conditions, with date metadata for validation.

Task 1: Extract and Store Hourly Forecast Data

Update the data extraction logic in fetchWeather() to include the hourly forecast array.

• In scripts/weather.js within the fetchWeather() function (around lines 384-411 where filteredData is created), extend the filteredData object to include the hourly forecast array from the API response
• Store forecast.forecastday[0].hour array (contains 24 hourly objects with fields: time, time_epoch, temp_c, temp_f, condition, humidity, feelslike_c, feelslike_f)
• Store forecast.forecastday[0].date (date string) for validation purposes
• Keep the same localStorage key "weatherParsedData" but with expanded structure

Task 2: Add Date Tracking for Forecast Validation

Add metadata to support date validation of stored hourly forecasts.

• Store the forecast date (from forecast.forecastday[0].date) within the filteredData structure
• This enables validation that the stored hourly forecast is for today before attempting to use it

🤖 Prompt for AI agents

Extend the weather data storage to include hourly forecast data and date
metadata for validation.

In the fetchWeather() function in scripts/weather.js:
- Extend the filteredData object to include the hourly forecast array from
forecast.forecastday[0].hour
- Store forecast.forecastday[0].date for date validation
- Ensure the hourly array includes all 24 hourly objects with fields: time,
time_epoch, temp_c, temp_f, condition, humidity, feelslike_c, feelslike_f
- Maintain the existing localStorage key "weatherParsedData" with the expanded
structure

Phase 2: Implement Hourly Forecast Retrieval Logic

Create the logic to match the current hour to the appropriate hourly forecast entry and validate that the data is for today.

Task 1: Create Hour-Matching Function

Add a function to find and return the forecast data for the current hour.

• In scripts/weather.js, create a new function that takes the hourly forecast array and returns the matching entry for the current hour
• Use new Date().getHours() to get the current hour (0-23) in local time, following the existing pattern from clock.js
• Match against the time field in hourly objects (format "YYYY-MM-DD HH:00")
• Return the matched hourly forecast object or null if no match found

Task 2: Add Date Validation Logic

Implement validation to ensure stored forecast data is for today.

• Create a helper function that checks if the stored forecast date matches today's date
• Compare the stored forecast.forecastday[0].date against today's date string (format "YYYY-MM-DD")
• Return boolean indicating whether the forecast is valid for today

🤖 Prompt for AI agents

Create helper functions to retrieve and validate hourly forecast data.

In scripts/weather.js:
- Create a function that takes the hourly forecast array and returns the
matching entry for the current hour
- Get current hour using new Date().getHours() (0-23 format)
- Match against the time field in hourly objects (format "YYYY-MM-DD HH:00")
- Return the matched hourly forecast object or null if no match

- Create a date validation helper function
- Compare stored forecast date against today's date string (format "YYYY-MM-DD")
- Return boolean indicating if forecast is valid for today

Phase 3: Integrate Offline Detection and Fallback Mechanism

Add offline detection and modify the weather fetching logic to fall back to hourly forecast when offline or when API requests fail.

Task 1: Add Offline Detection Check

Integrate offline detection to determine when to use fallback data.

• In scripts/weather.js at the start of fetchWeather(), check navigator.onLine to detect offline state (following the pattern from quotes.js line 59)
• Store the offline state to determine whether to attempt API fetch or use cached data immediately

Task 2: Modify fetchWeather() to Support Fallback Logic

Update the main fetch function to handle offline scenarios and API failures gracefully.

• In scripts/weather.js fetchWeather() function (lines 360-422), add a conditional path that checks if offline and whether valid hourly forecast exists
• If offline AND valid hourly forecast exists for today: skip the API fetch and proceed to display logic with hourly data
• If offline AND no valid hourly forecast: keep existing cache display behavior (show last successful fetch if available)
• In the catch block (currently lines 595-598), instead of only logging the error, add fallback logic to check for valid hourly forecast and use it if available
• This addresses the current gap where API errors result in blank displays

Task 3: Update UpdateWeather() to Accept Hourly Forecast

Modify the weather display function to work with either current conditions or hourly forecast data.

• In scripts/weather.js UpdateWeather() function (lines 424-540), adapt the function to accept either current weather data or hourly forecast data
• Hourly forecast objects have the same temperature fields (temp_c, temp_f, feelslike_c, feelslike_f) and condition object as current weather
• Humidity field is present in hourly data with the same structure
• Ensure the function can display hourly forecast seamlessly without requiring different display logic
• For the location tile, continue using the location.name from the stored data regardless of whether showing current or hourly data

🤖 Prompt for AI agents

Integrate offline detection and fallback mechanism to use hourly forecast data
when offline or when API requests fail.

In scripts/weather.js:
- Add offline detection at the start of fetchWeather() using navigator.onLine
- Add conditional path: if offline AND valid hourly forecast exists for today,
skip API fetch and use hourly data
- If offline AND no valid hourly forecast, use existing cache display behavior
- In the catch block, add fallback logic to check for valid hourly forecast and
use it if available

- Modify UpdateWeather() function to accept either current weather data or
hourly forecast data
- Both data types have compatible fields: temp_c, temp_f, feelslike_c,
feelslike_f, condition, humidity
- Ensure seamless display regardless of data source
- Continue using location.name from stored data for the location tile

---

🚀 Next Steps

🤖 All AI agent prompts combined

Task: 1

Extend the weather data storage to include hourly forecast data and date
metadata for validation.

In the fetchWeather() function in scripts/weather.js:
- Extend the filteredData object to include the hourly forecast array from
forecast.forecastday[0].hour
- Store forecast.forecastday[0].date for date validation
- Ensure the hourly array includes all 24 hourly objects with fields: time,
time_epoch, temp_c, temp_f, condition, humidity, feelslike_c, feelslike_f
- Maintain the existing localStorage key "weatherParsedData" with the expanded
structure
===============================================================================

Task: 2

Create helper functions to retrieve and validate hourly forecast data.

In scripts/weather.js:
- Create a function that takes the hourly forecast array and returns the
matching entry for the current hour
- Get current hour using new Date().getHours() (0-23 format)
- Match against the time field in hourly objects (format "YYYY-MM-DD HH:00")
- Return the matched hourly forecast object or null if no match

- Create a date validation helper function
- Compare stored forecast date against today's date string (format "YYYY-MM-DD")
- Return boolean indicating if forecast is valid for today
===============================================================================

Task: 3

Integrate offline detection and fallback mechanism to use hourly forecast data
when offline or when API requests fail.

In scripts/weather.js:
- Add offline detection at the start of fetchWeather() using navigator.onLine
- Add conditional path: if offline AND valid hourly forecast exists for today,
skip API fetch and use hourly data
- If offline AND no valid hourly forecast, use existing cache display behavior
- In the catch block, add fallback logic to check for valid hourly forecast and
use it if available

- Modify UpdateWeather() function to accept either current weather data or
hourly forecast data
- Both data types have compatible fields: temp_c, temp_f, feelslike_c,
feelslike_f, condition, humidity
- Ensure seamless display regardless of data source
- Continue using location.name from stored data for the location tile

💡 Iterate on the plan with: @coderabbitai <feedback>

Example Feedback
- @coderabbitai You can skip phase 3. Add a simple unit test case for phase 2.
- @coderabbitai For assumption 1 go ahead with option 3 and replan.

---

💬 Have feedback or questions? Drop into our discord!

[numericals-org]

@prem-k-r Morning

feat: add offline fallback using stored hourly forecast data

Previously, only current weather data was used from WeatherAPI’s
forecast endpoint, while the hourly forecast for the day was ignored.

This change stores today’s 24-hour forecast data along with current
conditions and reuses it when the user is offline.

When offline, the extension selects the forecast for the current hour
(HH:00–HH:59) and displays it instead of showing no weather data.

Implementation details:

• Persist forecast.forecastday[0].hour from the API response
• Store the last successful fetch timestamp
• Detect offline state via failed requests or navigator.onLine
• Select forecast data using the current system hour
• Fallback to stored data when network is unavailable

No additional API requests are required since the forecast data is
already included in the existing API response.

We’d be happy to contribute this improvement to the project.
Please let us know if you have any preferred implementation
guidelines, architectural constraints, or review expectations.

[meets45]

Found this repo today while navigating for "good-first-issue" label, currently understanding the codebase, will surely be happy to help as well as contribute to open source😄Please assign this to me.

[S0ME2]

Hello everyone, I am new here and I want to contribute. Can you assign issue to me too? Also I can help with uzbek translation.

[prem-k-r]

Hi @meets45, @S0ME2, sorry, I’ve assigned the issue to @numericals-org as they asked for it first.

@numericals-org, please avoid 100% AI-generated code, AI-assisted work is fine.

@S0ME2, we appreciate your help with the Uzbek translation. You can compare locales/uz.js with locales/en.js. Please take your time, and feel free to open a PR.

[numericals-org]

@prem-k-r
thanks for the guidance! I understand the concern and will make sure to review, refine, and test my contributions carefully rather than relying entirely on AI-generated code.

[numericals-org]

Morning @prem-k-r
Apologies for the late submission of this PR due to some personal/work commitments. Thank you for your patience!

[SharadhNaidu]

@prem-k-r I see therre's No PR attached to the issue can i please work on it ?

[prem-k-r]

@prem-k-r I see therre's No PR attached to the issue can i please work on it ?

There is an open PR, #123.